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 自己定义的项目名称
      React脚手架初始化项目_命令行工具
      React脚手架初始化项目_命令行工具_02

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

如图所示，项目启动成功
React脚手架初始化项目_创建项目_03
如图所示，所创建项目的，项目目录：
React脚手架初始化项目_初始化_04

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'))