开发者社区> 昆吾kw> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

React 基本使用和 JSX 语法

简介: 本文简单介绍了 React 是什么,以及使用官方脚手架工具,快速启动了一个 React 项目, 并演示了一个核心方法 `createElement` 方法的使用。同时简单介绍了 JSX 语法的基本使用。
+关注继续查看

React 介绍

React 起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,于是在 2013 年 5 月开源了。

React 是一个用于构建用户界面的 JavaScript 库也是目前最流行的前端框架之一

image-20220811234705140

React 特点

React 矿建具备三个核心特点:

  • 声明式 UI: UI 更清晰简洁
  • 组件化:方便复用,开发更灵活
  • 跨端开发:支持 SPA,SSR, Native App,VR 多平台开发

使用 React 脚手架创建项目

创建一个 React 项目方式一般有三种:

  • 自己使用 webpack 或者 vite 从零搭建
  • 使用官方脚手架快速创建项目

一般我们都是采用脚手架。

使用脚手架也有两种方式,一是先全局安装脚手架,再使用脚手架创建项目:

# 全局安装脚手架
npm i -g create-react-app 
# 创建项目,project-name 项目名称
create-react-app <project-name>

二是使用 npx / pnpm 远程调用脚手架创建项目:

# 以 pnpm 为例
pnpm create react-app 01.basic

# 进入项目并启动:
cd 01.basic
pnpm start

启动成功,打开浏览器访问:

image-20220812000405760

React 基本使用

第一个简单例子:使用 createElement 创建 React 元素

使用脚手架创建的项目,目录结构为:

image-20220812000701614

修改项目入口文件 src/index.js 的内容:

// React的核心包,主要实现了虚拟dom,用于创建 React 元素
import React from 'react';

// React 开发前端页面的核心包,负责将 React 元素渲染到页面
import ReactDom from 'react-dom';

// createElement 方法用于创建一个 React 元素
// 参数1:标签名称
// 参数2:属性集合  
// 参数3:标签子节点
const element = React.createElement('h1', { id: 'title' }, 'Hello, React');

// 将创建的元素渲染到html文件中的 root 节点上
ReactDom.render(element, document.getElementById('root'));

保存代码后,浏览器会自动刷新:

image-20220812000508376

JSX 的使用

JSX 基本概念

JSXJavaScript XML 的简写,表示了在 JavaScript 中书写 XML 格式的代码。

它是 React 的核心内容,可以让我们在 React 中创建元素更加简单,更加直观,提高开发效率。

需要注意的是,JSXJavaScript语法扩展,是一种语法糖,而不是一门新的语言。

这是原来创建一个 React 元素的写法:

import React from 'react';

import ReactDom from 'react-dom';

const element = React.createElement('h1', { id: 'title' }, 'Hello, React');

ReactDom.render(element, document.getElementById('root'));

换成 JSX 就是:

import ReactDom from 'react-dom';

const element = <h1 id="title">Hello, React</h1>

ReactDom.render(element, document.getElementById('root'));

我们现在默认安装的 React 版本都是 18.x了。从 React17 以后,React 核心包就可以不必显式导入了。脚手架工具在使用 Babel 编译 jsx 文件的时候会自动导入。

可以看到,JSX 语法相比 createElement 方法,更加简洁、直观、高效

JSX 的语法和一些注意点

JSX 语法,使用一对标签来表示一个组件。

为了和原生 HTML 标签区分,原生标签使用小写,React 组件使用大写

有几个特殊属性,写法不同,class 要写成 classNamefor 要写成htmlFor

节点没有内容的可以使用单标签

JSX 必需有根节点,如果没有根节点,可以使用 <></> 进行包裹。

如果 JSX 有换行,最好使用 () 包裹。

代码示例:

  • 特殊属性
// 特殊属性要修改:class -> className;for -> htmlFor 
<div className="box">
  <label htmlFor="username"></label>
  <input id="username" type="text" />
</div>
  • 没有内容的节点,可以使用单标签
<span></span> 
// 没内容可以写成单标签
<span />
  • 必须有根节点。有两种方式。
// 1. 使用 React.Fragment 组件
import React from 'react';
import ReactDom from 'react-dom';

const element = (
  <React.Fragment>
    // .....
  </React.Fragment>
);

ReactDom.render(element, document.getElementById('root'));


// 2. 使用 <></>,其实是 React.Fragment 的简写
import ReactDom from 'react-dom';
const element = (
  <>
    // ......
  </>
);
ReactDom.render(element, document.getElementById('root'));
  • 内容太多使用小括号包裹
