React - 用 Hello 認識框架組件

前言

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

使用 create-react-app 起手式

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

創建 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

這個套件有提供程式模板

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

參考資料

• React 官網
• React 全家桶
• ES7 React/Redux/GraphQL/React-Native snippets