學習React(5) - 組件 Component

組件是用來描述一部分的用戶界面。
組件是可以重複利用的，而且還可以嵌套在其他組件中。

組件類型：
（1）無狀態功能組件 Stateless Functional Component

採用JavaScript Functions

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

那麼在App.js 文件中，應該如何寫呢：

import React from 'react';
import './App.css';

class App(){
     return (
         <div className="App">
            <h1>Hello World</h1>
         </div>
     );
}

export default App;

（2）有狀態組件類 Stateful Class Component

採用Class extending Component class, render method returning HTML

class Welcome extends React.Component {
   render() {
      return <h1>Hello, {this.props.name}</h1>;
   } 
}

那麼在App.js 文件中，應該如何寫呢：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
   render() {
     return (
           <div className="App">
             <h1>Hello World</h1>
            </div>
          );
   }
}

export default App;

如果覺得總結不錯的話，給個讚唄！