大家好，在本系列的前三篇文章裡，我們一起學習了在 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-app2、開始動手建立吧！
接下來，我們來按照以下幾個步驟來建立我們的第一個 React 專案：
1、在控制檯輸入以下命令進行專案建立：
create-react-app my-first-react-app2、將工作臺環境切換至當前目錄，並執行專案，你需要在控制檯輸入以下命令：
cd my-first-react-appnpm start3、執行完以上的命令後，將會自動呼叫瀏覽器視窗，並開啟以下網址：
http://localhost:30004、接下來，我們在 src 的目錄下建立一個 Home.js 的新檔案，示例程式碼如下：
5、你可能注意到了在程式碼的最後一行我們使用 export 語法，這句話的意思就是方便我們的元件被其他檔案進行模組化呼叫。這句話除了寫在程式碼檔案最後，我們還可以寫在類聲前，示例程式碼如下：
小貼士：我個人偏好喜歡將export語句寫在檔案的末尾，但是有些人喜歡寫在類宣告前，具體使用哪種寫法，取決於個人的喜好。
6、現在我們建立完了第一個元件，我們需要讓它在頁面中進行呈現。因此，我們需要開啟 App.js 檔案，通過 import 語法匯入 Home 元件，然後將其新增至 return() 裡。專案初始化時，你可能會看到如下的程式碼：
小貼士：上述程式碼是通過函式的方式宣告元件，接下來的文章裡會有介紹，這裡就不過多介紹，我們知道是函式元件即可。
7、接下來我們針對上述程式碼做一些小的改動，我們通過 import 語法將Home 元件檔案引入，然後通過 JSX 語法進行新增。這裡我們將<p>部分的元素內容進行替換成我們的元件，示例程式碼如下：
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 檔案的引用位置，修改部分的程式碼如下：
11、接下來，我們需要在 index.js 檔案裡修正 App 元件檔案的位置引用，修改部分程式碼如下：
12、最後驗證下專案是否能正常執行，如果按照上述步驟操作後，我們在控制檯下執行 npm start 命令來驗證專案是否正常執行。
本部分小節
這種專案新結構讓我們的專案更具有靈活性和可維護性，當我們專案變得複雜時，這種專案結構就顯得尤其重要。
三、如何在元件裡新增CSS樣式上兩個小節，我們一起完成了如何建立元件和組織專案檔案，接下來我們來新增一些CSS內容在檔案裡。
在 React裡，最佳實踐就是把CSS檔案和元件檔案放在同一目錄裡，不同於我們以前傳統的方式，我們將CSS檔案放置在一個單獨的CSS樣式資料夾裡。 React 專案預設採用 Webpack 模組化打包工具，使用 Webpack 我們可以配置樣式的處理方式，關於 Webpack 如何配合 React 專案使用，在後續的文章裡會介紹到。
好啦，廢話不多說，一起來動手實踐吧！
1、建立一個 React 專案或基於上一小節的專案。
2、然後我們為Home元件建立1個新的CSS檔案，在同一個 Home 目錄下進行建立，讓我們稍微修改下 Home 元件，示例程式碼如下：
3、接下來我們在 Home.css 裡新增一些樣式，樣式就不過解釋，示例程式碼如下，這裡請注意樣式的命名方式：
4、你有可能需要使用內聯樣式，修改區域性的一些樣式，你只需要在對應的標籤上新增style屬性，使用駝峰命名的方式新增CSS屬性值，並將其包含在{{ }} 符號裡，示意程式碼如下：
5、除了以上方法，你還可以通過宣告樣式物件的形式進行樣式宣告，然後通過內聯樣式的方式進行引用，請注意樣式物件宣告的位置，示例程式碼如下：
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),敬請期待。