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

1. React特点

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

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

javascript 复制代码
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.jsApp.js

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

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

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

相关推荐
AY呀9 分钟前
# 🌟 JavaScript原型与原型链终极指南:从Function到Object的完整闭环解析 ,深入理解JavaScript原型系统核心
前端·javascript·面试
用户4346621531310 分钟前
无废话之 useState、useRef、useReducer 的使用场景与选择指南
前端
GinoWi10 分钟前
HTML标签 - 表格标签
前端
氤氲息11 分钟前
鸿蒙 ArkTs 的WebView如何与JS交互
javascript·交互·harmonyos
码是生活12 分钟前
老板:能不能别手动复制路由了?我:写个脚本自动扫描
前端·node.js
chushiyunen14 分钟前
未设置X-XSS-Protection响应头安全漏洞
前端·xss
叫我詹躲躲17 分钟前
别再用mixin了!Vue3自定义Hooks让逻辑复用爽到飞起
javascript·vue.js
文心快码BaiduComate17 分钟前
Comate Spec模式实测:让AI编程更精准可靠
前端·后端·前端框架
菥菥爱嘻嘻21 分钟前
组件测试--React Testing Library的学习
前端·学习·react.js
豆苗学前端23 分钟前
HTML + CSS 终极面试全攻略(八股文 + 场景题 + 工程落地)
前端·javascript·面试