React 基本使用和 JSX 语法

React 介绍

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

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

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

启动成功，打开浏览器访问：

React 基本使用

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

使用脚手架创建的项目，目录结构为：

修改项目入口文件 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'));

保存代码后，浏览器会自动刷新：

JSX 的使用

JSX 基本概念

JSX 是 JavaScript XML 的简写，表示了在 JavaScript 中书写 XML 格式的代码。

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

需要注意的是，JSX 是 JavaScript 的语法扩展，是一种语法糖，而不是一门新的语言。

这是原来创建一个 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 要写成 className ，for 要写成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 的其他用法。