---
title: React - 用 Hello 認識框架組件
tags: React
date: 2021/8/13
---

###### tags: `React`

###### *date: 2021/8/13*

# ⚛️ React - 用 Hello 認識框架組件

[TOC]

## 使用 create-react-app 起手式

[如果還不知道怎麼起手式，點我](/x7_KuRKtRNafXP5Zl9DFSw#創建並開啟--以-NPM-為例-)

## 創建 Hello.js 組件

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

    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`組件

    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')
    );


3. 簡寫框架中類式組件

    // 利用 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`組件的東西
3. 這時`index.js`引入的`Hello.js`位置就要修改

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

4. 把剛剛的`Hello.js`改名成`index.jsx`
> 會用`jsx`是用來區分組建和一般 JS 功能用的


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

    import Hello from './component/Hello';

## 樣式模塊化

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

這時候有很多解決方法

- 如果是使用類似`SASS`技術，可以為每個組件樣式最外面多套一個 class
- 把 SCSS 檔外層多套一個 class

    // 多套一層 hello
    .hello {
      .title {
        ...
      }
    }

- 幫 CSS 樣式模塊化
1. 把檔名中間多加`.module`變成`Hello.module.css`
2. 把`Hello 組件`中的`index.jdx`

      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](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

這個套件有提供程式模板

- ES6~ES7
- React
- Redux

### 參考資料

- [React 官網](https://reactjs.org/)
- [React 全家桶](https://www.youtube.com/playlist?list=PLmOn9nNkQxJFJXLvkNsGsoCUxJLqyLGxu)
- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)