const element = (
  <>
     // ......
  </>
);

JSX 使用表达式

JSX中可以写 JS 表达式,需要放在大括号{} 中。

常用的表达式形式包括:

  • 展示数据
  • 进行运算
  • 三元运算
  • 使用函数
  • 使用 JSX
  • 使用注释
import React from 'react';
import ReactDom from 'react-dom';

// 数据
const data = {  name: 'kw',  age: 18,};

// 函数
const up = () => {  return data.name.toUpperCase();};

// jsx 表达式
const list = (  
    <ul>  
        <li>jack</li> 
        <li>tony</li>  
    </ul>
);

const element = (  
    <div>    
        {/* 1. 使用数据。 JSX 注释也要写在 {} 中  */}    
        <div>姓名:{ data.name }</div>    
        <div>年龄:{ data.age }</div>    
        
        {/* 2. 使用运算 */}
        <div>明年几岁:{ data.age + 1 }</div>   
        
        {/* 3. 使用三元 */}    
        <div>是否成年:{ data.age > 18 ? '是' : '否' }</div> 
        
        {/* 4. 使用函数 */}    
        <div>姓名大写:{ up() }</div>  
        
        {/* 5. 使用JSX ,jsx也是表达式 */} 
        <div>朋友:{ list }</div> 
    </div>);

ReactDom.render(element, document.getElementById('root'));

小结

本文简单

小结

本文简单介绍了 React 是什么,以及使用官方脚手架工具,快速启动了一个 React 项目, 并演示了一个核心方法 createElement 方法的使用,它用来创建一个 React 元素,然后调用 render 方法,可以将其渲染到页面上。

同时, 可以发现使用 createElement 来写页面的话,非常麻烦,可读性差,所以实际开发中更推荐使用 JSX 来写真正的声明式 UI。

之后又简单介绍了 JSX 的一些常用写法和注意事项。下文会继续介绍 JSX 的其他用法。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
从零学React Native之13 持久化存储
数据持久化就是指应用程序将某些数据存储在手机存储空间中。 借助native存储 这种方式不言而喻,就是把内容传递给native层,通过原生API存储,详见从零学React Native之05混合开发 AsyncStorage API RN框架为开发者提供了 AsyncStorage API,开发者可以利用它将任意“字符串键值对”保存到存储空间中。 它是简单的
1501 0
React Native-组件的引用
之前文章中,我们使用了许多React Native组件,也定义了一些组件。但是我们都没有定义组件的标识,我们都是通过回调方法处理组件对应的事件,这种情况能满足绝大多数需求,有些情况我们需要对组件进行操作,此时就需要获取组件的引用,进而通过该应用对组件进行操作。比如,我们可以通过引用拿到组件,修改组件的属性。 定义组件的引用 通过在JSX代码中加入 ref=”某个字符串
839 0
从零学React Native之11 TextInput
TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式。 与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本布局。详情见上一篇文章从零学React Native之10Text TextInput属性 只列出了一些常用的,详情见官网 属性名 描述 default
1106 0
从零学React Native之10Text
在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中。虽然在之前的文章中多次使用了Text组件,但是Text组件还是值得专门学习的, 并没有想象中的那么简单。 任何一个组件,都有样式和属性,样式一般约束控件的样式和位置,定义在style属性中。属性就是直接声明在控件上。 Text样式 Text组件支持View的所有样式
1243 0
从零学React Native之09可触摸组件
可触摸组件有: TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback 1. TouchableWithoutFeedback,在用户触摸的时候没有反馈任何触摸效果,体验很不好,基本很少使用. 2. TouchableNativeFeedback 是Andro
1039 0
从零学React Native之04自定义对话框
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 从零学React Native之03页面导航 本篇主要介绍: 1. 自定义组件 2. Alert 对话框 自定义对话框 之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其
1541 0
从零学React Native之02状态机
本篇文章首发于简书 欢迎关注 之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 本篇文章主要介绍下下面的知识: 1.简单界面的搭建 2.状态机添加 3.渲染框架简介 4.语法简化 搭建界面 之前我们介绍了如何创建一个应用,现在我们来开发一个简单的注册界面。注释都写在代码里了, 如下: 进入项目
1300 0
从零学React Native之03页面导航
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给大家介绍了简单界面的搭建, 这一篇我们需要两个界面, 一个是注册界面,一个是注册信息界面. 当然我们还需要一个组件去控制两个界面的切换. 每个界面其实就一个组件 , 可以
1241 0
+关注
昆吾kw
前端开发。
38
文章
5
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载