腳手架是什么？

是一種工具:快速生成項目的工程化結構，讓項目從搭建到開發，到部署，整個流程變得快速和便捷。

安裝過程:

1.安裝node,安裝完成后驗證版本,出現對應版本就表示成功

node --version
npm --version

2.React腳手架默認是使用yarn 管理,故還需要安裝yarn(建議全局安裝)

npm install -g yarn

3.安裝淘寶鏡像

npm install -g cnpm  --registry=https://registry.npm.taobao.org

4.安裝React腳手架

npm install -g create-react-app

創建項目:

1.通過終端命令 運行:create-react-app react-demo
2.yarn start 可以將項目跑起來

目錄結構分析:

目錄結構分析

注意兩個特殊文件:

manifest.json與serviceWorker.js這兩個文件都是與PWA(Web App)有關,一般可以不用理會，除非你要做離線功能。

驗證腳手架是基于webpack：

在目錄中并看不到相關webpack的相關配置，因為腳手架默認隱藏了配置，若你需要看到相關配置信息，則可以通過package.json中的命令:yarn eject 來進行查看，并且此操作不可逆(執行后目錄結構會改變，無法變回來)

從0體驗創建過程:

• es6導入導出

//情形一
export function sum(a,b){return a+b
}
export function mul(a,b){return a*b
}
//在另外的文件中引用
import{sum,mul} from './xxx'

//情形二
export default function sum(a,b){return a+b
}
//引用
import sum from './xxx'

• 標簽自動補全插件:htmltagwrap

• 正式開始新建工程
  1.創建完后刪除不必要的文件，值保留public文件夾下index.html，src目錄下全刪，然后新建index.js空白文件

  
  
  

  空白工程
  
  

  2.我們知道項目的入口是index.js，現在里面是空白的，運行項目頁面肯定是空白的，接下來在里面添加內容。

import React from 'react';// 渲染jsx<h2>Hello,World</h2>,實際上是react.createElement，所以React也是要導入
import ReactDOM from 'react-dom';//ReactDOM.render需要，所以得導
ReactDOM.render(<h2>Hello,World</h2>,document.getElementById("root"))

此時運行項目發現頁面可以正常展示項目了,但是我們一般會采用組件化方式來開發,需要進行部分修改

• 優化第一步:
  index.js

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{constructor(){super();this.state={counter:10}}render(){return  (<div>      <h2>{this.state.counter}</h2></div>)}
}
ReactDOM.render(<App/>,document.getElementById("root"))

此時重新運行項目，項目正常，只不過由原來的小段jsx變為渲染app組件。

• 優化第二步:
  抽離出app.js

import React from 'react';
export default class App extends React.Component{constructor(){super();this.state={counter:101}}render(){return  (<div>      <h2>{this.state.counter}</h2></div>)}
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app'
ReactDOM.render(<App/>,document.getElementById("root"))

此時模塊化已經初具雛形

• 優化第三步
  app.js

// import React from 'react';
// const {Component} = React;
import React, {Component} from 'react';//這樣更加簡潔,并且import React 這不可省略，因為下面render函數需要用
export default class App extends Component{constructor(){super();this.state={counter:10}}render(){return  (<div>      <h2>{this.state.counter}</h2></div>)}
}

完工!