网站建设行业税率,做网站后台教程视频,给自己做网站,为啥都用wordpress以下是一个使用 React 进行前端框架开发的入门案例#xff0c;实现一个简单的待办事项列表应用。
一、准备工作 安装 Node.js#xff1a;React 需要 Node.js 环境来运行。你可以从 Node.js 官方网站下载并安装适合你操作系统的版本。 创建项目目录#xff1a;在你的电脑上…以下是一个使用 React 进行前端框架开发的入门案例实现一个简单的待办事项列表应用。
一、准备工作 安装 Node.jsReact 需要 Node.js 环境来运行。你可以从 Node.js 官方网站下载并安装适合你操作系统的版本。 创建项目目录在你的电脑上创建一个新的文件夹用于存放 React 项目。 初始化项目打开终端或命令提示符进入项目目录运行以下命令初始化一个新的 Node.js 项目 npm init -y安装 React 和 React DOM在项目目录中运行以下命令安装 React 和 React DOM npm install react react-dom二、创建项目结构 在项目目录中创建以下文件和文件夹 index.htmlHTML 页面文件。src存放 React 组件的文件夹。src/App.js主应用组件文件。 在 index.html 文件中添加以下内容 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title待办事项列表/title
/head
bodydiv idroot/divscript 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 (divh1待办事项列表/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 (divh1待办事项列表/h1inputtypetextvalue{inputValue}onChange{(e) setInputValue(e.target.value)}/button onClick{() {if (inputValue.trim()! ) {setTodos([...todos, inputValue]);setInputValue();}}}添加/buttonul{todos.map((todo, index) (li key{index}{todo}/li))}/ul/div);
}export default App;在这个组件中我们使用 useState 钩子来管理状态。todos 数组存储待办事项列表inputValue 存储输入框的值。当用户在输入框中输入内容并点击“添加”按钮时新的待办事项将被添加到列表中。
五、运行项目
在终端或命令提示符中运行以下命令启动开发服务器
npm start这将启动一个本地开发服务器你可以在浏览器中访问 http://localhost:3000 来查看你的应用。
通过这个简单的案例你已经初步了解了如何使用 React 进行前端框架开发。随着学习的深入你可以进一步探索 React 的更多功能和特性如组件的生命周期、状态管理、路由等。
