React脚手架-从零开始创建项目

1.脚手架create-react-app创建react项目:

创建方式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 脚手架的名称

npx:

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

2. 没有npx之前：

   0. 全局安装npm i -g create-react-app
   1. 在通过脚手架的命令来创建 React 项目

3. 有了npx之后

   npx 调用最新的 create-react-app 直接创建 React 项目

2.React脚手架项目工作方式

1.项目目录信息:

说明：

• src 目录是我们写代码进行项目开发的目录
• index.js是入口文件
• 查看 package.json 两个核心库：react、react-dom（脚手架已经帮我们安装好，我们直接用即可）

2.react项目基本使用步骤

1.删除src下原有的文件,创建自己的入口文件src/index.js

2.导入React， ReactDOM包

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

3.创建元素

react基本的创建元素方式:

React.createElement('要创建的标签名', {id或类名}, '标签内容')

注意点: {id或类名}这里如果没有id或类名,可以写为{}或null,但是不能省略

jsx高阶的创建元素方式请参考React项目JSX介绍和基本使用

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// 创建元素

创建标签h1元素,id为box(如果没有可以写{}或null),内容为'hello react'
const title = React.createElement('h1', {id:'box'}, 'hello react')

4.渲染react元素

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// 创建元素
const title = React.createElement('h1', {id:'box'}, 'hello react')

// 渲染react元素(固定写法,将创建的元素渲染到项目中public文件夹下的index.html文件id为'root'的div中)
ReactDOM.render(title, document.getElementById('root'))

5.启动项目:

运行: npm start 效果如下: