「React 手冊」從創建第一個 React 組件開始學起

2019 年 12 月 24 日
筆記

大家好，在本系列的前三篇文章里，我們一起學習了在 React 中經常會用到的 ES6 新特性，以及 REACT 16+ 版本的一些新特性和團隊成員在 Winwow 和 MAC 環境下混合開發時需要注意的一些問題，從本篇文章起，我們將正式開始從最基礎的內容開始學習React，今天我們將從創建第一個 React 組件開始學起。

本篇文章主要介紹以下內容：

如何創建我們的第一個 React 組件
如何組織我們的項目文件結構
如何在組件里添加CSS樣式

一、如何創建我們的第一個 React 組件

組件是React最基本的內容，通過組件我們可以實現交互和重用，依據組件的創建方式又可以分為三類：class components（類組件）、pure components（純組件）、pure components（函數組件），接下來，我們來開始動手實踐第一個組件吧(這裡我們先用類組件的方式進行創建，在後續的文章里將會介紹函數組件)。

1、準備腳手架運行環境

為了方便起見，快速上手 React 項目，我們使用 create-react-app 腳手架創建 React 項目。創建之前，你需要安裝 create-react-app 腳手架，安裝之前，確保你安裝了 Node 運行環境（從 www.nodejs.org 官網下載）,支持 Mac, Linux, 和 Windows 系統環境。

在控制台里，我們輸入以下命令進行全局安裝：

npm install -g create-react-app

或者用更簡單命令：

npm i -g create-react-app

2、開始動手創建吧！

接下來，我們來按照以下幾個步驟來創建我們的第一個 React 項目：

1、在控制台輸入以下命令進行項目創建：

create-react-app my-first-react-app

2、將工作台環境切換至當前目錄，並運行項目，你需要在控制台輸入以下命令：

cd my-first-react-app  npm start

3、運行完以上的命令後，將會自動調用瀏覽器窗口，並打開以下網址：

http://localhost:3000

4、接下來，我們在 src 的目錄下創建一個 Home.js 的新文件，示例代碼如下：

