目录
脚手架create-react-app
官方工具: create-react-app
创建方式1
1.先全局安装脚手架工具包
命令:
npm i -g create-react-app
2.用脚手架工具来创建项目
命令:
create-react-app 项目名称
创建方式2
直接使用npx来创建项目
命令:
npx create-react-app 项目名称
解释:
-
npx create-react-app 是固定命令,
create-react-app
是 React 脚手架的名称 -
your-project-name 表示项目名称,可以修改
npx
是 npm v5.2 版本新添加的命令,用来简化 npm 中工具包的使用没有npx之前:
全局安装npm i -g create-react-app
在通过脚手架的命令来创建 React 项目
有了npx之后
npx 调用最新的 create-react-app 直接创建 React 项目
了解项目的工作方式
启动项目
npm start
目录src
说明:
-
src
目录是我们写代码进行项目开发的目录 -
index.js是入口文件
-
查看
package.json
两个核心库:react
、react-dom
(脚手架已经帮我们安装好,我们直接用即可)
import React from 'react'; // rect 提供最核心的react组件功能
import ReactDOM from 'react-dom'; // 配合react把react元素渲染到dom
工作原理
webpack会实时自动打包,并把代码嵌入到public/index.html
文件中,并执行。
了解react程序的基本步骤
步骤
-
导入包: React, ReactDOM
-
创建 react元素
-
渲染元素到某个dom上
理解react-dom
rect包 提供必要功能来定义react组件。
react-dom包用来将react组件渲染到dom中。
react-native包 用来将react组件渲染到IOS和Android程序中。
package.json
React.createElement的格式:
React.createElement('标签名',{标签上的属性1:值1},子元素1,子元素2)