React学习教程，从入门到精通， React 入门指南：创建 React 应用程序的语法知识点(7）

React 入门指南：创建 React 应用程序的语法知识点

---

一、React 简介

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并开源。它采用组件化开发模式，使得代码更加模块化、可复用和易于维护。

---

二、创建 React 应用程序的步骤

1. 环境准备

在开始之前，确保你的开发环境已经安装了以下工具：

• Node.js 和 npm：React 依赖于 Node.js 和 npm（Node 包管理器）。你可以从 Node.js 官网 下载并安装最新版本。
• 代码编辑器：推荐使用 Visual Studio Code。

2. 使用 Create React App 快速创建项目

create-react-app 是一个官方提供的脚手架工具，可以快速搭建 React 项目结构。

# 使用 npx 创建一个名为 my-react-app 的 React 项目
npx create-react-app my-react-app# 进入项目目录
cd my-react-app# 启动开发服务器
npm start

执行上述命令后，浏览器会自动打开 http://localhost:3000/，显示默认的 React 欢迎页面。

---

三、React 语法知识点详解

1. JSX（JavaScript XML）

JSX 是一种 JavaScript 的语法扩展，允许在 JavaScript 代码中编写类似 HTML 的结构。它使得编写 React 组件更加直观。

示例：

const element = <h1>Hello, React!</h1>;

2. 组件（Components）

React 应用由组件构成。组件可以是函数组件或类组件。

a. 函数组件（Function Components）

函数组件是最简单的组件形式，接受 props 作为参数并返回 JSX。

示例：

import React from 'react';function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}export default Welcome;

b. 类组件（Class Components）

类组件使用 ES6 类语法，可以拥有状态（state）和生命周期方法。

示例：

import React, { Component } from 'react';class Welcome extends Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}export default Welcome;

3. 状态（State）和属性（Props）

a. Props

props 是组件的输入，用于从父组件传递数据到子组件。

示例：

// 父组件
function App() {return <Welcome name="React" />;
}// 子组件
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}

b. State

state 是组件内部的状态，用于管理可变化的数据。

示例：

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}export default Counter;

4. 事件处理（Event Handling）

React 中处理事件与原生 JavaScript 类似，但使用驼峰命名法。

示例：

function ActionLink() {function handleClick(e) {e.preventDefault();console.log('The link was clicked.');}return (<a href="#" onClick={handleClick}>Click me</a>);
}

5. 生命周期方法（Lifecycle Methods）

类组件中有多个生命周期方法，用于在组件的不同阶段执行代码。函数组件中可以使用 Hooks 来实现类似的功能。

常用的生命周期方法：

• componentDidMount()：组件挂载后调用。
• componentDidUpdate()：组件更新后调用。
• componentWillUnmount()：组件卸载前调用。

示例：

class Timer extends React.Component {componentDidMount() {this.timerID = setInterval(() => this.tick(), 1000);}componentWillUnmount() {clearInterval(this.timerID);}tick() {console.log('Tick!');}render() {return <div>Timer is running</div>;}
}

6. Hooks

Hooks 是 React 16.8 引入的新特性，允许在函数组件中使用状态和其他 React 功能。

a. useState

用于在函数组件中添加状态。

示例：

import React, { useState } from 'react';function Example() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

b. useEffect

用于在函数组件中执行副作用操作，如数据获取、订阅等。

示例：

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;}, [count]);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

7. 列表与 Keys

在 React 中渲染列表时，需要为每个元素提供一个唯一的 key 属性。

示例：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => (<li key={number.toString()}>{number}</li>
));function NumberList() {return <ul>{listItems}</ul>;
}

8. 条件渲染

根据状态或 props 渲染不同的内容。

示例：

function Greeting(props) {const isLoggedIn = props.isLoggedIn;if (isLoggedIn) {return <h1>Welcome back!</h1>;}return <h1>Please sign up.</h1>;
}

9. 表单处理

在 React 中，表单元素如 <input>, <textarea>, <select> 等可以通过受控组件（controlled components）进行管理。

