[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>

可是加了大括号{}，它就会把{}里面的内容当成 JavaScript 进行计算，
因此就可以回传出 5，
像这样：

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

- 作用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')
);

这个是我之前看不懂的语法!!!!!!!!
现在懂了!!!!!!!!!(欢呼)

7. map

这个也是在 React (JSX) 很常使用到的方法呢，
简单来说是可以将宣告的阵列再一个一个用变数的方式取用出来，
用法是

阵列.map((变数名称) =>
    要做的事
);

例如：

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

原本我们在 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

祝大家中秋节快乐~~~~~
那我们明天再见啦~~~~~