Day03 : HTML 混合 JS-JSX


第一次看到 JSX 的時候覺得超潮

要正式開始記錄 React 的內容了,首先 create-react-app 安裝好後,可以開始看到目錄上有許多資料夾跟檔案,其中 public 資料夾內有一個 index.html,這檔案有個要特別注意的就是 .rootdiv

這邊之所以看不到 index.html 哪裡引入 js file,是因為 create-react-app 透過 Webpack 的 html-webpack-plugin 將這些都打包好了。

透過這個 .root 的 div 將寫好的組件 render 到畫面上,可以打開 index.js:

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

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

可以看到透過 ReactDOM 將 <App/> render(渲染) 到 .root 裡面,先將 terminal/cmd 下指令 npm start 來看看網頁結構:

<App/> 確確實實的存在於 .root 的 div

<App/>則是對應 App.js,可以再打開 App.js:

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

可以看到一個 Function 叫做 App,這被稱為 Functional Component,之後會提到,他就是一個組件。

從這段程式碼可以解讀到的東西很多,首先 index.js call 了 App,而 App return 了一個 div 給 index.js,讓畫面可以呈現這包 div 內的結構,但如果是第一次看到這程式碼,應該會有些疑問。

className? 不是 class 嗎?

如標題所說的,HTML混合 JS 成為了 JSX,在 HTML 要給標籤一個類別叫做 class,而 ES6 有個 class 的語法糖,兩邊都有這名字,一定要有一邊放棄,因此在 HTML 的 class 改成 className

  • 請記住,JSX當中一定要使用駝峰式命名,classname 是會出現問題的。
  • 除了 class ,for也是有這個情況,在 label tag 若要使用 for 屬性則使用 htmlFor

屬性的值用大括號?

其實不只是屬性的值可以用大括號,標籤的文字也可以用大括號,例如它 logo.svg 是透過 {logo} 來賦予 src 的值,你也可以這樣使用:

const title = 'Hi React!'
const paragraph = 'Hello world!'
const style = {
  color: '#eee'
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1 style={style}>{title}</h1>
        <p>{paragraph}</p>
      </header>
    </div>
  );
}

學程式必備的 Hello world 一定要的。

要注意的幾個點 return 裡面是包著一個 div 叫做 App 的,是一個回傳值,因此定義的 title、paragraph 跟 style 不可以寫在 return 裡面,如果真的想要寫在 App Component 裡面,就得改成一般 Component的寫法:

import React, { Component } from 'react';
//請記得引用 { Component }

class App extends Component {
  render() {
    const title = 'Hi React!'
    const paragraph = 'I am paragraph!'
    const style = {
      color: '#eee'
    }
    return (
      <div className="App">
        <header className="App-header">
          <h1 style={style}>{title}</h1>
          <p>{paragraph}</p>
        </header>
      </div>
    );
  }
}

有 Component 的字眼才比較像一個 Component

這是 ES6 的 Class Component,較為常見到,主要是 return 外包著一個 render function,而變數就可以放在 render 的裡面。

JSX 的 tag

雖然在這段 Create react app 沒有看到,其實在 React 中的任何 tag 可以有兩種方式:

//1. close tag
<p></p>
//2. self-closing
<p/>

總結

在看 React 小書時,有看到一個蠻有趣的講解,關於 JSX 底層運作的原理,我還真的沒想過把 HTML 結構轉換成物件陣列結構,總之 JSX 比較重要,其實不會太難上手,習慣後就不會那麼卡。

#React





React 七天寫作松
透過短短的七天,稍微把我對 React 的見解整理成七天份的文章,希望能對正在初學 React 的你有所幫助!

留言討論