iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
自我挑戰組

Re: 從 Next.js 開始的 React 生活系列 第 19

[Day19] 在 Codecademy 學 React ~ 恍然大悟!原來那些好用的語法都是來自 JSX

前言

今天來到第 19 天,
預計 Codecademy 學習文系列會在這幾天結束,
先直接進入正題吧~~~
再附上一次 React 的連結:https://www.codecademy.com/learn/react-101

本日正文

Advanced JSX

昨天的文章講了 JSX 的基礎後,
今天進入 JSX 的進階語法。

1. 使用 className 而非 class

原來這是 JSX 的寫法XD
我之前一直以為是 React 的專屬寫法(某種層面來說可能沒有錯?)
在 Codecademy 有解釋用 className 而非 class 的原因是,
因為 JSX 會被轉譯成 JavaScript,
而 class 是 JavaScript 的保留字,
所以總之看起來意思是避免到時候重複出錯之類的?

2. Self-Closing Tags

我們常見的 Self-Closing Tags 有 <br /><img /> 等,
而我自己之前在寫的時候有一種情況我也會使用到 Self-Closing Tags,
我用 <div> 寫了一個區塊,
可是它不包含任何內容只有 attribute 的時候我也寫過 Self-Closing Tags,
像這樣:

<div
    className={...}
    key={`...`}
    style={...}
/>

3. Curly Braces 大括號 { }

- 作用1:當成 JavaScript 進行處理

{} 包起來的字串會被當成 JavaScript 進行處理,
因此如果沒有加大括號,2 + 3 只會被當成普通的字串處理,
像這樣:

<h1>2 + 3</h1>

https://ithelp.ithome.com.tw/upload/images/20210921/20129873q6J88cYAJw.png
可是加了大括號{},它就會把{}裡面的內容當成 JavaScript 進行計算,
因此就可以回傳出 5,
像這樣:

<h1>{2 + 3}</h1>

https://ithelp.ithome.com.tw/upload/images/20210921/20129873cKs31KQqct.png

- 作用2:取用變數

這邊是在說例如你前面宣告了一個變數,後面就可以用 {變數} 的方式去使用它。
例如:

const name = 'Ado';
... (略)
<h1>My name is {name}.</h1>

上面是字串的情況,
當然也可以使用在屬性(Attributes)的情況囉!
例如:

const sideLength = "200px";
... (略)
<img 
    src="images/panda.jpg" 
    height={sideLength} 
    width={sideLength} />

4. Event Listeners

如同之前我 Day14 文章有介紹到的 onClick
原來這也是 JSX 的寫法!

而當然 onClick 之後要執行什麼函數也可以用到上面介紹的大括號{ }來做取用,
像這樣:

function myFunc() {
  ...(略)
}
...(略)
<img onClick={myFunc} />

這意思就是當 img 被點擊的時候,要執行 myFunc 這個函數。

JSX 可以用的滑鼠事件、鍵盤事件... 等,可以參考 → Supported Events

5. Ternary Operator (三元運算子)

原來我之前文章用到 x ? y : z 的寫法也是 JSX 來的!

{!isShow ? (
      <>
        <div className="px-2 d-flex justify-content-between">
          ... (略)
        </div>
        <div className="px-4 d-flex justify-content-around">
          ... (略)
        </div>
      </>
    ) : (
      <img ... (略) />
    )}

關於三元運算子還想知道更多可以參考大大的這篇文章→ Ternary Operator(三元運算子)

6. JSX 條件式:&&

其實這跟上面的三元運算子有點像,
只是它適合用在只有要做一個動作,
之後沒有要做任何事就很方便,
用法是

{ 條件式 && 要做的事 }

翻譯成 if else 應該會長像這樣:

if (條件式) {
    要做的事 
}

再翻譯成之前的三元運算子會長這樣:

{ 條件式 ? (
    要做的事
): null}

你看在 if else 跟三元運算子都至少要寫三行才能完成的事,
可是用 && 只需要一行就可以完成!!!!!!!!!

例如:

