当前位置：首页 > news >正文

React 前端框架开发入门案例

news 2025/9/14 19:45:32

以下是一个使用 React 进行前端框架开发的入门案例，实现一个简单的待办事项列表应用。

一、准备工作

安装 Node.js：React 需要 Node.js 环境来运行。你可以从 Node.js 官方网站下载并安装适合你操作系统的版本。
创建项目目录：在你的电脑上创建一个新的文件夹，用于存放 React 项目。
初始化项目：打开终端或命令提示符，进入项目目录，运行以下命令初始化一个新的 Node.js 项目：
```
npm init -y
```
安装 React 和 React DOM：在项目目录中，运行以下命令安装 React 和 React DOM：
```
npm install react react-dom
```

二、创建项目结构

在项目目录中，创建以下文件和文件夹：
- index.html：HTML 页面文件。
- src：存放 React 组件的文件夹。
- src/App.js：主应用组件文件。

在 index.html 文件中，添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>待办事项列表</title>
</head>
<body><div id="root"></div><script src="./src/index.js"></script>
</body>
</html>

这个 HTML 文件创建了一个带有 id 为 root 的 <div> 元素，用于渲染 React 应用。同时，它引入了一个名为 index.js 的脚本文件，这个文件将是我们的入口文件。

三、创建 React 组件

在 src/App.js 文件中，创建一个名为 App 的 React 组件：

import React from 'react';function App() {return (<div><h1>待办事项列表</h1></div>);
}export default App;

这个组件返回一个包含标题的 <div> 元素。

在 src/index.js 文件中，引入 React 和 React DOM，并渲染 App 组件到 root 元素：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';ReactDOM.render(<App />, document.getElementById('root'));

四、添加待办事项功能

在 App 组件中，添加一个状态来存储待办事项列表和一个输入框的值：

import React, { useState } from 'react';function App() {const [todos, setTodos] = useState([]);const [inputValue, setInputValue] = useState('');return (<div><h1>待办事项列表</h1><inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}/><button onClick={() => {if (inputValue.trim()!== '') {setTodos([...todos, inputValue]);setInputValue('');}}}>添加</button><ul>{todos.map((todo, index) => (<li key={index}>{todo}</li>))}</ul></div>);
}export default App;