🔥博主：程序员不想YY啊🔥
💫CSDN优质创作者，CSDN实力新星，CSDN博客专家💫
🤗点赞🎈收藏⭐再看💫养成习惯
🌈希望本文对您有所裨益，如有不足之处，欢迎在评论区提出指正，让我们共同学习、交流进步！🌈
React
0. 前言
React是一个用于构建用户界面的 JavaScript 库，由 Facebook 发起并开源，下面是一个简要的 React 快速入门教程，帮助你开始使用这个强大工具：
1. 环境准备
在开始之前，请确保你已经安装了 Node.js 和 npm (Node.js 的包管理器)。你可以在 nodejs.org 上下载安装最新版的 Node.js，它通常包含 npm。
2. 创建一个新的 React 应用
使用 create-react-app 可以快速生成一个新的 React 应用。打开你的终端（命令行工具），然后输入：
npx create-react-app my-react-app
cd my-react-app
npm start
这会创建一个名为 my-react-app 的新目录，其中包含所有的初始文件，并启动一个开发服务器，然后在浏览器中打开你的新应用。
3. 了解项目结构
在 my-react-app 文件夹中，你会看到以下重要的文件和文件夹：
- 💫
public/index.html: 这是你的应用的主 HTML 文件。 - 💫
src/index.js: 这是 React 应用的入口文件。 - 💫
src/App.js: 这是一个基本的组件文件，包含了应用的初始内容。
4. 编辑 App 组件
接下来，打开 src/App.js 文件。这里定义了一个名为 App 的React 组件，它返回一段能够被渲染的 JSX 代码。
function App() {
return (
<div className="App">
<header className="App-header">
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
</header>
</div>
);
}
export default App;
可以修改上面的 App 组件，例如，更改段落 <p> 中的文字并保存文件，你的浏览器会自动刷新并显示新的内容。
5. JSX 语法
JSX 是一种看起来很像 HTML 的 JavaScript 语法扩展。与 React 一起使用时，JSX 可以让你更方便地描述 UI 应该呈现出什么样子。
6. 组件和 Props
组件是 React 应用的核心概念之一，它们让你能够拆分 UI 成独立的、可复用的部分，并且可以独立地考虑每个部分。
Props 是组件的参数。你可以这样创建一个带有 props 的组件:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
并在其他组件中使用它：
<Welcome name="Sara" />
7. State 和生命周期
State 是 React 组件的另一个重要概念，State 允许 React 组件在不需要重新加载页面的情况下，响应用户输入、网络响应和其他事件。
使用 State，你需要将函数组件转换为类组件或使用 Hooks。一个类组件例子：
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
8. 使用 Hooks
从 React 16.8 开始，你可以在不编写类的情况下使用 state 和其他 React 特性，这得益于引入了 Hooks。
import React, { useState, useEffect } from 'react';
function Clock() {
const [date, setDate] = useState(new Date());
useEffect(() => {
const timerID = setInterval(() => tick(), 1000);
return () => {
clearInterval(timerID);
};
}, []);
function tick() {
setDate(new Date());
}
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {date.toLocaleTimeString()}.</h2>
</div>
);
}
9. 测试你的组件
你的 React 应用可以通过各种方式来测试，一种流行的方法是使用 Jest 框架进行测试，它通常与 React 应用一起安装。
10. 部署你的应用
一旦你的应用做好了发布的准备，你可以运行 npm run build 来构建一个用于生产的版本，这会在你的项目目录下创建一个 build 文件夹，其中包含了用于部署的文件。
进一步学习 React，建议阅读 React 官方文档，用以深入理解这个库以及它的高级功能。
