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

相关推荐
摩羯座-185690305942 分钟前
VVIC 平台商品详情接口高效调用方案：从签名验证到数据解析全流程
java·前端·数据库·爬虫·python
GoldenaArcher2 分钟前
Postman 学习笔记 II：测试、断言与变量管理
笔记·学习·postman
小志开发1 小时前
SQL从入门到起飞：完整数据库操作练习
数据库·sql·学习·oracle·sqlserver·navicat
木觞清1 小时前
补环境-JS原型链检测：在Node.js中完美模拟浏览器原型环境
开发语言·javascript·node.js
我是华为OD~HR~栗栗呀1 小时前
华为od-前端面经-22届非科班
java·前端·c++·后端·python·华为od·华为
知识分享小能手1 小时前
React学习教程，从入门到精通，React Router 语法知识点及使用方法详解(28）
前端·javascript·学习·react.js·前端框架·vue·react
黄毛火烧雪下1 小时前
React中Class 组件 vs Hooks 对照
前端·javascript·react.js
潲爺2 小时前
Java IDEA学习之路：第二周课程笔记归纳
java·笔记·学习
gnip2 小时前
工作常用设计模式
前端·javascript
明明真系叻2 小时前
量子计算学习笔记（1）
笔记·学习·量子计算
热门推荐
01UV 工具安装与国内镜像源配置指南02GitHub 镜像站点03Spec-Kit 使用指南0446个Nano-banana 精选提示词，持续更新中05UV安装并设置国内源062025年华为杯研赛数学建模竞赛C题完整参考论文 （含模型、MATLAB和Python代码）07保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）08解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题09KGG转MP3工具|非KGM文件|解密音频10Linux下V2Ray安装配置指南