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

相关推荐
橙子家27 分钟前
浏览器缓存之【结构化数据库与缓存】： IndexedDB、Cache storage 和 Storage buckets
前端
user205855615181332 分钟前
X6 中边悬浮置顶，规避 `mouseleave` 事件丢失问题
前端
李明卫杭州34 分钟前
CSS aspect-ratio 属性完全指南
前端
怕浪猫1 小时前
哪些软件对 Chrome DevTools Protocol 频繁使用
人工智能·架构·前端框架
Pedantic2 小时前
SwiftUI 手势层级（Gesture Hierarchy）详解
前端
飘尘3 小时前
前端转型全栈（Java后端）的快速上手指引
前端·后端·全栈
一颗烂土豆3 小时前
Meshopt 压缩深度解析，为什么它比 Draco 更快
前端·javascript·webgl
YFF菲菲兔4 小时前
调度系统和调和系统的桥梁
react.js
浏览器工程师4 小时前
AI Agent 接浏览器任务，先别让它一路点到底
前端·后端
热门推荐
012026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04【AI】2026 年具身智能模型和世界模型总结05GitHub 镜像站点06AI科技热点日报 | 2026年6月1日07AI一周事件 · 2026-06-03 至 2026-06-09082026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？09Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析10上线仅72小时被强制下架：Claude Fable 5 的短命