1. react脚手架
- xxx脚手架:用来帮助程序员快速创建一个基于xxx库的模块项目
包含了所有需要的配置
指定好了所有的依赖
可以直接安装/编译/运行一个简单的效果
- react提供了一个用于创建react项目的脚手架库:
create-react-app
- 项目的整体技术架构为:
react+webpack+es6+eslint
- 使用脚手架开发项目的特点:模块化,组件化,工程化
2.创建项目并启动
npm install -g create-react-app
create-react-app hello-react
cd hello-react
npm start
3.react脚手架项目结构
ReactNews
|--node_modules---第三方依赖模块文件夹
|--public
|-- index.html-----------------主页面
|--scripts
|-- build.js-------------------build 打包引用配置
|-- start.js-------------------start 运行引用配置
|--src------------源码文件夹
|--components-----------------react 组件
|--index.js-------------------应用入口 js
|--.gitignore------git 版本管制忽略的配置
|--package.json----应用包配置文件
|--README.md-------应用描述说明的 readme 文件
4.使用脚手架开发的项目的特点
模块化: js是一个一个模块编写的
组件化: 界面是由多个组件组合编写实现的
工程化: 实现了自动构建/运行/打包的项目