React-01React创建第一个项目(npm install -g create-react-app)

news2025/5/10 16:51:16

1. React特点

  • JSX是javaScript语法的扩展,React开发不一定使用JSX。
  • 单向响应的数据流,React实现单向数据流,减少重复代码,比传统数据绑定更简单。等等     

JSX是js的语法扩展,允许在js中编写类似HTML的代码

const element = <h1>Hello, JSX!</h1>;

2. 使用Create React APP创建项目 

 2.1 确保是否安装node.js与npm(node包管理)

node -v

npm -v

2.2 全局安装React官方支持的脚手架工具

npm install -g create-react-app

 2.3对应目录文件下创建React项目my-app

 npx create-react-app my-app

 npx是npm 5.2+版本自带的一个工具 用于运行本地或者远程的npm包

创建项目成功如下

对应创建项目成功后的执行命令如下

2.4 react对应的文件目录结构 

 

  • React 项目由多个文件和文件夹组成,核心文件包括 index.htmlindex.js 和 App.js

  • React 组件是应用的基本构建块,可以是函数组件或类组件。

  • JSX 是 React 的核心语法,用于描述 UI。

  • Props 和 State 是 React 组件中管理数据的主要方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2327742.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++学习笔记之内存管理

仅用于记录学习理解 选择题答案及解析 globalVar&#xff1a;C&#xff08;数据段 (静态区)&#xff09; 解析&#xff1a;全局变量存放在数据段&#xff08;静态区&#xff09;&#xff0c;生命周期从程序开始到结束&#xff0c;程序运行期间一直存在。 staticGlobalVar&…

【MyBatis】深入解析 MyBatis XML 开发:增删改查操作和方法命名规范、@Param 重命名参数、XML 返回自增主键方法

增删改查操作 接下来&#xff0c;我们来实现一下用户的增加、删除和修改的操作。 增( Insert ) UserInfoMapper接口&#xff1a; 我们写好UserInfoMapper接口后&#xff0c;自动生成 XML 代码&#xff1b; UserInfoMapper.xml实现&#xff1a; 增删改查方法命名规范 如果我们…

使用Python构建Kafka示例项目

新建项目 mkdir python-kafka-test cd python-kafka-test 安装依赖 pip install confluent_kafka 创建配置文件 # Kafka配置文件# Kafka服务器配置 KAFKA_CONFIG {bootstrap.servers: localhost:9092,# 生产者特定配置producer: {client.id: python-kafka-producer,acks:…

本地化部署DeepSeek-R1蒸馏大模型:基于飞桨PaddleNLP 3.0的实战指南

目录 一、飞桨框架3.0&#xff1a;大模型推理新范式的开启1.1 自动并行机制革新&#xff1a;解放多卡推理1.2 推理-训练统一设计&#xff1a;一套代码全流程复用 二、本地部署DeepSeek-R1-Distill-Llama-8B的实战流程2.1 机器环境说明2.2 模型与推理脚本准备2.3 启动 Docker 容…

VBA 64位API声明语句第008讲

跟我学VBA&#xff0c;我这里专注VBA, 授人以渔。我98年开始&#xff0c;从源码接触VBA已经20余年了&#xff0c;随着年龄的增长&#xff0c;越来越觉得有必要把这项技能传递给需要这项技术的职场人员。希望职场和数据打交道的朋友&#xff0c;都来学习VBA,利用VBA,起码可以提高…

Linux信号——信号的保存(2)

关于core和term两种终止方式 core是什么&#xff1f; 将进程在内存中的核心数据&#xff08;与调试有关&#xff09;转存到磁盘中形成core,core.pid的文件。 core dump&#xff1a;核心转储。 core与term的区别&#xff1a; term只是普通的终止&#xff0c;而core终止方式还要…

【蓝桥杯嵌入式——学习笔记一】2016年第七届省赛真题重难点解析记录,闭坑指南(文末附完整代码)

在读题过程中发现本次使用的是串口2&#xff0c;需要配置串口2。 但在查看产品手册时发现PA14同时也是SWCLK。 所以在使用串口2时需要拔下跳线帽去连接CH340。 可能是用到串口2的缘故&#xff0c;在烧录时发现报了一个错误。这时我们要想烧录得按着复位键去点击烧录&#xff0c…

基础常问 (概念、代码)

读源码 代码题 Void方法 &#xff0c;也可以提前rerun;结束 RandomAccessFile类&#xff08;随机访问文件&#xff09; 在 Java 中&#xff0c;可以使用RandomAccessFile类来实现文件指针操作。RandomAccessFile提供了对文件内容的随机访问功能&#xff0c;它的文件指针可以通…

J1 ResNet-50算法实战与解析

