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

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.mzph.cn/web/74866.shtml

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

相关文章

小程序中的网络请求

在小程序中&#xff0c;使用 wx.request( ) 这个方法来发送网路请求&#xff0c;整个请求的方式和 jQuery 里面的 $.ajax 方法是非常相似的。 在 wx.request( ) 这个方法中&#xff0c;接收一个配置对象&#xff0c;该配置对象中能够配置的项目如下表&#xff1a; 关于服务器…

jvm 的attach 和agent机制

Java 的 Attach 和 Agent 机制在实际应用中得到了广泛的成功应用&#xff0c;尤其是在监控、调试、性能分析、故障排查等方面。以下是这两种机制在实际场景中的一些成功应用案例&#xff1a; 1. 性能监控与分析 Java Agent 和 Attach 机制广泛应用于性能监控和分析&#xff0…

基于SpringBoot的“留守儿童网站”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“留守儿童网站”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统整体功能图 局部E-R图 系统首页界面 系统注册…

iPhone XR:一代神机,止步于此

什么样的 iPhone &#xff0c;才配称为一代神机&#xff1f; 我曾经用过iPhone 4S、iPhone 6S Plus、iPhone 8 Plus&#xff0c;iPhone SE2、iPhone XR、iPhone 13、iPhone 14 Plus、iPhone 15/Pro。 不管硬件再怎么卷&#xff0c;不管囊中是否羞涩&#xff0c;主力机基本没考…

【VUE】RuoYi-Vue3项目结构的分析

【VUE】RuoYi-Vue3项目结构的分析 1. 项目地址2. RuoYi-Vue3项目结构2.1 整体结构2.2 package.json2.2.1 &#x1f9fe; 基本信息2.2.2 &#x1f527; 脚本命令&#xff08;scripts&#xff09;2.2.3 &#x1f30d; 仓库信息2.2.4 &#x1f4e6; 项目依赖&#xff08;dependenc…

架构师面试(二十五):分布式存储 Leader 设计

问题 在非常多的分布式存储系统中&#xff0c;如&#xff1a;Zookeeper、Etcd、Kafka等&#xff0c;往往会存在一个 【Leader】 角色&#xff0c;并由该角色负责数据的写入&#xff0c;这样设计最主要的原因是什么呢&#xff1f; A. 唯一负责数据写入的 Leader 角色可以避免并…

使用YoloV5和Mediapipe实现——上课玩手机检测(附完整源码)

目录 效果展示 应用场景举例 1. 课堂或考试监控&#xff08;看到这个学生党还会爱我吗&#xff09; 2. 驾驶安全监控&#xff08;防止开车玩手机&#xff09; 3. 企业办公管理&#xff08;防止工作时间玩手机&#xff09; 4. 监狱、戒毒所、特殊场所安保 5. 家长监管&am…

GPT-4o从语义分割到深度图生成,大模型狂潮下的计算机视觉:技术进步≠替代危机

随着上周&#xff0c;GPT-4o原生多模态图像生成功能的推出&#xff0c;更多玩法也被开发出来。一夜之间&#xff0c;GPT-4o原生多模态能力的释放&#xff0c;让图像生成、语义分割、深度图构建这些曾需要专业工具链支持的复杂任务&#xff0c;变成了普通人输入一句话就能实现的…

Pytorch 张量操作

在深度学习中&#xff0c;数据的表示和处理是至关重要的。PyTorch 作为一个强大的深度学习框架&#xff0c;其核心数据结构是张量&#xff08;Tensor&#xff09;。张量是一个多维数组&#xff0c;类似于 NumPy 的数组&#xff0c;但具有更强大的功能&#xff0c;尤其是在 GPU …

小程序中跨页面组件共享数据的实现方法与对比

小程序中跨页面/组件共享数据的实现方法与对比 在小程序开发中&#xff0c;实现不同页面或组件之间的数据共享是常见需求。以下是几种主要实现方式的详细总结与对比分析&#xff1a; 一、常用数据共享方法 全局变量&#xff08;getApp()&#xff09;、本地缓存&#xff08;w…

