iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

JavaScript 基礎修練系列 第 28

[Day28] React - 建立React 元件 (Component )

前面介紹了如何用JSX語法建立React元素,接著這篇會記錄如何建立React元件,即前面提到的React的核心觀念-Component。

React Component 主要功能就是可把很多的React元素包起來,包裝成一個個組件,再透過這些元件/組件的名稱將內容顯示出來。

這裡我會用前面提到的CodeSandbox來實作React。


建立元件

React元件有兩種建立方式,這篇會用Functional的方式來建立元件:

  1. Class-based 類別元件

    class Welcome extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}</h1>;
      }
    }
    
    ReactDOM.render(<Welcome name="Judy" />, document.getElementById('root'));
    
  2. Functional 函式元件 (在16.8版React新增了新功能hook後,即讓函式元件的功能更完整,幾乎可以做到類別元件可以做到的事)

    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
    

  • 首先,建立一個元件檔案,元件檔名規定必須是大寫的駝峰式命名,也就是每個單字的第一個字母要大寫。(如: MyComponent.js)
    https://ithelp.ithome.com.tw/upload/images/20210928/20141293vz5NQ3cPl0.png

  • 接著我要使用箭頭函式建立一個函式元件,這邊要注意的是,函式名稱就是元件名稱,所以這裡的函式名稱就是MyComponent。

  • 而return的內容即是這個元件要包含的內容,這裡則是使用JSX的語法直接產生一個React元素。

  • 最後我們要把這個元件export出來,才能在其他檔案使用這個元件。

import React from "react";

const MyComponent = () => {
  return <input />;    //因input沒有子元素及結尾元素,所以要用Self-Closing Tag
};

export default MyComponent;

將元件渲染到畫面上

  • 接著建立一個主要的檔案index.js,目標要讓剛剛建立的MyComponent元件render到DOM,並顯示在畫面。
    https://ithelp.ithome.com.tw/upload/images/20210929/20141293RomRQsHeW8.png

  • 除了import react & react-dom 外,也要引入剛剛建立的MyComponent.js元件

  • 使用jsx語法render MyComponent.js元件,用<MyComponent />表示,因為沒有任何的子元素及結尾元素,所以要用Self-Closing Tag

import React from "react";
import ReactDOM from "react-dom";

import MyComponent from "./MyComponent";

ReactDOM.render(<MyComponent />, document.getElementById("root"));

上一篇
[Day27] React - 建立子元素
下一篇
[Day29] React - 淺談 Component 的Props
系列文
JavaScript 基礎修練30

尚未有邦友留言

立即登入留言