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 组件中管理数据的主要方式。

相关推荐
Billy Qin4 分钟前
Rollup详解
前端·javascript·rollup
夜寒花碎17 分钟前
前端自动化测试一jest基础使用
前端·单元测试·jest
小徐_233320 分钟前
uni-app工程实战:基于vue-i18n和i18n-ally的国际化方案
前端·微信小程序·uni-app
前端小菜鸟一枚s24 分钟前
`ConstantPositionProperty` 的使用与应用
前端·javascript·cesium
JohnsonXin24 分钟前
怎么使用vue3实现一个优雅的不定高虚拟列表
前端·javascript·css·html5
东望25 分钟前
写代码不规范,同事两行泪 😭(工程化如何让团队协作更高效)
javascript·前端工程化
用户8377014088125 分钟前
前端实现个人信息脱敏(手机号、身份证号、姓名、邮箱)JavaScript代码示例
javascript
17Knight26 分钟前
我的个性化 VSCode
前端
前端小菜鸟一枚s30 分钟前
`ConstantProperty` 的使用与应用
前端·javascript·cesium
狠狠的学习36 分钟前
antd表格行hover效果性能处理
前端·css