vue中的 拖拽

拖拽总结 实现方式特点适用场景HTML5 原生拖拽 API✅ 直接使用 dataTransfer 进行数据传输 ✅ 兼容性好&#xff08;大部分浏览器支持&#xff09; ✅ 适合简单的拖拽场景低代码平台、表单生成器、组件拖拽Vue/React 组件库&#xff08;如 Vue Draggable、SortableJS&#xff…

MySQL 函数(入门版)

目录 一、字符串函数 1、常用的字符串函数 2、函数演示 3、具体案例 二、数值函数 1、常用的数值函数 2、函数演示 3、具体案例 三、日期函数 1、常用的日期函数 2、函数演示 3、具体案例 四、流程函数 1、常用的流程函数 2、函数演示 3、具体案例 在MySQL中&a…

基于快速开发平台与智能手表的区域心电监测与AI预警系统(源码+论文+部署讲解等)

需要源代码&#xff0c;演示视频&#xff0c;ppt设计原稿资料&#xff0c;请文末卡片联系 !](https://i-blog.csdnimg.cn/direct/242d53cd069940b5b7a6db2bb031d406.png#pic_center)

【神经网络】python实现神经网络(三)——正向学习的模拟演练

有了之前的经验(【神经网络】python实现神经网络(二)——正向推理的模拟演练),我们继续来介绍如何正向训练神经网络中的超参(包含权重以及偏置),本章大致的流程图如下: 一.损失函数 神经网络以某个指标为基准寻求最优权重参数,而这个指标即可称之为 “损失函数” 。(…

分区格式变RAW故障深度解析与数据恢复实战指南‌

分区格式变RAW的本质‌ 当存储设备&#xff08;如硬盘、U盘或移动硬盘&#xff09;的分区突然显示为RAW格式时&#xff0c;意味着操作系统无法识别其原有的文件系统结构&#xff08;如NTFS、FAT32等&#xff09;。此时&#xff0c;用户访问该分区会提示“需要格式化”或直接显示…

【QT】Qt5 QtWebEngine使用教程

目录 1、QtWebEngine相比于QtWebKit的优势2、项目配置2.1 确认 Qt 版本2.2 在.pro 文件中添加依赖3、显示网页4、实现Qt和网页JavaScript之间的交互4.1 Qt执行网页的JavaScript代码4.2 JavaScript调用Qt对象的函数QtWebEngine 是 Qt 框架中用于在应用程序中嵌入 Web 内容的模块…

网络安全-等级保护(等保) 1-0 等级保护制度公安部前期发文总结

################################################################################ 等级保护从1994年开始已经有相关文件下发&#xff0c;进行建设&#xff0c;后续今年多年制度完善&#xff0c;现在已进入等保2.0时代&#xff0c;相关政策已运行多年。 前期等保相关发文&…

视图函数的应用

1.实现将当前日期和时间编码为HTML文档并返回的简单视图函数 文章目录 1.实现将当前日期和时间编码为HTML文档并返回的简单视图函数1.1打开visualcode 按图示点击 创建新的终端1.2然后定义ViewDjango项目根目录下的路由文件urls.py&#xff0c;实现到SimpleView应用的路由路径1…

解锁 C 语言安全新姿势:C11 安全函数全解析

一、开篇:C 语言安全的新护盾 在 C 语言的编程世界里,缓冲区溢出等安全问题犹如潜藏的暗礁,时刻威胁着程序的稳定与安全。为了有效应对这些挑战,C11 标准引入了一系列安全函数,也被称为 “Annex K” 标准库函数。这些函数为字符串和内存操作函数注入了新的活力,通过增加…

BGP路由协议之属性2

Orgin 起源 公认必遵属性 起源名称标记描述IGPi如果路由是由始发的 BGP 路由器使用 network 命令注入到 BGP 的&#xff0c;那么该 BGP 路由的 origin 属性为 IGPEGPe如果路由是通过 EGP 学习到的&#xff0c;那么该 BGP 路由的 Origin 属性为 EGPIncomplete?如果路由是通过…