以下是一个使用 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;在这个组件中，我们使用
useState钩子来管理状态。todos数组存储待办事项列表，inputValue存储输入框的值。当用户在输入框中输入内容并点击“添加”按钮时，新的待办事项将被添加到列表中。
五、运行项目
在终端或命令提示符中，运行以下命令启动开发服务器：
npm start
这将启动一个本地开发服务器，你可以在浏览器中访问 http://localhost:3000 来查看你的应用。
通过这个简单的案例，你已经初步了解了如何使用 React 进行前端框架开发。随着学习的深入，你可以进一步探索 React 的更多功能和特性，如组件的生命周期、状态管理、路由等。
