2、【重點】環境安裝：經過淘寶 cnpm 快速安裝使用 React，生成項目，運行項目、安裝項目

1.cnpm代替npm

若是你的系統還不支持 Node.js 及 NPM 能夠參考咱們的 Node.js 教程。

咱們建議在 React 中使用 CommonJS 模塊系統，好比 browserify 或 webpack，本教程使用 webpack。

國內使用 npm 速度很慢，你能夠使用淘寶定製的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:

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

 用 cnpm 命令來安裝模塊語法：

$ cnpm install [name]

2.使用 create-react-app 快速構建 React 開發環境

create-react-app 是來自於 Facebook，經過該命令咱們無需配置就能快速構建 React 開發環境。

create-react-app 自動建立的項目是基於 Webpack + ES6 。

執行如下命令建立項目：

//快速建立react環境腳手架(只有第一次須要此句)
$ cnpm install -g create-react-app
//建立本身的react實例【可提早cd進入文件想要保存的目錄】
$ create-react-app my-app
//進入上一步創建的目錄
$ cd my-app/
//運行react
$ npm start
//或用yarn運行項目
yarn start

 

 

 

 

 而後就會打開瀏覽器：http://localhost:3000/

 

 本身的項目會在此處建立：C:\Users\Administrator\my-app

項目結構：

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

3.編輯App.js：

manifest.json 指定了開始頁面 index.html，一切的開始都從這裏開始，因此這個是代碼執行的源頭。

嘗試修改 src/App.js 文件代碼：

 原代碼以下：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

View Code

改後的代碼：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <br/><br/>
      <h1>歡迎來到REACT的世界！</h1>
    </div>
  );
}

export default App;

結果：

2、生成項目：

完成後可運行以下代碼來生成項目

//生成項目方法1：
npm run build

//生成項目方法2：
yarn build