好，我們接著上一篇文章【React從入門到架構（1）–手把手建立、解讀以及開發第一個ReactApp】的內容講：

（1）修改“HTML”程式碼，建立初佈局

在src/App.js這個檔案中，我們看到了熟悉已久的HTML程式碼，不過我要說的是，這並不是真正的HTML，而是一種JSX語言（自行百度下），為了讓你能夠方便的去寫頁面！

不管怎麼樣，我們先改成一段我們自己熟悉的HTML程式碼，但是要注意：
類標籤class，這裡要用成className
app.js：

import React, { Component } from 'react';
import logo from
 
 './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="AppHeader">
        This is Header
        </div>
        <div className="AppCenter">
          <div className="AppSlider">
            This is Sub Slider
          <
 
/div>
          <div className="AppContent">
            This is Sub Content
          </div>
        </div>
        <div className="AppFooter">
        This is Footer
        </div>
      </div>
    );
  }
}
export default App;

重新整理一下頁面看看效果：

下面重點來了，我們要把頭部、尾部、側邊欄用CSS寫的好看一些：

在上面的程式碼中我們可以看到，有這麼一句：
import './App.css';
字面上理解一下：匯入CSS檔案嘛～～～

（2）修改CSS，建立初樣式。

我們開啟app.css檔案，修改為如下程式碼：

.App {
  text-align: center;
}
.AppHeader{
  text-align: center;
  width:800px; height:20px;
  border: #61dafb solid 1px;
}
.AppCenter{
  text-align: center;
  width:800px; height:500px;
  border: #61dafb solid 1px;
}
.AppSlider{
  width:100px; height:500px;
  background-color: dimgray;
  color: aliceblue;
  float: left;
}
.AppContent{
  width:700px; height:500px;
  background-color: beige;
  float: left;
}
.AppFooter{
  text-align: center;
  width:800px; height:20px;
  border: #61dafb solid 1px;
}

這時候儲存並重新整理介面，Okay：

那麼，CSS如何去分檔案組織呢？
這時候，我們建立一個資料夾，以及其他檔案，如下圖所示：

我把這個步驟詳細地描述下：

• 1. 首先在src下建立style目錄，然後把app.css放進去；
• 2. 對App.js的import './App.css';程式碼引入，修改為：import './style/App.css'；
• 3. 建立AppHeader.css、AppFooter.css以及AppCenter.css幾個檔案，並將之前的幾個層疊樣式表分別拷貝進去；
• 4. 關於新建立的幾個css檔案的引入，也是最關鍵的一步：使用@import符號，引入同路徑下的同名檔案檔名即可。

那麼有同學問了，有關Javascript、Jquery中的一些特性，該怎麼使用呢？

答案是：不需要，我會在第四節：props和state的內容中講這個問題。

如果需要快速瞭解整個流程並完成專案搭建，歡迎訂閱我的chat，謝謝！
https://gitbook.cn/gitchat/activity/5be6bce90cc5075731372f52