ReactJS 初学者教程：通过分步示例进行学习

什么是 ReactJS？

ReactJS 是一个开源前端 Java用于构建用户界面的脚本库。 ReactJS 由 Facebook 和个人开发者及公司社区维护。它被广泛用作构建单页网站和移动应用程序的基础。它非常易于使用，并允许用户创建可重复使用的 UI 组件。

ReactJS 的功能

JSX： JSX 是 JavaScript 的一个扩展。虽然在 React 中不强制使用 JSX，但它是一个很好的特性之一，而且易于使用。

旅行箱配件：组件就像纯 JavaScript 函数，通过将逻辑拆分为可重用的独立代码，有助于简化代码。我们可以将组件用作函数，将组件用作类。组件还具有状态，即 props，这使生活变得轻松。在类中，每个 props 的状态都会得到维护。

虚拟 DOM： React 创建了一个虚拟 DOM，即内存中的数据结构缓存。只有 DOM 的最终更改才会在浏览器 DOM 中更新。

Javascript 表达式： JS 表达式可以在 jsx 文件中使用花括号，例如 {}。

ReactJS 的优势

以下是使用 ReactJS 的重要优点/好处：

ReactJS 使用虚拟 dom，利用内存数据结构缓存，并且只有最终的更改才会在浏览器 dom 中更新。这使应用程序更快。
您可以使用 React 组件功能创建您选择的组件。这些组件可以重复使用，也有助于代码维护。
Reactjs 是一个开源的 javascript 库，因此很容易上手。
ReactJS 在短时间内变得非常流行，并由 Facebook 和 Instagram 维护。它被许多著名公司使用，例如 Apple， Netflix等等。
Facebook 维护 ReactJS 这个库，因此它得到良好的维护并保持更新。
ReactJS 可用于为桌面和移动应用程序开发丰富的 UI。
易于调试和测试，因为大多数编码都是在 Javascript 而不是 Html。

ReactJS 的缺点

以下是使用 ReactJS 的缺点/缺点：

大多数代码都是用 JSX 编写的，即 Html 和 css 是 javascript 的一部分，这可能会造成很大混乱，因为大多数其他框架都倾向于将 Html 与 javascript 代码分开。
ReactJS 的文件大小很大。

从 CDN 使用 ReactJS

要开始使用 react，我们需要先安装 reactjs。您可以使用 CDN javascript 文件轻松开始使用 reactjs，如下所示。

前往 reactjs 官方网站获取 CDN 链接，即 https://reactjs.org/docs/cdn-links.html 您将获得解释下图所需的文件。

对于开发者

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

对于产品

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>		
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

更换版本使用 react-development.js 和 react-dom.developement.js 的最新 React 版本。您可以在您的终端托管这些文件以开始使用 reactjs。

如果您计划使用 CDN 文件，请确保保留跨域属性，以避免跨域问题。Reactjs 代码不能直接在浏览器中执行，需要先使用 Babel 转换为 javascript，然后才能在浏览器中执行。

以下是可以使用的 BabelJS 脚本：

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

这是使用 cdn 文件和 babeljs 脚本的 ReactJS 工作示例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>   
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

输出：

我们将在下一章中详细介绍代码，让我们看看这里如何使用 CDN 文件。据说直接使用 babel 脚本不是一个好习惯，新手暂时只能用它来学习 reactjs。在生产中，您必须使用 npm 包安装 react。

使用 NPM 包

确保已安装 nodejs。如果未安装，请阅读此 nodejs 教程（https://www.guru99.com/node-js-tutorial.html）安装。

安装nodejs后，创建一个文件夹 反应项目/.

要开始项目设置，运行命令 npm初始化.

文件夹结构如下：

reactproj\
package.json

现在我们将安装我们需要的软件包。

以下是 reactjs 的软件包列表：

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

打开命令提示符并在 reactproj/ 文件夹内运行上述命令。

建立资料夹 src / 所有 js 代码都将位于该文件夹中。reactjs 项目的所有代码都将位于 src/ 文件夹中。创建文件 index.js 并添加 import react 和 react-dom，如下所示。

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

