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}>
          <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

// 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

/* 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）等。