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

知识分享小能手2025-09-02 10:28

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

相关推荐
夫瑞20 小时前
TypeScript 直接编译成原生二进制，没有浏览器，没有 V8
前端
Talents20 小时前
OpenLayers 7.5.2 判断点是否在区域边上
前端
共享家952720 小时前
单例模式（ 饿汉式与懒汉式 ）
开发语言·javascript·ecmascript
苦瓜小生20 小时前
【黑马点评学习笔记 | 实战篇 】| 10-用户签到+UV统计
笔记·后端·学习
_饭团20 小时前
C 语言内存函数全解析：从 memcpy 到 memcmp 的使用与模拟实现
c语言·开发语言·c++·学习·算法·面试·改行学it
cmd20 小时前
前端基础必看：JS 变量提升 & 函数提升完整解析
前端·javascript
小金鱼Y20 小时前
前端必看：this 不是玄学！5 大绑定规则帮你永久告别 this 困惑
前端·javascript·面试
别催小唐敲代码21 小时前
FastAPI 从零开始完整学习教程
学习·fastapi
谁在黄金彼岸21 小时前
用 AI 设计力打造专业 UI/UX：在 Trea、Qoder 等 AI IDE 中集成 ui-ux-pro-max-skill
前端
24白菜头21 小时前
第十五届蓝桥杯C&C++大学B组
数据结构·c++·笔记·学习·算法·leetcode·蓝桥杯
热门推荐
01GitHub 镜像站点02围棋-html版本03Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南04小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）05班级宠物园部署指南06OpenClaw 使用和管理 MCP 完全指南07OpenClaw Control UI安全上下文访问配置08UV安装并设置国内源09“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）102026年03月18日热门Model/github项目