iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

網頁設計師轉職前端工程師的血淚辛酸路系列 第 7

Day 07 - React 的小小練習

打開 public 資料夾,我們可以看見熟悉的 index.html,雖然裏面塞滿了花花綠綠的各種註解,但我們只要專注在找到我們的目標元件就好:

<div id="root"></div>

他執行了我們所看到的那片紫色畫面裡的物件(忘記的話請回上一篇看一下~~)。

接著我們到 src 資料夾裡找到 index.js 就可以看到他做了些什麼好事

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';  // 這邊載入了一個App的jS檔,別想逃過我的火眼金睛!!!
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

其實一隻隻看就可以知道 React 把許多 jS 都抽成一小塊一小塊的拼圖,通常這樣的行為稱之為“模組化”的寫法(沒記錯應該是吧)。

以網頁設計師的角度來看就是我們把好多要重複做的東西群組起來,然後同時載入,這樣我們只要改一個檔案,就可以變動許多頁面了,聽起來是不是很棒。

注意:jS檔案跟CSS檔案都要放在src裡面唷!

接著讓我們來修改 App.js 裡的東西,儲存後它就會即時反映在昨天我們所看到的網頁裡。

例如這麼寫:

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          我是一個老頑皮啊~老頑皮~
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          其實我也有部落格,但我不要說!
        </a>
      </header>
    </div>
  );
}

export default App;

就會得到這樣的畫面喔!


上一篇
Day 06 - jS 微基礎之ES6心得及準備進入React
下一篇
Day 08 - 今天的我沒辦法產好CODE
系列文
網頁設計師轉職前端工程師的血淚辛酸路21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言