...(略)
const choosePeople = (
  <div>
    { judgmental && <h1>Ado</h1> }
    { !judgmental && <h1>Bot</h1> }
    { judgmental && <h1>Cat</h1> }
    <h1>Dog</h1>
  </div>
)
ReactDOM.render(
	choosePeople, 
	document.getElementById('app')
);

https://ithelp.ithome.com.tw/upload/images/20210921/20129873LDcHboieB8.png
這個是我之前看不懂的語法!!!!!!!!
現在懂了!!!!!!!!!(歡呼)

7. map

這個也是在 React (JSX) 很常使用到的方法呢,
簡單來說是可以將宣告的陣列再一個一個用變數的方式取用出來,
用法是

陣列.map((變數名稱) =>
    要做的事
);

例如:

... (略)
const people = ['Rowe', 'Prevost', 'Gare'];
const peopleLis = people.map((person) =>
  <li>{person}</li>
);
... (略)
)

https://ithelp.ithome.com.tw/upload/images/20210921/20129873xHuOYko8r3.png

原本我們在 if else 還要搭配 for 迴圈才寫得出來:

const people = ['Rowe', 'Prevost', 'Gare'];
for (let i=0; i<people.length; i++){
    <li>people[i]</li>
}

但這邊用 陣列.map(變數) 就做到 for (let i=0; i<people.length; i++) 這樣的事了!

React Components

然後 Codecademy 開始介紹 component class 的用法,
先給大家看範例:

import React from 'react';
import ReactDOM from 'react-dom';
 
class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
};
 
ReactDOM.render(
  <MyComponentClass />,
  document.getElementById('app')
);

這就是我之前一直看不懂的寫法!!!!!!!!
因為我之前習慣的寫法是:

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import React, { useState, useEffect } from "react";
import { Spinner } from "reactstrap";
import "./styles.css";

const Report = () => {
  ... (略)
  const [text, setText] = useState(shortText);
  const [isShow, setIsShow] = useState(false);

  useEffect(() => {
    ... (略)
  });

  return (
    <>
      <div className="container px-4 mt-2">
        ... (略)
      </div>
      <div className="m-4">
        ... (略)
      </div>
    </>
  );
}

export default Report;

然後邊學的過程我就一直在想說到底 class 的寫法是怎麼來的,
除了要囉嗦的寫 class X extends React.Component 以外,
後面還要 ReactDOM.render
這不是有點麻煩嗎(?

然後就找到有大大在之前鐵人賽的文章有分享關於 React 有 3 種 Component 的寫法:
Day 14, React components 各種寫Component的方法

  1. 最簡單的 extends React.Component 開始
  2. 再來是不用this的createClass
  3. 最後是我很少用的stateless component

原來我最常用的就是 stateless component 寫法!
除了寫法上比較簡單以外,
據說這個寫法也是 performance 比較好的寫法。

不過經過這次我終於看得懂 class 的寫法了,
以往我只要看到 React 的這種寫法範例我就會直接跳過不看XD
現在已經看懂了,所以我以後會乖乖看的XD

總之今天的學習對我來說收穫也是滿多的!
今日收穫 summary:

  • 恍然大悟原來那些好用的語法都是來自 JSX XD
  • && 的用法
  • extends React.Component 的用法
  • 還有學到了三元運算子跟大括號的英文XD

後記

本來還想再寫一些 Component 的學習筆記,
但今天文章篇幅應該夠了(?
所以就先寫到這XD

到今天我好像都還沒講到 Next.js 齁XD
放心大家不要心急,
準備在收官階段時就讓它登場亮相,
前面還是要先把基礎打起來XD

祝大家中秋節快樂~~~~~
那我們明天再見啦~~~~~


上一篇
[Day18] 跟我一起從頭學 React 吧!Let's start learning React from Codecademy! ~ Intro to JSX 篇
下一篇
[Day20] 在 Codecademy 學 React ~ 如何宣告 Component 及使用 Component 的好處
系列文
Re: 從 Next.js 開始的 React 生活30

尚未有邦友留言

立即登入留言