Day04 透过实作一个web 页面介绍 component 的概念

React是由component所组成，Component可以将 UI 拆分成独立且可重复使用的程序码，在 React 元件模组化的概念下，建构 web 页面 UI 时，就很像是在堆积木，而每一块积木就是所谓的元件Component,Component 的大小和范围都是可自己决定。

这次实作我将网页切割成三个Component，分为Header1，Header2，Section1

• 先在SRC 资料夹新建一个components文件夹，并将所有分离的组件文件放在这里。

• 用 function 宣告 Component。

import React from 'react'

const Header1 = (props) => {
    return (
        <div>
            <div className="header-1">
              <a href=" " className="logo"><i class="fas fa-gift"></i>Delivery</a>
      
            <form action="" className="search-box-container">
               <input type="search" id="search-box" placeholder="search here"></input>
               <label for="search-box" class="fas fa-search"></label>
            </form>
           </div>
        </div>
    )
}

export default Header1

每个Component都必用export default输出。

• 组件完成後，最後会在 App.js 元件中组合，在app.js中,先将组件import进来，再把组件集中在function中

import React from 'react';
import Header1 from "./components/Header1";
import Header2 from "./components/Header2";
import Section1 from "./components/Section1";

const App = (props) => {
  return (
    <div>
      <Header1 />
      <Header2 />
      <Section1 />
    </div>
  )
}

export default App

最後再将app.js页面元件import 至index.js中於此进行渲染

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);