React脚手架初始化项目

1、react脚手架意义

• 脚手架是开发现代Web应用的必备
• 充分利用 Webpack，Babel，ESLint等工具辅助项目开发。
• 零配置，无需手动配置繁琐的工具即可使用
• 关注业务，而不是工具配置

2、使用react脚手架初始化项目

• 初始化项目，命令： npx create-react-app my-project

  1. npx 目的：提升包内提供的命令行工具的使用体验
  2. 原来：先安装脚手架包，再使用这个包中提供的命令
  3. 现在：无需安装脚手架包，就可以直接使用这个包提供的命令
  4. create-react-app 这个是脚手架名称 不能随意更改
  5. my-project 自己定义的项目名称
     
     

• 启动项目，在项目根目录执行命令(必须进入到创建项目的文件夹下执行该命令)： npm start

如图所示，项目启动成功

如图所示，所创建项目的，项目目录：

3、脚手架中使用React

• 导入react和react-dom两个包

import React from 'react'
import ReactDOM from 'react-dom'

• 创建元素

let h1 = React.createElement('h1',null,'我是标题')

• 渲染到页面

ReactDOM.render(h1,document.getElementById('root'))