React 學習筆記之創建 React 項目

2020 年 1 月 4 日
筆記

安裝 React 的學習環境

// 安裝創建 react 項目的工具  npm install -g create-react-app    // 創建一個項目  ➜  Project create-react-app jiajia-react  Creating a new React app in /Users/myCode/Project/jiajia-react.    Installing packages. This might take a couple minutes.  Installing react, react-dom, and react-scripts...    // 啟動項目  cd jiajia-react  npm start

目錄結構介紹

node_modules 存放 npm 包的目錄。
public 存放靜態資源，提供外部訪問。
src 存放源代碼。

業務調用順序

在 src/index.js 中有如下代碼，程序首先導入了 React 和 ReactDom 模塊，並導入了一個當前目錄下的 App 模塊。隨後在代碼中使用 ReactDOM.render 將 App 模塊渲染到了界面上。這個 App 在 React 中稱為組件(component)。而這個組件渲染到什麼位置則是第二個參數 document.getElementById(『root』) 決定的，它從 index.html 中獲取到了 root 節點，並將 App 插入到 root 節點下。

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

而 App 組件中首先導入了 React 的 Component，並創建了一個 App 的類，繼承與 React 的 Component。裏面實現了 render 函數，該函數僅返回了一些 html 代碼，用於界面上顯示。值得注意的是，由於 class 是 JavaScript 的關鍵字，所以在給 div 添加樣式的時候，要將 class 修改為 className。這裡的代碼是 jsx 語法。最終將實現好的 App 通過 ES6 的 export 語法將這個模塊導出提供外部使用。

import React, { Component } from 'react';  import logo from './logo.svg';  import './App.css';    class App extends Component {    render() {      return (        <div className="App">          <div className="App-header">            <img src={logo} className="App-logo" alt="logo" />            <h2>Welcome to React</h2>          </div>          <p className="App-intro">            To get started, edit <code>src/App.js</code> and save to reload.          </p>        </div>      );    }  }    export default App;

編譯生產環境的項目

// 編譯項目，會在項目目錄下生成一個 build 的文件夾。  npm run build    // 安裝 pushstate-server 用於將已經編譯好的項目部署  npm install -g pushstate-server  // 將編譯項目運行在本地查看效果  pushstate-server build  // Listening on port 9000 (http://0.0.0.0:9000)

執行以上命令後，會產生一個編譯後的生產環境的代碼。瀏覽器訪問 http://0.0.0.0:9000 後就能看到編譯後的測試項目了。