Hello World!

沒錯! 說到學習新的程式碼的時候，當然要來個最經典的 HelloWorld! 做為學習的開端。

首先在左側區域新增一個檔案，檔案名稱直接輸入 HelloWorld.js ，就會直接生成一個JS檔案
( Visual Studio Code真方便 )

然後開啟 HolleWorld.js 輸入以下的內容：

import React, { Component } from 'react'

class HelloWorld extends Component {
    render() {

        let name = 'Hello World !'

        return <h1>{ name }</h1>
    
    }
}

export default HelloWorld

這裡建立了一個名為 HelloWorld 的元件，宣告name並放進HTML中的<h1>標記裡面，這種把HTML跟JavaScript程式碼混在一起來寫的方式，稱之為JSX語法，大括號{}裡面就是標明JavaScript的程式碼。

接著打開左側原本就有的 App.js ，把原始的程式碼清空之後，輸入：

import React, {Component} from 'react'
import HelloWorld from './HelloWorld'

class App extends Component {
  render() {
    return (
    
      <HelloWorld/>
      
    );
  }
}

export default App

這邊就是引用前面的 HelloWorld 元件，於是HTML顯示內容就是：

<h1>{ name }</h1>

最後的輸出內容就變成：

<h1>Hello World !</h1>

執行之後成功顯示出來：

React的第一個程式碼就完成了!

參考資訊來源：

1. React - DOM界的彼方(繁中)