祝各位粉絲平安夜快樂，文末抽18.8元現金紅包（3個），歡迎你的參與
大家好，在本系列的前三篇文章裏，我們一起學習了在 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-app
npm start3、運行完以上的命令後，將會自動調用瀏覽器窗口，並打開以下網址：
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.js5、你可能注意到了在代碼的最後一行我們使用 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.js3、本部分內容小節
到這裏我們就完成了第一個類組件的創建，我們這裏通過從 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.js11、接下來，我們需要在 index.js 文件裏修正 App 組件文件的位置引用，修改部分代碼如下：
import App from './components/App';
//File: src/index.js12、最後驗證下項目是否能正常運行，如果按照上述步驟操作後，我們在控制檯下運行 npm start 命令來驗證項目是否正常運行。
本部分小節
這種項目新結構讓我們的項目更具有靈活性和可維護性，當我們項目變得複雜時，這種項目結構就顯得尤其重要。
三、如何在組件裏添加CSS樣式
上兩個小節，我們一起完成了如何創建組件和組織項目文件，接下來我們來添加一些CSS內容在文件裏。
在 React裏，最佳實踐就是把CSS文件和組件文件放在同一目錄裏，不同於我們以前傳統的方式，我們將CSS文件放置在一個單獨的CSS樣式文件夾裏。React 項目默認採用 Webpack 模塊化打包工具，使用 Webpack 我們可以配置樣式的處理方式，關於 Webpack 如何配合 React 項目使用，在後續的文章裏會介紹到。
好啦，廢話不多說，一起來動手實踐吧！
1、創建一個 React 項目或基於上一小節的項目。
2、然後我們爲Home組件創建1個新的CSS文件，在同一個 Home 目錄下進行創建，讓我們稍微修改下 Home 組件並將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">Codejobs</a>.
</p>
</div>
);
}
}
// File: src/components/Home/Home.js3、接下來我們在 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.js5、除了以上方法，你還可以通過聲明樣式對象的形式進行樣式聲明，然後通過內聯樣式的方式進行引用，請注意樣式對象聲明的位置，示例代碼如下：
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.js6、如果按照以上步驟正確操作後，你可以使用 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),敬請期待。
React 基礎相關文章
「React 基礎」React 16 中的這幾個新特性值得你關注（文末送漂亮的 React Redux 後臺模板源碼）
「React 基礎」React 16 中的這幾個新特性值得你關注（文末送漂亮的 React Redux 後臺模板源碼）
「React 基礎 」在 Windows 下使用 React , 你需要注意這些問題
專注分享當下最實用的前端技術。關注前端達人，與達人一起學習進步！
長按關注"前端達人"
