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

React 前端框架开发入门案例

news 2026/2/10 17:11:54

以下是一个使用 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

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/29 17:56:19

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2026/1/29 17:06:33

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2026/2/9 2:15:44

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/2/1 6:50:07

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/8 5:28:24

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2026/2/9 3:25:41