ReactJS入門－ React 的核心：JSX特點與介紹

6 min readAug 31, 2023

在開始之前

請先打開上次建立好的 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 標籤當中的樣式可能大家習慣這樣：

但是在 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。

事件（如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 的架構分明。

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

Originally published at https://studio-44s.tw.

ReactJS入門 － React 的核心：JSX特點與介紹