&#x1f368; 本文為&#x1f517;365天深度學習訓練營 中的學習紀錄博客&#x1f356; 原作者&#xff1a;K同学啊 | 接輔導、項目定制 一、理论知识储备 1. 残差网络的由来 ResNet主要解决了CNN在深度加深时的退化问题&#xff08;梯度消失与梯度爆炸&#xff09;。 虽然B…

[MySQL初阶]MySQL(8)索引机制:下

标题&#xff1a;[MySQL初阶]MySQL&#xff08;8&#xff09;索引机制&#xff1a;下 水墨不写bug 文章目录 四、从问题到底层&#xff0c;从现象到本质1.为什么插入的数据默认排好序2.MySQL的Page&#xff08;1&#xff09;为什么选择用Page&#xff1f;&#xff08;2&#x…

Muduo网络库实现 [九] - EventLoopThread模块

目录 设计思路 类的设计 模块的实现 私有接口 公有接口 设计思路 我们说过一个EventLoop要绑定一个线程&#xff0c;未来该EventLoop所管理的所有的连接的操作都需要在这个EventLoop绑定的线程中进行&#xff0c;所以我们该如何实现将EventLoop和线程绑定呢&#xff1f;…

《K230 从熟悉到...》识别机器码(AprilTag)

《K230 从熟悉到...》识别机器码&#xff08;aprirltag&#xff09; tag id 《庐山派 K230 从熟悉到...》 识别机器码&#xff08;AprilTag&#xff09; AprilTag是一种基于二维码的视觉标记系统&#xff0c;最早是由麻省理工学院&#xff08;MIT&#xff09;在2008年开发的。A…

栈和队列的概念

1.栈的概念 只允许在固定的一端进行插入和删除&#xff0c;进行数据的插入和数据的删除操作的一端数栈顶&#xff0c;另一端称为栈底。 栈中数据元素遵循后进先出LIFO (Last In First Out) 压栈&#xff1a;栈的插入。 出栈&#xff1a;栈的删除。出入数据在栈顶。 那么下面…

红日靶场一实操笔记

一&#xff0c;网络拓扑图 二&#xff0c;信息搜集 1.kali机地址&#xff1a;192.168.50.129 2.探测靶机 注&#xff1a;需要win7开启c盘里面的phpstudy的服务。 nmap -sV -Pn 192.168.50.128 或者扫 nmap -PO 192.168.50.0/24 可以看出来win7(ip为192.168.50.128)的靶机开…

【目标检测】【深度学习】【Pytorch版本】YOLOV2模型算法详解

【目标检测】【深度学习】【Pytorch版本】YOLOV2模型算法详解 文章目录 【目标检测】【深度学习】【Pytorch版本】YOLOV2模型算法详解前言YOLOV2的模型结构YOLOV2模型的基本执行流程YOLOV2模型的网络参数YOLOV2模型的训练方式 YOLOV2的核心思想前向传播阶段反向传播阶段 总结 前…

NineData云原生智能数据管理平台新功能发布|2025年3月版

本月发布 15 项更新&#xff0c;其中重点发布 3 项、功能优化 11 项、性能优化 1 项。 重点发布 基础服务 - MFA 多因子认证 新增 MFA 多因子认证&#xff0c;提升账号安全性。系统管理员开启后&#xff0c;所有组织成员需绑定认证器&#xff0c;登录时需输入动态验证码。 数…

GLSL(OpenGL 着色器语言)基础语法

GLSL&#xff08;OpenGL 着色器语言&#xff09;基础语法 GLSL&#xff08;OpenGL Shading Language&#xff09;是 OpenGL 计算着色器的语言&#xff0c;语法类似于 C 语言&#xff0c;但提供了针对 GPU 的特殊功能&#xff0c;如向量运算和矩阵运算。 着色器的开头总是要声明…

Redis基础知识-3

RedisTemplate对多种数据结构的操作 1. String类型 示例代码&#xff1a; // 保存数据 redisTemplate.opsForValue().set("user:1001", "John Doe"); // 设置键值对&#xff0c;无过期时间 redisTemplate.opsForValue().set("user:1002", &qu…

unity各个面板说明

游戏开发&#xff0c;unity各个面板说明 提示&#xff1a;帮帮志会陆续更新非常多的IT技术知识&#xff0c;希望分享的内容对您有用。本章分享的是Python基础语法。前后每一小节的内容是存在的有&#xff1a;学习and理解的关联性&#xff0c;希望对您有用~ unity简介-unity基础…

游戏引擎学习第199天

回顾并发现我们可能破坏了某些东西 目前&#xff0c;我们的调试 UI 运行得相对顺利&#xff0c;可以创建可修改的调试变量&#xff0c;也可以插入分析器&#xff08;profiler&#xff09;等特殊视图组件&#xff0c;并进行一些交互操作。然而&#xff0c;在上一次结束时&#…