• 進行開發環境安裝（cnpm 建議使用國內淘寶映象）

cnpm install -g create-react-app
create-react-app 專案名
cd 專案名
npm start

• 預設目錄結構
  ；

index.js 是入口檔案；
App.js 在入口檔案進行引用，主要用於Dom的操作。

• 在App.js進行元件的封裝

首先在src目錄下新建一個views資料夾,用於公共元件的儲存。這裡想說一點，react的元件字尾名使用的是 .js進行定義的，不同於vue元件是以 .vue進行定義。

import React, { Component } from 'react'
 
;
// import logo from './logo.svg';
import './App.css';
import List from './views/list';
import BodyIndex from './views/bodyindex';
import Footer from './views/footer';

class App extends Component {
  render() {
    return (
       <div className="App-header">
        <List/>
        <BodyIndex/>
        <Footer/>
        </div>
    );
  }
}

export default
 
 App;

關於jsx的語法，在上一篇的部落格中已經介紹過，要注意父節點的運用。

• 元件的模板語法（舉例 footer.js）

import React, { Component } from 'react';

class Footer extends Component {
    render() {
      return (
         <p>這裡是公共的底部，用於宣告版權</p>
      );
    }
  }

export default Footer; 

注意每一個元件頭部都要寫上引入的 react，不然元件是會報錯，沒有定義的。
這樣就完成了元件的封裝。