示例：

import React, { useState } from 'react';function Form() {const [value, setValue] = useState('');const handleChange = (e) => {setValue(e.target.value);};const handleSubmit = (e) => {e.preventDefault();console.log('Submitted value:', value);};return (<form onSubmit={handleSubmit}><label>Name:<input type="text" value={value} onChange={handleChange} /></label><button type="submit">Submit</button></form>);
}

10. 路由（Routing）

使用 react-router-dom 实现页面导航。

安装：

npm install react-router-dom

示例：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';function Home() {return <h2>Home</h2>;
}function About() {return <h2>About</h2>;
}function App() {return (<Router><div><nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about/">About</Link></li></ul></nav><Route path="/" exact component={Home} /><Route path="/about/" component={About} /></div></Router>);
}export default App;

---

四、详细案例代码：Todo List 应用

下面是一个简单的 Todo List 应用，涵盖了上述多个知识点，并附有详细注释。

1. 项目结构

my-react-app/
├── node_modules/
├── public/
├── src/
│   ├── components/
│   │   ├── TodoList.js
│   │   └── TodoItem.js
│   ├── App.js
│   ├── index.js
│   └── index.css
├── package.json
└── ...

2. index.js

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

3. App.js

// App.js
import React, { useState } from 'react';
import TodoList from './components/TodoList';
import TodoItem from './components/TodoItem';function App() {const [todos, setTodos] = useState([{ id: 1, text: 'Learn React', completed: false },{ id: 2, text: 'Build a Todo App', completed: false },]);const addTodo = (text) => {const newTodo = {id: todos.length + 1,text,completed: false,};setTodos([...todos, newTodo]);};const toggleTodo = (id) => {const updatedTodos = todos.map((todo) => {if (todo.id === id) {return { ...todo, completed: !todo.completed };}return todo;});setTodos(updatedTodos);};const deleteTodo = (id) => {const filteredTodos = todos.filter((todo) => todo.id !== id);setTodos(filteredTodos);};return (<div className="App"><h1>My Todo List</h1><TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} /><TodoItem addTodo={addTodo} /></div>);
}export default App;

4. components/TodoList.js

// components/TodoList.js
import React from 'react';function TodoList({ todos, toggleTodo, deleteTodo }) {return (<ul>{todos.map((todo) => (<li key={todo.id}><spanonClick={() => toggleTodo(todo.id)}style={{textDecoration: todo.completed ? 'line-through' : 'none',}}>{todo.text}</span><button onClick={() => deleteTodo(todo.id)}>Delete</button></li>))}</ul>);
}export default TodoList;

5. components/TodoItem.js

// components/TodoItem.js
import React, { useState } from 'react';function TodoItem({ addTodo }) {const [value, setValue] = useState('');const handleSubmit = (e) => {e.preventDefault();if (value.trim() !== '') {addTodo(value);setValue('');}};return (<form onSubmit={handleSubmit}><inputtype="text"value={value}onChange={(e) => setValue(e.target.value)}placeholder="Add a new todo"/><button type="submit">Add</button></form>);
}export default TodoItem;

6. index.css

/* index.css */
body {font-family: Arial, sans-serif;margin: 20px;
}h1 {text-align: center;
}ul {list-style-type: none;padding: 0;
}li {display: flex;align-items: center;margin-bottom: 10px;
}span {flex: 1;cursor: pointer;
}button {margin-left: 10px;padding: 5px 10px;background-color: #ff4d4d;border: none;color: white;cursor: pointer;border-radius: 3px;
}button:hover {background-color: #ff1a1a;
}

7. 运行应用

在项目根目录下运行：

npm start

打开浏览器访问 http://localhost:3000/，即可看到 Todo List 应用。

---

五、总结

本文涵盖了创建 React 应用程序所需的主要语法知识点，并通过一个简单的 Todo List 应用展示了如何应用这些知识。随着对 React 的深入学习，你可以探索更多高级主题，如 Redux、React Router、服务器端渲染（SSR）等。