iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 4
1
Modern Web

被 React react 的後端工程師系列 第 4

[DAY04] 你好世界

我想說的是:
基礎 Hello World 建立和組件說明

冷知識:
於1972年,貝爾實驗室成員布萊恩·柯林漢撰寫的內部技術檔案
《A Tutorial Introduction to the Language B》
首次提到了 Hello World 這字串
當時,他使用B語言撰寫了第一個使用參數的Hello World相關程式 —— 維基百科

首先把先前新建的專案內 src 資料夾清空
從頭開始寫 Hello World,並從中認識組件的使用方法

步驟開始

src 資料夾內建立新的 index.js
並填入

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />,document.getElementById('root'))

首先引入了兩個 React 的必要文件
而 App 則是稍後會建立的組件,組件名稱必須是大寫字母開頭
因為我們使用了 webpack 所以 js, jsx 類型檔案的副檔名可以省略不寫

而在引入 App 組件後
使用 React 的方法把組件渲染到了 public/index.html 裡 id="root" 的區塊

再來就是寫 App 這個組件,十分簡單的顯示 Hello Lemon in 第 11 屆 It邦幫忙鐵人賽

import React, {Component} from 'react'

class App extends Component{
    render(){
        return (
            <>
                Hello Lemon in 第 11 屆 It邦幫忙鐵人賽
            </>
        )
    }
}
export default App

這邊使用的語法跟 HTML 有點像卻又有點不同,這叫做 JSX 會在後面的文章說做介紹
空的 <></> 其實只是為了避免我們在 root 這個 div 底下又多一層 div 所以才這樣用

比較特殊的應該是第一行 import React, {Component} from 'react'
這是ES6的語法 - 解構賦值
如果不使用解構賦值,則寫成以下這樣

import React from 'react'
const Component = React.Component

當我們這兩個檔案都完成後,可以在 terminal 使用 npm start
來看一下我們剛剛的練習結果
https://ithelp.ithome.com.tw/upload/images/20190915/20121016LYbCJV5V6q.png


上一篇
[DAY03] 上帝視角之路徑之熟門熟路老司機之資料夾說明
下一篇
[DAY05] JSX 到底是多 X!
系列文
被 React react 的後端工程師30

尚未有邦友留言

立即登入留言