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 项目结构。
bash
# 使用 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 组件更加直观。
示例:
jsx
const element = <h1>Hello, React!</h1>;
2. 组件(Components)
React 应用由组件构成。组件可以是函数组件或类组件。
a. 函数组件(Function Components)
函数组件是最简单的组件形式,接受 props
作为参数并返回 JSX。
示例:
jsx
import React from 'react';
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
export default Welcome;
b. 类组件(Class Components)
类组件使用 ES6 类语法,可以拥有状态(state)和生命周期方法。
示例:
jsx
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
是组件的输入,用于从父组件传递数据到子组件。
示例:
jsx
// 父组件
function App() {
return <Welcome name="React" />;
}
// 子组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
b. State
state
是组件内部的状态,用于管理可变化的数据。
示例:
jsx
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 类似,但使用驼峰命名法。
示例:
jsx
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()
:组件卸载前调用。
示例:
jsx
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
用于在函数组件中添加状态。
示例:
jsx
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
用于在函数组件中执行副作用操作,如数据获取、订阅等。
示例:
jsx
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
属性。
示例:
jsx
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 渲染不同的内容。
示例:
jsx
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)进行管理。
示例:
jsx
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
实现页面导航。
安装:
bash
npm install react-router-dom
示例:
jsx
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
jsx
// 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
jsx
// 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
jsx
// components/TodoList.js
import React from 'react';
function TodoList({ todos, toggleTodo, deleteTodo }) {
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<span
onClick={() => 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
jsx
// 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}>
<input
type="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
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. 运行应用
在项目根目录下运行:
bash
npm start
打开浏览器访问 http://localhost:3000/
,即可看到 Todo List 应用。
五、总结
本文涵盖了创建 React 应用程序所需的主要语法知识点,并通过一个简单的 Todo List 应用展示了如何应用这些知识。随着对 React 的深入学习,你可以探索更多高级主题,如 Redux、React Router、服务器端渲染(SSR)等。