博主：程序员不想YY啊 CSDN优质创作者，CSDN实力新星，CSDN博客专家 珞点赞收藏⭐再看养成习惯 希望本文对您有所裨益，如有不足之处，欢迎在评论区提出指正，让我们共同学习、交流进步！
React
0. 前言1. 环境准备2. 创建一个新的 React 应用3. 了解项目结构4. 编辑 App 组件5. JSX 语法6. 组件和 Props7. State 和生命周期8. 使用 Hooks9. 测试你的组件10. 部署你的应用
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 (
Edit src/App.js and save to reload.
);
}
export default App;
可以修改上面的 App 组件，例如，更改段落
中的文字并保存文件，你的浏览器会自动刷新并显示新的内容。
5. JSX 语法
JSX 是一种看起来很像 HTML 的 JavaScript 语法扩展。与 React 一起使用时，JSX 可以让你更方便地描述 UI 应该呈现出什么样子。
6. 组件和 Props
组件是 React 应用的核心概念之一，它们让你能够拆分 UI 成独立的、可复用的部分，并且可以独立地考虑每个部分。
Props 是组件的参数。你可以这样创建一个带有 props 的组件:
function Welcome(props) {
return
Hello, {props.name}
;}
并在其他组件中使用它：
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 (
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
);
}
}
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 (
Hello, world!
It is {date.toLocaleTimeString()}.
);
}
9. 测试你的组件
你的 React 应用可以通过各种方式来测试，一种流行的方法是使用 Jest 框架进行测试，它通常与 React 应用一起安装。
10. 部署你的应用
一旦你的应用做好了发布的准备，你可以运行 npm run build 来构建一个用于生产的版本，这会在你的项目目录下创建一个 build 文件夹，其中包含了用于部署的文件。
进一步学习 React，建议阅读 React 官方文档，用以深入理解这个库以及它的高级功能。
文章链接
您阅读本篇文章共花了： 大家都在找：
react.js：react.js中文文档
前端：前端开发
前端框架：前端框架bootstrap
发表评论