React 學習筆記 - React 初探 - Part's 1

首頁關於我

Frontend

Mark Ku

July 05, 2022

1 min

前言

近年 React 前端生態越來越豐富，大量的套件，都是採用 react 開發，也被越來越多企業使用，也讓我也想去了解一下 React，過去從 Angular 、到 Vue、再到 React，我也終於湊滿前端三大框架了，嗯，應該可以向神龍許願了。

三大框架，各自的優勢

Angular - 框架有很明確的規範，有完整的解決方案及強大的 CLI，後端人員上手比較容易。
Vue - 開發快速， api 簡單，使用起來無負擔，舊系統整合翻寫較容易。
React - 前端生態更完整，撰寫起來更貼近 JS 語法，對很多企業來說，穩定又安全，版本昇級不用打掉重練。

專案建立

建立 react 專案，並使用 typescript

npx create-react-app jira --template typescript

P.S.npx非常智能的識別模塊，如果模塊存在，就使用。如果不存在，就臨時下載，用完就刪除。

typescript.json 更改 baseUrl，將預設目錄改成 src

加入 src

{
  "compilerOptions": {
   "baseUrl": "src",
...
}

React 會觸動刷新的兩個屬性

React State

state 有變動時 -> 影響到 virutal dom -> 重新渲染 dom，頁面更新。

React Props ( 外部傳入 )

class component

class ContactInfoBlock extends React.Component {
  constructor(props) {
    super(props);
  } 
  ...
}

function component

import { FC } from "react";
const ContactInfoBlock: FC<ContractProps> = () => {
...
}

for 迴圈渲染 - 就是自己寫 map 去渲染.

import React from "react";

export const Test = () => {
  let items = [1, 3, 5, 7];

  return (
    <div>
      {items?.map((item, index) => (
        <span key={index}>{item}</span>
      ))}
    </div>
  );
};

export default Test;

條件判斷 - 也是寫一個 function , return 一個 html 標籤

import React from "react";

export const Test = () => {
  let items = [1, 3, 5, 7];

  function showItem(item: Number) {
    if (item === 3) {
      return;
    } else {
      return <h1 key={item.toString()}>{item}</h1>;
    }
  }

  return <div>{items?.map((item, index) => showItem(item))}</div>;
};

export default Test;