1. React脚手架的意义
- 脚手架是开发现代Web应用的必备
- 充分利用Webpack、Babel、Eslint等工具辅助项目开发
- 零配置,无需手动配置繁琐的工具即可使用
- 关注业务,而不是工具配置
2. 使用脚手架初始化项目
2.1 初始化项目,命令:
npx 命令介绍
- npm v5.2.0 引入的一条命令。
- 目的:提升包内提供的命令行工具的使用体验。
- 原来:先安装脚手架包,在使用这个包中提供的命令。 create-react-app 是脚手架的名字。
npx create-react-app my-app
2.2 运行 命令:
npm start
2.3 找到index.js文件
还是上一篇文章的三步:
- 引入文件 只不过不再是script标签引用,使用ES6中模块化语法
- 创建元素
- 渲染元素
// ES6 中模块化语法
// 1. 引入文件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 2. 创建元素
const title = React.createElement('h1',null,"Hello React")
// 3 渲染元素
ReactDOM.render(title,document.getElementById('root'))
3.说明
ReactDOM 只适用于web开发 如果是手机端 react-native