前端之源二: React脚手架-从零开始创建项目====

目录

脚手架create-react-app

创建方式1

创建方式2

了解项目的工作方式

启动项目

目录src

工作原理

了解react程序的基本步骤

步骤

理解react-dom

 React.createElement的格式:

---

脚手架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 表示项目名称，可以修改

1. npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用

2. 没有npx之前：

   1. 全局安装npm i -g create-react-app

   2. 在通过脚手架的命令来创建 React 项目

3. 有了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程序的基本步骤

步骤

1. 导入包： React， ReactDOM

2. 创建 react元素

3. 渲染元素到某个dom上

理解react-dom

rect包 提供必要功能来定义react组件。

react-dom包用来将react组件渲染到dom中。

react-native包 用来将react组件渲染到IOS和Android程序中。

package.json

 React.createElement的格式:

React.createElement('标签名',{标签上的属性1：值1},子元素1，子元素2)

大厂的ui库

1. DIDI

   1. vue移动端 Cube UI

2. JD

   1. vue移动端: NUTUI

3. 饿了么

   1. vuePC端 elementUI

4. 蚂蚁

   1. react PC端antdesign

   2. vue PC端 vue

5. 字节

   1. react PC端 arco

   2. vue3 PC端arco