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

React 前端框架开发入门案例

news 文章来源：https://blog.csdn.net/qq_36607974/article/details/143186733 2025/1/18 16:00:42

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

langgraph入门

使用langgraph框架搭建一个简易agent。 最近想学习一下agent相关知识&#xff0c;langgraph似乎挺好的&#xff0c;于是就来试一试。langgraph。看了官网&#xff0c;起核心思想是将agent中的角色和工具都当作是图的Node&#xff0c;整个agent流程通过增加Node之间的边来设定。…...

编程日记 2024/10/29 6:26:48

【Python】爬虫程序打包成exe

上一篇写了爬虫获取汽车之家配置表&#xff0c;师父要更方便使用甚至推广&#xff08;&#xff1f;&#xff09;&#xff0c;反正就是他们没有环境也能用嘛&#xff0c;我就直接打包了&#xff0c;界面不会做也懒得学了、、 1、下载pyinstaller&#xff08;清华镜像&#xff09…...

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

【力扣专题栏】两两交换链表中的节点，如何实现链表中两两相邻节点的交换？

这里写目录标题 1、题目描述解释2、算法原理解析3、代码编写 1、题目描述解释 2、算法原理解析 3、代码编写 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int…...

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

埋点采集的日志数据常见的格式简介

埋点采集的日志数据通常以结构化或半结构化的格式进行记录&#xff0c;以便于分析和处理。常见的格式包括&#xff1a; 1. JSON&#xff08;JavaScript Object Notation&#xff09; 特点&#xff1a;JSON 格式是一种轻量级的数据交换格式&#xff0c;具有良好的可读性和兼容…...

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

基于SSM高考志愿辅助填报系统设计与实现

前言 近年来&#xff0c;由于计算机技术和互联网技术的飞速发展&#xff0c;所以各企事业单位内部的发展趋势是数字化、信息化、无纸化&#xff0c;随着这一趋势&#xff0c;而各种决策系统、辅助系统也就应运而生了&#xff0c;其中&#xff0c;信息管理系统是其中重要的组成…...

编程日记 2024/10/29 6:20:36

elasticsearch 8.x 插件安装（六）之Hanlp插件

elasticsearch 8.x 插件安装&#xff08;六&#xff09;之Hanlp插件 elasticsearch插件安装合集 elasticsearch插件安装&#xff08;一&#xff09;之ik分词器安装&#xff08;含MySQL更新&#xff09; elasticsearch 8.x插件&#xff08;二&#xff09;之同义词安装如何解决…...

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

排序算法简记

列举几种基本的排序算法和排序思想 排序就是将一组对象按照某种逻辑顺序重新排列的过程。 一、选择排序 1、基本原理 最基本的排序&#xff0c;每次都从原有数据中选择最小或最大的数组放入新数据集中 2、步骤(以从小到大为例) 首先&#xff0c; 找到数组中最小的那个元素…...

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

Stable diffusion inference 多卡并行

stable diffusion 推理过程 多卡并行 注意事项 以SDXL为例&#xff0c;指定GPU&#xff0c;添加device_map参数信息 device_map {add_embedding: 1,decoder: 1,encoder: 1,conv_in: 1,conv_out: 1,post_quant_conv: 1,text_model: 6,conv_norm_out: 1,quant_conv: 1,time_em…...

编程日记 2024/10/29 6:14:17

Docker：namespace环境隔离 CGroup资源控制

Docker&#xff1a;namespace环境隔离 & CGroup资源控制 Docker虚拟机容器 namespace相关命令ddmkfsdfmountunshare 进程隔离文件隔离 CGroup相关命令pidstatstresscgroup控制 内存控制CPU控制 Docker 在开发中&#xff0c;经常会遇到环境问题&#xff0c;比如程序依赖某个…...

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

鼠标增强工具 MousePlus v5.3.9.0 中文绿色版

MousePlus 是一款功能强大的鼠标增强工具&#xff0c;它可以帮助用户提高鼠标操作效率和精准度。该软件可以自定义鼠标的各种功能和行为&#xff0c;让用户根据自己的习惯和需求来调整鼠标的表现。 详细功能 自定义鼠标按钮功能&#xff1a;可以为鼠标的各个按钮设置不同的功能…...

编程日记 2024/10/29 6:12:15

广州做网站seo/seo sem是指什么意思

Solr 是一种可供企业使用的、基于 Lucene 的搜索服务器&#xff0c;它支持层面搜索、命中醒目显示和多种输出格式。在这篇文章中&#xff0c;将介绍 Solr 并展示如何轻松地将其表现优异的全文本搜索功能加入到 Web 应用程序中。 开发环境&#xff1a; System&#xff1a;Window…...

编程日记 2025/1/18 14:10:00

网络营销 网站/网站推广怎么推广

/* 用途&#xff1a;校验ip地址的格式 输入&#xff1a;strIP&#xff1a;ip地址 返回&#xff1a;如果通过验证返回true,否则返回false&#xff1b; */ function isIP(strIP) { if (isNull(strIP)) return false; var re /^(\d)\.(\d)\.(\d)\.(\d)$/g //匹配IP地址的正则…...

编程日记 2025/1/18 12:54:45

珠海网站建设/大连企业网站建站模板

书接上回&#xff0c;今天这篇文章&#xff0c;跟大家分享下2020年新域名防封的技术是如何解决传统防封解决不了的问题的。 现在有很多的服务商挂着2020年最新防封系统&#xff0c;功能多的让你眼花缭乱&#xff0c;有不同的VIP级别供你选择&#xff0c;满篇全是各种各样的功能…...

编程日记 2025/1/18 12:34:33

长治专业做网站/百度电脑版下载官方

都是自己写的&#xff0c;自己测试过了&#xff0c;难免和学习知道上有些不同&#xff0c;敬请谅解&#xff0c;但是程序绝对原创&#xff0c;第三章比较简单。3.1//if the rate of GDPs growth in our country is 9%,//please write a program and output how much the GDP gr…...

编程日记 2025/1/18 10:57:14

成都高新网站建设/免费无代码开发平台

# -*- coding:utf-8 -*-题目描述 操作给定的二叉树&#xff0c;输出二叉树的三种遍历结果前序遍历&#xff1a;根左右 8 6 5 7 10 9 11 第一位是根节点 中序遍历&#xff1a;左根右 5 6 7 8 9 10 11 中间一位是根节点 后续遍历&#xff1a;左右根 5 7 6 9 10 1…...

编程日记 2025/1/18 10:55:12

佛山营销网站建设公司/交换链接的例子

不少使用Windows XP的用户&#xff0c;在IE8浏览器中打开网页&#xff0c;发现特别卡&#xff0c;关闭了浏览器&#xff0c;还是很卡&#xff0c;其实&#xff0c;这是IE8的一个新“特性”&#xff0c;IE8设计了一个备份iexplore.exe的进程&#xff0c;浏览的选项卡崩溃不会导致…...

编程日记 2025/1/18 7:49:23