我们已经返回了 ReactJS 的基本代码。我们将在下一章中解释它的细节。我们想要显示 您好，来自 Guru99 Tutorials 并且对id为“root”的dom元素也赋予同样的值，它取自index.html文件，即起始文件，如下所示。

创建一个文件夹 public/ 并在其中添加 index.html，如下所示

index.html的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

react-scripts 包将负责编译代码并启动服务器以显示 html 文件，即 index.html。您需要在 package.json 中添加命令，该命令将负责使用 react-scripts 编译代码并启动服务器，如下所示：

 "scripts": {
    "start": "react-scripts start" 
  }

安装完所有包，并添加上述命令后，最终的package.json如下：

包.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

要开始测试 reactjs，请运行命令

npm run start

C:\reactproj>npm run start		
> [email protected] start C:\reactproj		
> react-scripts start

它将打开带有 URL 的浏览器 http://localhost:3000/ 如下图所示：

公共/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

在下一章中，我们也将使用相同的过程来执行 javascript 文件。将所有 js 和 .jsx 文件添加到 src/ 文件夹中。文件结构如下：

reatproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

如何创建你的第一个 React 项目设置

以下是本 ReactJS 教程中关于如何开始第一个 React 应用程序的分步指南。

步骤1） 导入反应包。
1. 要开始使用 ReactJS，我们需要首先导入 react 包，如下所示。

import React from 'react';	
import ReactDOM from 'react-dom';

2. 将文件保存为 src/ 文件夹中的 index.js

步骤2） 编写简单的代码。
我们将在本教程中编写一段 React JS 简单代码，在其中显示消息 “您好，来自 Guru99 Tutorials！”

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render 将添加标签添加到 id 为 root 的元素。这是我们的 html 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

步骤3） 编译代码。

接下来在本 React.js 教程中，我们需要编译代码以在浏览器中获取输出。

文件夹结构如下：

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

我们在package.json中添加了编译最终文件的命令如下：

"scripts": {
    "start": "react-scripts start"
  },

要编译最终文件，请运行以下命令：

npm run start

当你运行上述命令时，它将编译文件并在出现任何错误时通知你，如果一切正常，它将打开浏览器并运行 index.html 文件 http://localhost:3000/index.html

命令：npm run start：

C:\reactproj>npm run start

> [email protected] start C:\reactproj
> react-scripts start

步骤4） 检查输出。
网址 http://localhost:3000 代码编译后将在浏览器中打开，如下所示：

什么是 JSX？

JSX 是 javascript 的一个扩展。它是一个模板脚本，您可以使用 HTML 和 Javascript 在一起。

这是一个 JSX 代码的简单示例。

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

为什么我们需要 React 中的 JSX?

对于UI，我们需要Html，dom中的每个元素都会有要处理的事件、状态改变等。

在 React 的情况下，它允许我们在同一个文件中使用 Html 和 javascript，并以有效的方式处理 dom 中的状态变化。

JSX 中的表达式

这是一个如何在 JSX 中使用表达式的简单示例。

在之前的 ReactJS 示例中，我们曾写过类似这样的代码：

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

现在我们将修改上面的代码以添加表达式。表达式用在花括号 {} 内，并在运行时展开。react 中的表达式与 javascript 表达式相同。

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

现在让我们在浏览器中测试一下。

您可以看到 {display} 表达式没有被替换。当在 .js 文件内部使用表达式时，React 不知道该做什么。

现在让我们添加更改并创建一个.jsx 文件，如下所示：

测试.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

我们已经添加了所需的代码，并将在 index.js 中使用 text.jsx 文件。我们希望 h1标签 script.js 内部要使用的变量，因此在 test.jsx 中导出的内容与上文所示相同

以下是 index.js 中修改后的代码

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

要在 index.js 中使用 test.jsx，我们必须首先导入它，如下所示：

import h1tag from './test.jsx';

我们现在可以在 ReactDOM.render 中使用 h1tag，如下所示：

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

以下是我们在浏览器中检查的输出：

ReactJS 中的组件是什么？

