react脚手架的应用

1.react脚手架的意义

1.脚手架是开发现代web应用的必备。

2.充分利用webpack,babel,eslint等工具辅助项目开发。

3.零配置，无需手动配置繁琐的工具即可使用。

4.关注业务，而不是工具配置

2.使用react初始化项目

1.初始化项目，命令 npx create-react-app my-app

2.启动项目，在项目根目录执行命令：npm start

3.npx命令介绍

• npm v5.2.0 引入的一条命令
• 目的：提升包内提供的命令行工具的使用体验
• 原先：先安装脚手架包，在使用这个包中提供的命令
• 现在：无需安装脚手架包，就可以直接使用这个包提供的命令

4.在脚手架中使用react

1.导入react和react-dom两个包

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

2.调用React.createElement()方法创建react元素。

调用ReactDOM.render()方法渲染react元素到页面中。

index.js

index.htm

浏览器