二、【重點】環境安裝：通過淘寶 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;

改后的代碼：

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;

結果：

二、生成項目：

完成后可運行如下代碼來生成項目

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

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