React - 用 Hello 認識框架組件

React - 用 Hello 認識框架組件

從 0 開始學 React

前言

透過 Hello World 來認識我們的組件與 CSS 模組化，以及使用 React 好用的 VS Code 套件。

使用 create-react-app 起手式

如果還不知道怎麼起手式，點我

創建 Hello.js 組件

  1. 在src資料夾內新增Hello.js，並使用類式組件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    import React from 'react';
    import './Hello.css';

    class Hello extends React.Component {
      render() {
        return (
          <div>
            <h2>Hello world</h2>
          </div>
        )
      }
    }
    // 重點：預設輸出 Hello 組件
    export default Hello;

  2. 把index.js入口文件，引入Hello.js組件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import React from 'react';
    import ReactDOM from 'react-dom';
    // 引入 Hello 組件
    import Hello from './Hello';

    // 記得 render 內要加入 Hello 組件
    ReactDOM.render(
      <React.StrictMode>
        <Hello />
      </React.StrictMode>,
      document.getElementById('root')
    );

    Hello World

  3. 簡寫框架中類式組件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 利用 React 框架的分別輸出接收 Component
    import React,{Component} from 'react';
    import './Hello.css';

    // 重點：創建同時回傳 Hello 組件
    export default class Hello extends Component {
      render() {
        return (
          <div>
            <h2>Hello world</h2>
          </div>
        )
      }
    }

幫組件分類

  1. 在src資料夾中新增components資料夾，專門放組件

  2. 在components資料夾中新增Hello資料夾，專門放Hello組件的東西
    Hello.js

  3. 這時index.js引入的Hello.js位置就要修改

    1
    import Hello from './component/Hello/Hello';

  4. 把剛剛的Hello.js改名成index.jsx

    會用jsx是用來區分組建和一般 JS 功能用的

    index

  5. 這時index.js引入的Hello組件就可以寫到資料夾，它會自動找index文件

    1
    import Hello from './component/Hello';

樣式模組化

有時候組件一多，樣式名稱不小心重疊，又因為後面的樣式會覆蓋前面的樣式，導致樣式跑掉。
如下圖第一個Hello world原本是設定紅色背景，被第二個樣式蓋過去
CSS 模組化

這時候有很多解決方法

  • 如果是使用類似SASS技術，可以為每個組件樣式最外面多套一個 class

    • 把 SCSS 檔外層多套一個 class

      1
      2
      3
      4
      5
      6
      // 多套一層 hello
      .hello {
        .title {
          ...
        }
      }

  • 幫 CSS 樣式模塊化

    1. 把檔名中間多加.module變成Hello.module.css
      module

    2. 把Hello 組件中的index.jdx

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      import React,{Component} from 'react';
      // 模塊化的引入法
      import hello from './Hello.module.css';

      // className 內使用 {} 包住引入
      export default class Hello extends Component {
        render() {
          return (
            <div>
              <h2 className={ hello.title }>Hello world</h2>
            </div>
          )
        }
      }

      效果展示

推薦使用 VScode 套件

ES7 React/Redux/GraphQL/React-Native snippets

這個套件有提供程式模板

  • ES6~ES7 emmet 語法
  • React emmet 語法
  • Redux emmet 語法

參考資料