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

React 前端框架开发入门案例

news 2025/9/14 13:32:44

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

一、准备工作

  1. 安装 Node.js：React 需要 Node.js 环境来运行。你可以从 Node.js 官方网站下载并安装适合你操作系统的版本。

  2. 创建项目目录：在你的电脑上创建一个新的文件夹，用于存放 React 项目。

  3. 初始化项目：打开终端或命令提示符，进入项目目录，运行以下命令初始化一个新的 Node.js 项目：

    npm init -y

  4. 安装 React 和 React DOM：在项目目录中，运行以下命令安装 React 和 React DOM：

    npm install react react-dom

二、创建项目结构

  1. 在项目目录中，创建以下文件和文件夹：

    • index.html：HTML 页面文件。
    • src：存放 React 组件的文件夹。
    • src/App.js：主应用组件文件。

  2. 在 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 组件

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

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

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

  2. 在 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'));

四、添加待办事项功能

  1. 在 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 的更多功能和特性，如组件的生命周期、状态管理、路由等。

相关文章：

React 前端框架开发入门案例

以下是一个使用 React 进行前端框架开发的入门案例&#xff0c;实现一个简单的待办事项列表应用。 一、准备工作 安装 Node.js&#xff1a;React 需要 Node.js 环境来运行。你可以从 Node.js 官方网站下载并安装适合你操作系统的版本。 创建项目目录&#xff1a;在你的电脑上…...

编程日记 2024/10/29 7:06:56

模拟 DDoS 攻击与防御实验

模拟 DDoS 攻击与防御实验可以帮助理解攻击原理和防御策略。在进行这种实验时&#xff0c;必须确保在受控、合法的环境中进行&#xff0c;避免对真实网络造成损害。以下是具体步骤&#xff1a; 环境要求 硬件&#xff1a;至少两台计算机&#xff08;或虚拟机&#xff09;&…...

编程日记 2024/10/29 7:05:53

【electron8】electron实现“图片”的另存为

注&#xff1a;该列出的代码&#xff0c;都在文章内示例出 1. 另存为按钮事件&#xff1a; const saveAsHandler async () > {const { path, sessionId } recordInfoif(typeof message ! string) return;// 因为我的图片是加密的&#xff0c;所以我需要根据接口返回的路…...

编程日记 2024/10/29 7:03:51

Python分析假期对美国出生率的影响

背景 1、数据集下载 birthsHistorical US birth data culled from the CDC website - jakevdp/data-CDCbirthshttps://github.com/jakevdp/data-CDCbirths 2、数据集介绍 此数据来自美国疾病控制和预防中心&#xff0c;并通过 Google 的 BigQuery Web UI 使用以下查询进行编…...

编程日记 2024/10/29 7:01:48

机械臂笛卡尔空间轨迹规划

1. 重新优化末端轨迹规划 调整末端轨迹的插值方法或参数&#xff1a;如果之前使用的是线性插值&#xff0c;可改为三次样条插值。例如&#xff0c;对于一个在二维平面上从点(0, 0)到(10, 10)的末端轨迹&#xff0c;线性插值可能是简单地在每个时间步长均匀增加坐标值&#xff0…...

编程日记 2024/10/29 7:00:48

红队工具---Behinder学习

1.什么是Behinder&#xff1f; Behinder 是一款用于网络渗透测试的安全工具&#xff0c;主要用于对 Web 应用进行攻击和漏洞利用。它提供了强大的功能&#xff0c;是一款红队的大杀器&#xff0c;几乎是现代web安全必须学习的一款webshell管理工具。 主要用途 渗透测试&#…...

编程日记 2024/10/29 6:57:44

k8s 1.28.2 集群部署 NFS server 和 NFS Subdir External Provisioner

文章目录 [toc]前言部署 NFS server镜像准备节点打标签启动 NFS server创建 pv 验证创建 pvc创建 pod 挂载验证 部署 NFS Subdir External Provisioner创建 pod 验证提前创建 pvc 的方式使用 volumeClaimTemplates 的方式 前言 NFS Subdir External Provisioner 可以使用现有的…...

编程日记 2024/10/29 6:50:38

前端零基础入门到上班：【Day1】什么是前端？

本来打算开付费专栏 但是想起那句话 赠人玫瑰手留余香 引言1. 什么是前端&#xff1f;1.1 前端的定义1.2 前端的三大核心技术1.3 前端框架和工具 2. 什么是后端&#xff1f;2.1 后端的定义2.2 后端的组成要素2.3 后端框架和工具 3. 前后端的区别4. 什么是前后端分离&#xff1f…...

编程日记 2024/10/29 6:47:35

搜索二叉树 Binary Search Tree（BST）

【提醒】本章内容需掌握二叉树结构的基本概念和特性&#xff0c;不然可能阅读起来比较费劲。 一、 概念 什么是搜索二叉树&#xff1f;搜索二叉树和普通二叉树的却别是什么&#xff1f; 答&#xff1a; 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树 或者是具有以下性…...

编程日记 2024/10/29 6:46:34

数据库表字段插入bug

瀚高数据库 目录 环境 BUG/漏洞编码 症状 触发条件 解决方案 环境 系统平台&#xff1a;Linux x86-64 Red Hat Enterprise Linux 7 版本&#xff1a;4.5.1 BUG/漏洞编码 3355 症状 数据库安全版v4.5.1&#xff0c;安装包为&#xff1a;hgdb4.5.1-see-centos7-x86-64-20210804.…...

