iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Software Development

30天學會React系列 第 4

Day4 Jsx

前言

今天會講一下jsx,基本上寫React就是遵循這個規則走,就好像如果遊戲規則都不太了解的話,就不用玩了

Jsx

什麼是Jsx?
Jsx其實是JavaScript的語法擴充,並且React官方極力推崇開發者在開發React時使用,不過你也可以不使用,畢竟最後都會編譯成JavaScript(瀏覽器只看得懂JavaScript)

基本瞭解Jsx後,我們來看看Jsx在寫法上面的一些限制吧

1. 他的Html標籤跟你的好像不一樣啊...

Jsx的Html標籤跟我們一般在寫的Html不太一樣,Jsx的標籤會採用小駝峰方式書寫,例如 tabindex 需改成tabIndex,看得出差異嗎?沒錯indexI變大寫了

基本上如果一個變數或是標籤是由兩個或是以上的單字組成,在第二個單字的字首會需要使用大寫(如果有第三或第四的單字,同樣需要大寫)

2. 你的class好怪啊...

Jsx跟一般html不同的是,他的部分標籤是有新增特殊文字的,例如標題的class,在Jsx我們需寫成className,不然他會報錯,不過程式還是能跑,也就是說Bootstrap的上面的程式碼都需要做更改,要馬你把所有的class都變成className,不然就是使用react-bootstrap(不過筆者不是很推薦,原因有二,第一他是用Hooks寫的,所以如果不會Hooks就沒辦法寫(問題不大),在來就是有些東西目前還沒做更新,所以還是要回去使用Bootstrap(問題很大))

3. 標籤的大小寫,其實....差很多!

通常我們在使用Jsx語法時,會統一html標籤,都使用小寫(lowercase names),而Component才會使用大寫:

// 基本html標籤
<div>30天學會React</div>
// Component標籤
<Div />

4. JSX 只能有一個根元素!

如果你不知道什麼是根元素,沒關係,我這邊有相關文章讓你參考
那什麼是JSX 只能有一個根元素,如果有很多個會怎麼樣?你似乎有很多疑問,程式碼,上!

通常只有一行字的話,我會直接寫,像這樣:
https://ithelp.ithome.com.tw/upload/images/20210831/20129747LqCzYM26BP.png

但如果今天有兩行字,或以上,一般我們會這樣寫:
https://ithelp.ithome.com.tw/upload/images/20210831/20129747XruX3UScFd.png

感覺很正常啊,沒什麼問題,不過卻會報錯:
https://ithelp.ithome.com.tw/upload/images/20210831/20129747S7Al8Th4G4.png

所以我們需要在這兩行程式碼外面包一層div:
https://ithelp.ithome.com.tw/upload/images/20210831/20129747jaOU4G9jtM.png

或是我有看過有人包一層空的:
https://ithelp.ithome.com.tw/upload/images/20210831/20129747Og7vQni0oi.png

這樣一來就不會報錯嘍~~

5.副檔名需改成.jsx

如標題所是,須改用jsx檔,而不是js喔

題外話,如果你習慣使用TypeScript做開發,副標題就是Tsx,至於create-react-app如何使用Typescript,我之前有寫一篇教學


上一篇
Day3 Hello World + 基礎佈局分析
下一篇
Day5 State vs Props
系列文
30天學會React8

1 則留言

0
gior__ann
iT邦新手 4 級 ‧ 2021-09-07 08:25:43

你好,想請問一下~

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

function App() {
  const name = 'Josh Perez';
  const element = <h1>Hello, {name}</h1>;

  return (
    <div className="App">
      <header className="App-header">
        {element}
      </header>
    </div>
  );
}

export default App;

這樣是jsx的寫法嗎?
可是我不需要改副檔名,他還是可以 run
是 create-react-app 幫我們有轉譯過嗎?
https://ithelp.ithome.com.tw/upload/images/20210907/20120722E6VpB8bmq1.jpg

janlin002 iT邦新手 3 級 ‧ 2021-09-07 09:07:25 檢舉

你好,上圖的確是jsx的寫法喔,至於為什麼可以run,是因為jsx畢竟還是js(我的文章上方有提到Jsx其實是JavaScript的語法擴充),既然都是js當然能run成功拉~~

gior__ann iT邦新手 4 級 ‧ 2021-09-07 10:30:48 檢舉

了解~ 謝謝

我要留言

立即登入留言