import React,{Component} from "react";  class  Home extends  Component{      render() {          return <h1>I'm Home Component</h1>      }  }  export  default  Home;    // File: src/Home.js

5、你可能注意到了在代碼的最後一行我們使用 export 語法，這句話的意思就是方便我們的組件被其他文件進行模塊化調用。這句話除了寫在文末，我們還可以在在類聲前，示例代碼如下：

import React,{Component} from "react";  export  default class  Home extends  Component{      render() {          return <h1>I'm Home Component</h1>      }  }    //File: src/Home.js

小貼士：我個人偏好喜歡將export語句寫在文件的末尾，但是有些人喜歡寫在類聲明前，具體使用哪種寫法，取決於個人的喜好。

6、現在我們創建完了第一個組件，我們需要讓它在頁面中進行呈現。因此，我們需要打開 App.js 文件，通過 import 語法導入 Home 組件，然後將其添加至 return() 里。項目初始化時，你可能會看到如下的代碼：

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;    //File: src/App.js

小貼士：上述代碼是通過函數的方式聲明組件，接下來的文章里會有介紹，這裡就不過多介紹，我們知道是函數組件即可。

7、接下來我們針對上述代碼做一些小的改動，我們通過 import 語法將Home 組件文件引入，然後通過 JSX 語法進行添加。這裡我們將<p>部分的元素內容進行替換成我們的組件，示例代碼如下：

import React from 'react';  import logo from './logo.svg';  import './App.css';    // 這裡我們引入了 Home 組件  import Home from "./Home";    function App() {    return (      <div className="App">        <header className="App-header">          <img src={logo} className="App-logo" alt="logo" />         {/* 在這裡我們添加 Home 組件在頁面里進行渲染*/}          <Home/>          <a            className="App-link"            href="https://reactjs.org"            target="_blank"            rel="noopener noreferrer"          >            Learn React          </a>        </header>      </div>    );  }    export default App;    //File: src/App.js

3、本部分內容小節

到這裡我們就完成了第一個類組件的創建，我們這裡通過從 react 類庫包引入 React、Component 模塊，創建了類組件。並通過 import 語法導入到了需要此組件的文件，使用 JSX 語法進行添加（其實 React 使用 JSX 來替代常規的 JavaScript，JSX 是一個看起來很像 XML 的 JavaScript 語法擴展）。JSX 語法和 HTML語法類似，你可能注意到了這裡我們使用了 className 名稱替換了 CSS 的 class 類名（因為 class 是 javascript 的關鍵詞 ES6的類聲明部分），如果屬性名包含兩個單詞，建議用駝峰法進行命名（Camel-Case：除第一個單詞之外，其它單詞首字母大寫）。比如 onClick、srcSet、和 tabIndex。如果帶有橫線的屬性，則可以使用原先的命名規則，比如 aria-*、 data-* 等屬性（data-something 和 aria-label）。

小貼士：React 組件的名稱比如類命名和文件命名首字母都應該大寫，剛開始學習時，你有可能覺得不舒服，但這確實 React 最佳實踐推薦的方法。

下圖為本小節完成後，項目成功運行後的效果圖：

二、如何組織我們的項目文件結構

接下來我們來討論下如何組織我們React項目的文件結構，在這裡我只是給大家提供一個思路方向，具體怎麼在此基礎上進行優化，還是需要結合自己的項目特點進行優化。

1、首先我們需要通過 create-react-app 創建一個 React 項目（上一小節我們已經完成）。

2、創建完後，項目初始化的結構如下圖所示：

3、接下來我們在 src 目錄下創建 components目錄（src/components）和 shared目錄（src/shared）。

4、然後，我們在 src/components 目錄下創建 Home 目錄（src/components/Home），並將 Home.js 文件移動至本目錄下。

5、App.js 文件移動至 src/components 目錄下。

6、App.css、App.test.js 文件也移動至 src/components 目錄下。

7、將 logo.svg 文件移動至 src/shared/images 目錄下。

8、我們的 index.js 文件位置保持不變在src/ 目錄下。

9、如果你完成了以上步驟的話，你的項目結構如下圖所示：

小貼士：如果你創建的組件重用性比較高的話，比如頁面的頭部和尾部組件，我強烈建議你將共享組件放置在 src/shared/components 目錄下。

10、為了保持上小節項目能正常運行，在 App.js 文件中，我們需要修改 logo 和 Home 文件的引用位置，修改部分的代碼如下：

import logo from '../shared/images/logo.svg';  import Home from "./Home/Home";    // File: src/components/App.js

11、接下來，我們需要在 index.js 文件里修正 App 組件文件的位置引用，修改部分代碼如下：

import App from './components/App';    //File: src/index.js

12、最後驗證下項目是否能正常運行，如果按照上述步驟操作後，我們在控制台下運行 npm start 命令來驗證項目是否正常運行。

本部分小節

這種項目新結構讓我們的項目更具有靈活性和可維護性，當我們項目變得複雜時，這種項目結構就顯得尤其重要。

三、如何在組件里添加CSS樣式

上兩個小節，我們一起完成了如何創建組件和組織項目文件，接下來我們來添加一些CSS內容在文件里。

在 React里，最佳實踐就是把CSS文件和組件文件放在同一目錄里，不同於我們以前傳統的方式，我們將CSS文件放置在一個單獨的CSS樣式文件夾里。 React 項目默認採用 Webpack 模塊化打包工具，使用 Webpack 我們可以配置樣式的處理方式，關於 Webpack 如何配合 React 項目使用，在後續的文章里會介紹到。

好啦，廢話不多說，一起來動手實踐吧！

1、創建一個 React 項目或基於上一小節的項目。

2、然後我們為Home組件創建1個新的CSS文件，在同一個 Home 目錄下進行創建，讓我們稍微修改下 Home 組件，示例代碼如下：

import React,{Component} from "react";  // 在這裡引入我們創建的 Home.css 文件  import './Home.css';  export default class  Home extends  Component{      render() {          return(              <div className="Home">                  <h1>Welcome to Codejobs</h1>                  <p>                      In this recipe you will learn how to add styles to                      components. If you want to learn more you can visit                      our Youtube Channel at                      <a href="https://www.qianduandaren.com">Codejobs</a>.                  </p>              </div>          );      }  }    // File:  src/components/Home/Home.js

3、接下來我們在 Home.css 里添加一些樣式，樣式就不過解釋，示例代碼如下，這裡請注意樣式的命名方式：

 .Home {      margin: 0 auto;      width: 960px;  }    .Home h1 {      font-size: 32px;      color: white;  }    .Home p {      color: white;      text-align: center;  }    .Home a {      color: #56D5FA;      text-decoration: none;  }    .Home a:hover {      color: #333;  }    /*  File: src/components/Home/Home.css   */

4、你有可能需要使用內聯樣式，修改局部的一些樣式，你只需要在對應的標籤上添加style屬性，使用駝峰命名的方式添加CSS屬性值，並將其包含在{{ }} 符號里，示意代碼如下：

import React,{Component} from "react";  // 在這裡引入我們創建的 Home.css 文件  import './Home.css';  export  default class  Home extends  Component{      render() {          return(              <div className="Home">                  <h1>Welcome to Codejobs</h1>                  <p>                      In this recipe you will learn how to add styles to                      components. If you want to learn more you can visit                      our Youtube Channel at                      <a href="https://www.qianduandaren.com">前端達人</a>.                  </p>                  <p>                      <button                          style={{                              backgroundColor:'gray',                              border:'1px solid black'                          }}                      >                      Click me!                      </button>                  </p>              </div>          );      }  }    // File:  src/components/Home/Home.js

5、除了以上方法，你還可以通過聲明樣式對象的形式進行樣式聲明，然後通過內聯樣式的方式進行引用，請注意樣式對象聲明的位置，示例代碼如下：

import React,{Component} from "react";  // 在這裡引入我們創建的 Home.css 文件  import './Home.css';  export  default class  Home extends  Component{      render() {          const buttonStyle={              backgroundColor:'gray',              border:'1px solid black'          };          return(              <div className="Home">                  <h1>Welcome to Codejobs</h1>                  <p>                      In this recipe you will learn how to add styles to                      components. If you want to learn more you can visit                      our Youtube Channel at                      <a href="https://www.qianduandaren.com">Codejobs</a>.                  </p>                  <p>                      <button style={buttonStyle}>                          Click me!                      </button>                  </p>              </div>          );      }  }    // File:  src/components/Home/Home.js

6、如果按照以上步驟正確操作後，你可以使用 npm start 命令來查看我們的項目，如下圖所示：

題外話

你可能對 React 是如何編譯的將我的CSS代碼引入到我們的項目文件里的，你可以使用谷歌瀏覽器開發者查看工具進行查看，你將會看到以下內容：

基本上一個CSS文件，分配一個<style>標籤區域,我們的React項目對應的有3個CSS文件，就有對應的3個<style>標籤區域,這是由於Webpack 默認使用的是style-loader模式。

在使用 create-react-app 創建項目時，我們無法直接修改 Webpack配置，主要是因為項目使用的 react-scripts 程序包進行了集成，除非你手動集成了Webpack配置到你的項目里。

小節

本篇文章的介紹就介紹到這裡，感謝你的閱讀，本篇文章我們一起學習了如何創建 React 類組件，如何組織我們的項目結構和引入CSS文件，在下一篇文章里，如何定義組件的屬性（props）和數據狀態(state),敬請期待。