在學習react之前，希望你有以下準備：

react的安裝
ECMAScript 6基礎

本文不講解react的安裝步驟，若需了解請移步官方網站(https://reactjs.org/)，那裏講解非常清楚，也很簡單。
至於ECMAScript 6，大家可以去阮一峰老師的官網(http://www.ruanyifeng.com)學習。

這篇文章主要解決一下幾個要點, 這幾個要點也可能是大家在學習react時非常迷惑的地方。

要點一：
什麽是組件？

要點二：
如何編寫組件？

要點三：
組件之間如何組合使用？

在弄清這些要點之前，我們先來看，react安裝後的目錄是怎樣的，應該在哪個目錄下進行開發。

看截圖：

可以說這個就是react的標準目錄結構，打開src目錄：

看截圖：

這個目錄下就是你將要開發組件的地方。

弄清了react的目錄結構，我們正式來講解要點。

什麽是組件？

請記住：文件即組件。

比如在src目錄下的App.js，這個App.js就是組件。你也可以自己建立一個組件，如Nav.js等等。

這個就是react的核心思想。一個網站的構成可以看成是很多組件的集合。

比如一個網站的首頁分為頭部，主內容區域，底部。那麽這三個大區域就可以當作組件。然後每個區域裏的內容塊又可以當作組件，以此類推，可以劃分成更小的組件。我們可以來看一張圖：

說形象點組件就像定義的很多功能函數，通過配置參數，組合調用這些函數，最後就可以實現一個完整的網站。

組件如此的美好，那該怎麽來編寫呢？

第二個問題，如何編寫組件。
在編寫組件之前，我自己通常把組件分成兩種，非UI組件和UI組件。

看例子：

//App.js

import React, { Component } from ‘react‘;
import ‘./App.css‘;

class App extends Component {

render() {

return (
    <div className="App">
      <header className="App-header">
       <h1 className="App-title">Welcome to React</h1>
      </header>
     </div>
);
}
}

export 
 
default App;

這是一個UI組件。是一個非常簡單的組件。即便不了解es6的同學，也能秒懂。
由此，我們可以把UI的組件書寫結構標準化，如下：

//MyApp.js

import React, { Component } from ‘react‘;

class MyApp extends Component {
    //其它的功能代碼
    render() {
        return (
        //UI代碼
        );
    }
}

export default MyApp;

依次類推，我們也可以把非UI的組件書寫結構標準化，如下：

//Myfn.js

let Myfn = {
    http(params){
    //代碼
    }
    showMessage(msg){
    //代碼
    }
    ...
    //其它代碼
}

export default Myfn;

對比一下，發現兩者有以下不同：

UI組件需要class語句
UI組件需要render函數
反之則不需要。

相同點：
react規定，組件名(也就是文件名)首字母必須大寫。
為了便於代碼管理和閱讀，最好讓組件名和組件內部導出的綁定名字統一。以Myfn.js為例，Myfn.js的文件名和其導出的Myfn對象名是一致的。大家一定要養成這樣的書寫習慣。

組件寫法我們會了，那如何讓組件組合使用呢？
以上面的例子說明，如果我想在MyApp.js裏使用Myfn，可以這樣使用：

//MyApp.js

import React, { Component } from ‘react‘;
import Myfn from ‘./Myfn‘; //註意這句，此處的Myfn.js的擴展名可以省去

class MyApp extends Component {
    //其它的功能代碼
    showMsg(msg){
        Myfn.showMessage(msg); //註意這句
    }
    render() {
        //this.showMsg(‘hello world!‘)或
        //Myfn.showMessage(‘hello world!‘)
        return (
            //UI代碼
        );
    }
}

export default MyApp;

是不是很簡單？
記住一句話：非UI組件通常是導入到UI組件裏使用的，非UI組件通常為UI組件渲染時提供邏輯處理。

原創教程之——reactjs 組件入門教程