组件就像纯 javascript 函数，通过将逻辑分解为可重复使用的独立代码来帮助简化代码。

组件作为函数

测试.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
} 
const Hello_comp = <Hello />;
export default Hello_comp;

我们创建了一个名为您好返回 h1 标签，如上所示。函数名称充当元素，如下所示：

const Hello_comp = <Hello />;
export default Hello_comp;

组件您好用作 Html 标签，即并分配给 你好_comp 变量，并且使用 export 来导出相同的变量。

现在让我们在 index.js 文件中使用这个组件，如下所示：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

以下是浏览器中的输出：

类作为组件

这是一个使用类作为组件的 ReactJS 示例。

测试.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React. Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

我们可以在 index.js 文件中使用 Hello 组件，如下所示：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

组件 Hello 用作 Html 标签，即，。

以下是相同的输出。

ReactJS 中的状态是什么？

状态是类似于 props 的 javascript 对象，其中包含用于 reactjs 渲染的数据。状态数据是私有对象，在类内的组件中使用。

州示例

这是一个关于如何在类中使用状态的有效示例。

测试.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

这是我们在浏览器中测试的结果：

ReactJS 中的 Props 是什么？

Props 是组件内部使用的属性。它们充当可在组件内部使用的全局对象或变量。

函数组件的 Props

下面是将 props 传递给函数组件的示例。

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

如上所示，我们添加了味精归因于组件。同样可以这样访问道具在 Hello 函数中，这是一个将具有味精属性详情，同样作为表情使用。

该组件在index.js中的使用如下：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

以下是浏览器中的输出：

类组件的属性

要访问类中的 props，我们可以按如下方式操作：

测试.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

- 味精在index.js中将属性传递给组件如下：

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

这是浏览器中的输出：

还检查： - AngularJS 初学者教程：逐步学习 AngularJS

组件的生命周期

组件的生命周期分为初始化（Initialization）、安装（Mounting）、更新（Update）、卸载（UnMounting）几个阶段。

以下是关于每个组件的详细解释。

reactjs中一个组件有以下几个阶段：

初始化：这是组件生命周期的第一阶段。

这里将具有默认的道具和初始级别的状态。

安装：在此阶段，组件在 dom 内部进行渲染。我们在安装状态下接触以下方法。

componentDidMount()：当组件刚刚添加到 dom 时也会调用这个方法。

render()：所有创建的组件都有此方法。它返回 Html 节点。

更新：在这个状态下，dom 与用户交互并更新。例如，你在文本框中输入了一些内容，因此状态属性会更新。

以下是更新状态下可用的方法：

shouldComponentUpdate() ：当组件更新时调用。

componentDidUpdate() ：组件更新后。

卸载： 当组件不再需要或者被移除时，就会出现此状态。

以下是卸载状态下可用的方法：

Component willUnmount()：当组件被移除或者销毁时调用。

工作示例

这是一个工作示例，展示了在每个状态下调用的方法。

例如：complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }
  
  componentDidMount() {  
    console.log('Mounting State : calling method componentDidMount');
  }   
 
  shouldComponentUpdate() {  
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }  

  componentDidUpdate() {  
    console.log('Update  State : calling method componentDidUpdate')  
  }  
  componentWillUnmount() {  
    console.log('UnMounting State : calling method componentWillUnmount');
  }  

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

当你在浏览器中检查输出时

在浏览器控制台中你得到：

当用户在文本框中输入时：

控制台中显示以下消息：

使用表单

在 reactjs Html 输入元素中类似，并且 <select /> 有自己的状态，并且需要在用户使用 setState() 方法交互时进行更新。

在本章中，我们将了解如何在 reactjs 中使用表单。

这是一个有效的例子：

表单.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

对于输入字段，我们需要维护状态，因此 React 提供了一种特殊的方法，称为 设置状态， 这有助于在发生变化时维持状态。

我们在文本框和提交按钮上使用了 onChange 和 onClick 事件。当用户在文本框中输入内容时，将调用 onChange 事件，并且状态对象状态内的名称字段将更新，如下所示：

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

浏览器中的输出如下：

