ReactJS入門 - React 的核心:JSX特點與介紹 - 筆記長也NotesHazuya

ReactJS入門 - React 的核心:JSX特點與介紹

2021-06-10 00:30:00   ReactJS

在開始之前

請先打開上次建立好的 hello-hello-world 專案當中的 index.js ,然後替代成為下面的程式碼:

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

ReactDOM.render(
  <h1>Hello, JSX 很重要喔</h1>  ,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

然後就直接執行 npm start,再打開瀏覽器就可以看到這個畫面了

 

可以傳遞 html 元素

沒有錯,在 JSX 語法當中可以傳遞 html 元素,以下再給一個範例:

const helloFun = ()=>{
  return <button>真的很重要!!!!</button>
}

ReactDOM.render(
  helloFun()  ,
  document.getElementById('root')
);

這樣執行後會看到一個按鈕在畫面上。

所有元素都必須閉合

有些 html 本身不需閉合,例如 <br> 或是 <hr>。但是在 JSX 的語法當中每個元件都必須閉合,例如:

<img />
<div></div>
<br />
<hr />

傳遞的元素必須要用父元素包起來

如果有很多的標籤元素的話必需要用一個容器標籤包起來,例如:

ReactDOM.render(
  <div>
    <h1>好想睡喔</h1>
    <button>我要睡了</button>
  </div>
   ,
  document.getElementById('root')
);

如果照下方的寫法,會發生錯誤:

ReactDOM.render(
  <h1>好想睡喔</h1>
  <button>我要睡了</button>
   ,
  document.getElementById('root')
);

 

 

為了使程式碼寫得更簡潔,不用每次都要自己在最外層加 <div> 之類的容器標籤, React 也提供了 <></> 這樣的使用方式來省去不必要的麻煩:

  <>
    <h1 style={{ color: "red"} }>好想睡喔</h1>
    <button onClick={ showAlert }>我要睡了</button>
    { helloFun() }
  </>

可以使用{ } 大括號在 JSX 中篩寫 Javascript 程式碼

如果你曾經使用過像是 flask 或是 laravel 這些後端框架的樣版引擎,也會有類似的括弧,但是後端的樣版引擎的大括號是在裡面寫樣版引擎本身的語言。而 React 的大括號可以用來寫 Javascript 的程式碼,例如:

const helloFun = ()=>{
  return <button>真的很重要!!!!</button>;
}

ReactDOM.render(
  <div>
    <h1>好想睡喔</h1>
    <button>我要睡了</button>
    { helloFun() }
  </div>
   ,
  document.getElementById('root')
);

這樣就執行了 helloFun 這個函式。如果需要使用 Javascript 宣告的變數或物件,也都要加上大括號。

Style 要以 Javascript 物件格式篩寫

過往寫 html 標籤當中的樣式可能大家習慣這樣:

<h1 style="color: red;"></h1>

但是在 JSX 裡面要將 style 當中的屬性都包裝成為物件,其中屬性名稱以駝峰式(大寫區隔)方法命名,例如:

ReactDOM.render(
  <div>
    <h1 style={{ color: "red"} }>好想睡喔</h1>
    <button>我要睡了</button>
    { helloFun() }
  </div>
   ,
  document.getElementById('root')
);

其中因為是篩寫 Javascript 程式碼所以要用大括號刮起來,第二個大括號則是物件的大括號。

class 屬性變成 className

由於 class 是 JSX 的保留字,因此在 JSX 當中原先 html 標籤的 class 屬性變為 className。

<div className="testClass">Test</div>

事件(如onClick onChange)須以駝峰式方式命名

過去寫 html 標籤上的事件可能會寫全小寫(如 onclick),但在 JSX 當中須以駝峰式命名,例如:

const showAlert = ()=>{
  alert("show");
}

ReactDOM.render(
  <div>
    <h1 style={{ color: "red"} }>好想睡喔</h1>
    <button onClick={ showAlert }>我要睡了</button>
    { helloFun() }
  </div>
   ,
  document.getElementById('root')
);

這樣點擊"我要睡了"就會跳出一個對話方塊。

這裡順帶完成了函式綁定,其中會發現綁在按鈕上的沒有括號,如果加上括號的話綁定的函式會被直接執行。

總結

本篇是 React 的核心部分,這裡介紹了一些使用 JSX 語法的基本原則,未來會更頻繁的使用這些語法,可以多多熟悉。另外,如果你是從後端的 MVC 框架或是 Angular 過來的話,可能會很不習慣 JSX 語法,因為這樣的語法不如 html 與程式邏輯分明的 MVC 架構乾淨,也不像 Angular 的架構分明。

再來下一篇將會進入元件的概念,雖然可以直接在同一個地方寫完全部的程式,但是隨著程式的壯大,也就不容易多人合作維護,因此元件的概念就十分重要。 

關於作者


長也

資管菸酒生,嘗試成為網頁全端工程師(laravel / React),技能樹成長中,閒暇之餘就寫一些筆記。 喔對了,也愛追一些劇,例如火神跟遺物整理師,推推。最愛的樂團應該是告五人吧(?)