本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。

在實際製作Components以前先來添加基礎的Stylesheets，讓畫面看起來漂亮些。

Bootstrap

首先加裝bootstrap套件

npm install bootstrap

接著在App.js或是index.js裡加上

import 'bootstrap/dist/css/bootstrap.css';

就能運用bootstrap的class替dom加造型。

像這樣:

<button className="btn btn-primary">bootstrap</button>

但這樣加的只有造型，並沒有將bootstrap的jquery方法也加進來。
可以像往常一樣到index.html上加入scripts，不過在 React 推薦的做法是利用套件像是 React Bootstrap ，他用React component的作法重製了bootstrap的功能，這部分連同 React component 一起，容後再談，先繼續談談style的部分。

Bootswatch

如果除了原生bootstrap想要更多風格選擇，可以用Bootswatch上的風格替換掉，首先加裝bootstrap套件:

npm install bootswatch

然後在App.js或是index.js裡替換掉bootstrap.css的部分

import "bootswatch/dist/[theme]/bootstrap.min.css"; 

[theme]的部分替換成想要的風格，像是

import "bootswatch/dist/cyborg/bootstrap.min.css";

Sass/Scss

如果要自己修改部分css，建立css檔並import進目標的component就行，
像是CRA範例裡的

// App.js
import "./App.css";

不過因為之前還沒用過Sass/Scss，這次一併加進來一起學習。

一樣先上套件:

npm install node-sass

接著就能建立 .scss檔案並導入，導入的方式跟 .css一樣:

// App.js
import "./App.scss";

題外話 : css classes 與 inline style

以上提到的方法都是建立css classes並在外部的css/scss檔案制定各class的style,
主要流程如下:

1. 在component上制定className

function App() {
  return (
    <div className="App">
        ...
    </div>
  );
}

2. 在外部css/scss檔制定class的style

.App {
  text-align: center;
}

不過也能用inline style的方式修改

function App() {
  return (
    <div style={{textAlign: "center"}}>
        ...
    </div>
  );
}

一般會將style另外提出成一個物件

function App() {

  const styles = { textAlign: "center", color: "red" };

  return (
    <div style={styles}>
        ...
    </div>
  );
}

兩種方法的比較上css classes比較簡潔，更好管理，效能也比較好，不過inline styles可以利用變數去動態更新style，在某些情況下用inline styles會比抽換 class來的方便。

簡單範例:

function App() {
  const newWidth = 100;
  const styles = { width: `${newWidth}px` };

  return (
    <div style={styles}>
        ...
    </div>
  );
}

當要改變物件的寬度的時候只要更新newWidth就好。

References:

• Adding Bootstrap - Create React App
• Quick start - Bootswatch
• Adding a Sass Stylesheet - Create React App
• Styling and CSS - React