步骤1）在文本框中输入您的姓名：

点击提交按钮

在 ReactJS 中使用事件

在 reactjs 中使用事件的方式与在 javascript 中相同。您可以使用 javascript 中使用的所有事件处理程序。setState() 方法用于在用户与任何 Html 元素交互时更新状态。

这是一个如何在 reactjs 中使用事件的工作示例。

事件.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

对于输入字段，我们需要维护状态，因此 React 提供了一种特殊的方法，称为 设置状态， 这有助于在发生变化时维持状态。

我们已经利用了事件 onChange 和 的onClick 在文本框和按钮上。当用户在文本框中输入 onChange 事件被调用，状态对象状态里面的name字段被更新，如下所示：

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

以下是浏览器中的输出：

当用户输入名称时：

当用户点击“单击此处”按钮时：

在 ReactJS 中使用内联 CSS

将查看一个工作示例来了解 reactjs 中内联 css 的工作原理。

添加样式.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};
  
function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

我已将颜色：“红色”样式添加到 h1 标签。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

浏览器中的输出如下：

您可以创建一个您想要的元素样式的对象，并使用表达式来添加样式，如上面的示例所示。

在 ReactJS 中使用外部 CSS

让我们创建一个外部 css，为此创建一个文件夹 css/ 并在其中添加 style.css。

style.css文件

.h1tag {
color:red;
}

将 style.css 添加到 index.html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head> 
  <body>
    <div id = "root"></div>
    <script src = "out/script.min.js"></script>
  </body>
</html>

现在让我们将类添加到 .jsx 文件中的 h1 标签中

添加样式.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';
  
function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

className 属性给出了类的详细信息。现在让我们在浏览器中进行测试。

这是你在浏览器中检查 h1 标签时看到的内容：

可以看到class=”h1tag”已经成功添加到h1标签中。

总结

ReactJS 是一个开源前端 Java用于构建用户界面的脚本库。它由 Facebook 维护，目前被许多公司用于 UI 开发。
ReactJS 的核心功能包括 JSX、组件（功能组件和基于类的组件）、组件的生命周期、props 和组件的状态支持，以及与 javascript 表达式协同工作。
解释了使用 CDN 文件进行 ReactJS 项目设置以及使用 npm 包来构建项目。
JSX 是 javascript 的一个扩展。它是一个模板脚本，您可以同时使用 Html 和 javascript。
组件就像纯 javascript 函数，通过将逻辑分解为可重复使用的独立代码来帮助简化代码。
状态是类似于 props 的 javascript 对象，其中包含用于 reactjs 渲染的数据。状态数据是私有对象，在类内的组件中使用。
Props 是在组件内部使用的属性。
组件的生命周期分为初始化（Initialization）、安装（Mounting）、更新（Update）、卸载（UnMounting）几个阶段。
在 reactjs html 输入元素中，并且 <select /> 有自己的状态，并且需要在用户使用 setState() 方法进行交互时进行更新。
在 reactjs 中使用事件的方式与在 javascript 中相同。您可以使用 javascript 中使用的所有事件处理程序。setState() 方法用于在用户与任何 Html 元素交互时更新状态。
ReactJS 允许您使用 javascript 表达式处理外部 css 以及内联 css。

还检查： - 70 个最热门的 React 面试问题及答案（已更新）

你可能会喜欢：

5 门最佳 React 课程，包含……

什么是 ReactJS？

ReactJS 的功能

ReactJS 的优势

ReactJS 的缺点

从 CDN 使用 ReactJS

对于开发者

对于产品

相关文章

使用 NPM 包

如何创建你的第一个 React 项目设置

什么是 JSX？

为什么我们需要 React 中的 JSX?

JSX 中的表达式

ReactJS 中的组件是什么？

组件作为函数

类作为组件

ReactJS 中的状态是什么？

州示例

ReactJS 中的 Props 是什么？

函数组件的 Props

类组件的属性

组件的生命周期

工作示例

使用表单

在 ReactJS 中使用事件

在 ReactJS 中使用内联 CSS

在 ReactJS 中使用外部 CSS

总结