1. react腳手架
- xxx腳手架:用來(lái)幫助程序員快速創(chuàng)建一個(gè)基于xxx庫(kù)的模塊項(xiàng)目
包含了所有需要的配置
指定好了所有的依賴(lài)
可以直接安裝/編譯/運(yùn)行一個(gè)簡(jiǎn)單的效果
- react提供了一個(gè)用于創(chuàng)建react項(xiàng)目的腳手架庫(kù):
create-react-app - 項(xiàng)目的整體技術(shù)架構(gòu)為:
react+webpack+es6+eslint - 使用腳手架開(kāi)發(fā)項(xiàng)目的特點(diǎn):模塊化,組件化,工程化
2.創(chuàng)建項(xiàng)目并啟動(dòng)
npm install -g create-react-app
create-react-app hello-react
cd hello-react
npm start
3.react腳手架項(xiàng)目結(jié)構(gòu)
ReactNews
|--node_modules---第三方依賴(lài)模塊文件夾
|--public
|-- index.html-----------------主頁(yè)面
|--scripts
|-- build.js-------------------build 打包引用配置
|-- start.js-------------------start 運(yùn)行引用配置
|--src------------源碼文件夾
|--components-----------------react 組件
|--index.js-------------------應(yīng)用入口 js
|--.gitignore------git 版本管制忽略的配置
|--package.json----應(yīng)用包配置文件
|--README.md-------應(yīng)用描述說(shuō)明的 readme 文件
4.使用腳手架開(kāi)發(fā)的項(xiàng)目的特點(diǎn)
模塊化: js是一個(gè)一個(gè)模塊編寫(xiě)的
組件化: 界面是由多個(gè)組件組合編寫(xiě)實(shí)現(xiàn)的
工程化: 實(shí)現(xiàn)了自動(dòng)構(gòu)建/運(yùn)行/打包的項(xiàng)目