react脚手架

React脚手架意义

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

使用React脚手架初始化项目

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

初始化项目，命令：

npx create-react-app my-project    

当你看到Happy hacking!说明项目已经初始化成功

进入到你创建的文件并启动项目

cd my-project

yarn start 或者 npm start

在index.js（删除里面所有的代码）

// 导入react
import React from 'react'
import ReactDOM from 'react-dom'
// 2、创建react元素
const title = React.createElement('h1', null, 'hello react')
// 3、渲染react元素
ReactDOM.render(title, document.getElementById('root'))

index.html

 <div id="root"></div>

浏览器