[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)
  

• 接着我要使用箭头函式建立一个函式元件，这边要注意的是，函式名称就是元件名称，所以这里的函式名称就是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，并显示在画面。
  

• 除了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"));