一、环境搭建
在开始学习React之前，首先需要搭建开发环境。以下是搭建React开发环境的详细步骤：
1. 安装Node.js和npm
确保你的电脑上安装了Node.js和npm（Node包管理器）。可以通过以下命令检查是否安装成功：
node -v
npm -v
如果未安装，可以访问
Node.js官网
下载并安装。
2. 使用Create React App创建项目
React提供了一个官方的脚手架工具
create-react-app
，可以帮助你快速创建React项目。
在终端中执行以下命令创建一个新的React项目：
npx create-react-app my-react-app
cd my-react-app
这将启动一个开发服务器，并在浏览器中自动打开项目。
3. 启动开发服务器
在项目目录下执行以下命令启动开发服务器：
npm start
此时，你可以在浏览器中访问
http://localhost:3000
查看你的React项目。
二、React核心概念
1. 组件（Component）
组件是React应用的基本构建块。它是一个用于构建用户界面的函数或类。
函数式组件
function Welcome(props) {
return

Hello, {props.name}

;
}
类组件
class Welcome extends React.Component {
render() {
return

Hello, {this.props.name}

;
}
}
2. JSX语法
JSX是一种JavaScript的语法扩展，用于描述UI结构。它看起来类似于HTML，但实际上是JavaScript代码。
const element =

Hello, world!

;
3. Props和State
Props是组件从外部接收数据的机制，而State是组件内部数据的状态。
Props
function Welcome(props) {
return

Hello, {props.name}

;
}

const element = ;
State
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}

render() {
return (

);
}
}
三、React组件生命周期
React组件在其生命周期中会经历一系列的钩子函数，用于处理组件的创建、更新和卸载等过程。
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 (

);
}
}
四、React路由管理（React Router）
React Router是一个用于在React应用中管理路由的库。
1. 设置基本路由
import React from ‘react’;
import { BrowserRouter as Router, Route, Link } from ‘react-router-dom’;

function App() {
return (

);
}

function Home() {
return

Home

;
}

function About() {
return

About

;
}

export default App;
2. 嵌套路由
import React from ‘react’;
import { BrowserRouter as Router, Route, Link, Switch } from ‘react-router-dom’;

function App() {
return (

);
}

function Home() {
return

Home

;
}

function About() {
return (

);
}

function Team() {
return

Team

;
}

export default App;
五、构建一个简单的 TODO 应用
下面是一个简单的 TODO 应用示例：
import React, { useState } from ‘react’;

function TodoApp() {
const [todos, setTodos] = useState([]);

const addTodo = (text) => {
const newTodo = { id: Date.now(), text };
setTodos([…todos, newTodo]);
};

const removeTodo = (id) => {
setTodos(todos.filter((todo) => todo.id !== id));
};

return (

);
}

export default TodoApp;
通过以上步骤，你可以轻松搭建你的第一个React项目Demo。在实际开发过程中，你可以根据自己的需求添加更多功能，如使用Redux进行状态管理、集成Ant Design等UI库等。祝你学习愉快！