编程日记 2024/10/29 6:44:32

信创环境模拟：X86架构下部署搭建aarch64的ARM虚拟机

在真实系统为x86架构下&#xff0c;搭建arm64的虚拟开发环境。在该环境中直接下载打包项目依赖的python运行环境。 前言 随着国家信创环境的要求普及&#xff0c;基本和国家沾边的政企事业单位都换成了信创环境&#xff0c;即ARM64的cpu服务器&#xff0c;而且该类服务器是不…...

编程日记 2024/10/29 6:43:24

TSO的资料

TSO即TCP Segmentation Offload&#xff0c;相关资料如下&#xff1a; Segmentation Offloads in the Linux Networking StackWhat is TCP Segmentation OffloadUnderstanding TCP Segmentation Offload (TSO) and Large Receive Offload (LRO) in a VMware environment...

编程日记 2024/10/29 6:42:19

OpenCV视觉分析之目标跟踪(3)实现基于金字塔的 Lucas-Kanade 算法来进行稀疏光流计算的类SparsePyrLKOpticalFlow的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 用于计算稀疏光流的类。 该类可以使用带有金字塔的迭代 Lucas-Kanade 方法来计算稀疏特征集的光流 cv::SparsePyrLKOpticalFlow 类是 OpenCV 库…...

编程日记 2024/10/29 6:40:16

乐维网管平台（一）：如何精准掌控 IP 管理

业网络已成为支撑业务运转的关键基础设施&#xff0c;而在企业网络管理中&#xff0c;IP 管理至关重要&#xff0c;它就像是网络秩序的守护者&#xff0c;确保网络的高效运行、安全可靠。 一、为什么企业要进行 IP 管理 1. 优化资源分配 IP 地址作为网络中的重要资源&#xf…...

编程日记 2024/10/29 6:37:13

React-Route新版本(v6或以上)用法示例

新版本的React-Route (v6或以上&#xff0c;但不排序后续版本还会有修改)&#xff0c;移除了Switch&#xff0c;写法和老版本有一些区别&#xff0c;下面分享一个示例&#xff1a; JSX文件: import React, {StrictMode } from react import { createRoot } from react-dom/cli…...

编程日记 2024/10/29 6:35:11

卡方检验方法概述与类型——四格表和R*C表卡方检验案例

卡方检验是以卡方分布为基础&#xff0c;针对定类数据资料的常用假设检验方法。其理论思想是判断实际观测到的频数与有关总体的理论频数是否一致。 卡方统计量是实际频数与理论频数吻合程度的指标。卡方值越小&#xff0c;表明实际观察频数与理论频数越接近&#xff0c;反之卡…...

编程日记 2024/10/29 6:32:07

在浏览器和Node.js环境中使用Puppeteer的Rollup与Webpack打包指南

Puppeteer是一个Node.js库&#xff0c;它提供了一套高级API来通过DevTools协议控制Chrome或Chromium。虽然Puppeteer通常在服务器端使用&#xff0c;但有时你可能需要在浏览器环境中使用它的某些功能。本文将介绍如何使用Rollup和Webpack来打包包含Puppeteer或其轻量级版本Pupp…...

编程日记 2024/10/29 6:30:56

GPT论文整理提示词

论文阅读 指令1:粗读论文 请你阅读并理解这篇文献&#xff0c;然后将该篇文章的标题作为一级标题&#xff0c;将摘要和各个大标题作为二级标题&#xff0c;将小标题作为三级标题&#xff0c;将小标题下每一部分内容作为四级标题&#xff0c;给我以markdown的语言输出中文的翻…...

编程日记 2024/10/29 6:29:51

在培训班学网络安全有用吗

在当今数字化时代&#xff0c;网络安全问题日益凸显&#xff0c;成为了企业和个人关注的焦点。随着对网络安全人才需求的不断增长&#xff0c;各种网络安全培训班也如雨后春笋般涌现。然而&#xff0c;在培训班学网络安全真的有用吗? 一、网络安全的重要性与挑战 1. 信息时代的…...

编程日记 2024/10/29 6:28:50

Flink CDC系列之：理解学习YARN模式

Flink CDC系列之&#xff1a;理解学习YARN模式 准备会话模式在 YARN 上启动 Flink 会话设置 Flink CDC提交 Flink CDC Job Apache Hadoop YARN 是许多数据处理框架中流行的资源提供者。Flink 服务提交给 YARN 的 ResourceManager&#xff0c;后者在由 YARN NodeManagers 管理的…...

编程日记 2024/10/29 6:27:49

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/8/7 7:40:03

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/8/21 20:41:27

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/9/7 21:17:14

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/9/5 5:00:56

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/9/9 1:34:25

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2025/9/4 16:01:41

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/9/7 2:12:04

从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

编程新知 2025/9/2 17:49:27

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言 在HarmonyOS 5的应用开发模型中&#xff0c;featureAbility是旧版FA模型&#xff08;Feature Ability&#xff09;的用法&#xff0c;Stage模型已采用全新的应用架构&#xff0c;推荐使用组件化的上下文获取方式&#xff0c;而非依赖featureAbility。 FA大概是API7之…...

编程新知 2025/9/13 15:39:06