tags: 前端課程

React筆記

DOM (Document Object Model)

文件物件模型，把HTML文件的各個標籤定義成物件，這些物件最終會形成一個樹狀結構。
例：
document.getElementById就是用id在向DOM取得元素

JSX

JavaScript 的語法擴充，屬性名稱以小駝峰方是撰寫。

const element = <h1>你好，世界！</h1>;

上面的標籤語法不是一個字串也不是HTML。
而是把右邊的HTML當成一個物件存到變數中。
這種把HTML寫在JavaScript的程式碼中的技術

const showOne=true;
const element = <h1>{showOne?1:0}</h1>

可以在HTML標籤中利用「{}」寫JavaScript表示式

const styleArgument = { fontSize: '100px', color: 'red' };

ReactDOM.render(
    <h1 style = { styleArgument } > Hello, world! </h1>,
    document.getElementById('root')
);

style變為一物件、屬性名稱規則改用駝峰法(用大寫區隔)、屬性的值變成字串

Scss

1. 巢狀結構

#banner{
    ...

    #logo{    // 等同於 #banner #logo
        ...

        img{    // 等同於 #banner #logo img
            ...
        }

    }

    nav{     //等同於 #banner nav
        ... 
    }
}

2. &連接

a{
    color:red; 
    &:hover{   //等同於 a:hover
        color:red;
    }

    &:active{  //等同於　a:active
        color:blue;
    }
}

ES5/ES6/ES7

ES5

• 嚴格模式
  https://medium.com/itsems-frontend/javascript-strict-mode-d0a3aa74458b
• Array/Object操作的方法
  • Array.find
  • Array.filter
  • Array.map
  • …

ES6

• 箭頭函式 Arrow Functions

//不帶參數
//ES5
function func_name(){
    console.log('Hello World!');
}
//ES6
func_name = () =>{
    console.log('Hello World!');
}
//帶一個參數
//ES5
function func_name(e){
    console.log(e);
}
//ES6
func_name = e =>{
    console.log(e);
}
//帶兩個(含)以上參數
//ES5
function func_name(e,i){
    console.log(e,i);
}
//ES6
func_name = (e,i) =>{
    console.log(e,i);
}
//關於return
func_name = () => something
func_name = () =>{
    return something;
}

• 參數預設 Default Parameters
  傳入function的參數沒有給定值時，會出現Exception，最快的解決方法就是給定預設值，在ES6中給定預設值的方式更為快速簡單

BMI=(height=1.75, weight=65) => {
    let BMI=weight/(height^2);
    console.log(BMI);
}

• 文字模板 Template Literals

// ES5
var name='Jack';
var start = 'Hello'+name+'!';
//ES6
const name='Jack'
const start = `Hello ${name}!`

• 多行字串輸入 Multi-line Strings

// ES5
var fruit = 
    'apple,' +
    'banana'
//ES6
const fruit = 
    `apple,
     banana`

• 解構賦值 Destructuring Assignment

const Jack={age:40,gender:'male'};
//一般
console.log(Jack.age,Jack.gender);
//解構
const {age,gender}=Jack;
console.log(age,gender);
//console結果：40male

//賦值
const Jack {age:x} = {age:40}; //x=40

• 物件實字 Enhanced Object Literals
  假如object內的元素其key與value名稱一樣，可以省略key直接寫 value 名稱即可。

// ES5
var name = 'Jack';
var obj = {
  name: name
};

// ES6
const name = 'Jack';
const obj = { name };

• 宣告 Let and Const
  • let可變動
  • const不可變動，宣告時要給定initialize

//let
let a;
a=10;
console.log(a);
a=20;
console.log(a);
//const
const b=100;
console.log(b);
//下面可以拿掉註解測試看看
//b=200;
//console.log(b);

• Modules
  import、export

JSON

• 包含Array、Object
• 成對的key:value，中間以:區隔
• value可以是：
  • 數字 (整數或浮點數)
  • 字串 (請用 "" 括號)
  • 布林函數 (boolean) (true 或 false)
  • 陣列 (請用 [ ])
  • 物件 (請用 { })
  • NULL

Node.js安裝環境

https://nodejs.org/en/

Nvm安裝包

下載nvm-setup.zip
https://github.com/coreybutler/nvm-windows/releases/tag/1.1.7

nvm(node version manger)

管理、切換node版本

常用指令

• nvm ls：列出所有已安裝的node版本，前面有標*是目前使用的版本
• nvm install <version>：安裝某個版本的 node
• nvm uninstall <version>：解除安裝指定版本
• nvm –version：查看nvm版本
• nvm use <version>：切換node版本

npm(node package manger)

套件管理工具可以下載各種應用，安裝nodejs的時候就會一起安裝了

常用指令

• npm install：尋找該資料夾裡面的package.json去下載裡面定義好的所有套件
• npm init：專案初始化讀取package.json的資訊
  • package.json
  1. dependencies: 執行環境會需要
  2. devDependencies: 開發或測試環境需要
• npm start：本地運行專案
• npm run build：將專案打包成webpack

React

將程式元件化，由很多元件組成UI畫面，每個元件透過render渲染出樣式，渲染完成後根據資料的改變去變動網頁內容，不需要去刷新頁面

優點：程式碼不用重複寫、網頁風格統一、修改方便
https://ithelp.ithome.com.tw/m/articles/10271212

Class Component

具有生命週期，具有State，需要引入React Component，一定要實作render
https://ithelp.ithome.com.tw/m/articles/10232421
https://ithelp.ithome.com.tw/m/articles/10219057

import React, { Component } from "react";
import "./index.scss"

export default class NewsCard extends Component {
    constructor(props) { 
        super(props) 
    }

  render() {
    const { cardImg, cardTitle, cardContent } = this.props;

    return (
      <div className="card">
        <div className="newsImg">
          <img src={cardImg} />
        </div>
        <div className="cardTitle">{cardTitle}</div>
        <span>{cardContent}</span>
        <div className="link">
          <a href="">VIEW MORE</a><div className="line"></div>
        </div>
      </div>
    );
  }
}

import NewsCard from "../../Component/NewsCard";

 <NewsCard
     cardImg={item.cardImg1}
     cardTitle="滑順不偏移 上下導輪鉸鏈"
     cardContent="台灣每年台灣每年台灣每年台灣每年台灣每年台灣每年都會迎來"
 />
<NewsCard
     cardImg={item.cardImg2}
     cardTitle="abcdefg"
     cardContent="happy birthday to you"
 />

Functional Component

沒有生命週期，沒有State

function Functional(props) {
    const sayHi =()=>{
        console.log('hi')
    }
    return <button onClick={sayHi}>btn</button>
}

不過在Hook出現後functional Componet 也具有生命週期以及State

props & state

props

React父元件與子元件間溝通的橋樑，是靜態(唯讀)的

state

元件存放資料的地方，以物件的方式存放（key：value）,需要在constructor建立自身state，並且利用setState去改變state的值

constructor(props) { //若要使用這個方法
    super(props) //必須先執行super(props)，若有用到props的話會找不到this.props，沒用到props也可以只寫super()
    this.state = {
        currentPage: 'one', //給預設值
    }
}

this.setState({
    currentPage:'two'
})

生命週期

React Component 官方文件

• constructor :用來初始化的地方，還沒渲染DOM的時候，假設沒有寫super() ，無法使用this
• render：會進行渲染的，回傳JSX
• componentDidMount: DOM已經渲染完成 ，在這個階段可以呼叫api來更新DOM ，適合做一些初始化的工作
• componentDidUpdate: 當props or state更新，就會觸發元件更新DOM，所以如果在這個階段setState會造成無限循環
• componentWillUnmount: 元件從DOM被移除 ，在這階段可以用來清除一些計時器
• getDerivedStateFromProps： 會在「每一次」跑 render() 之前被呼叫執行，當props、state改變就會觸發，在初始化的時候也會觸發一次

Hook

不必寫class就可以使用state

useState & useEffect

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 與 componentDidMount 和 componentDidUpdate 類似：
  useEffect(() => {
    // 使用瀏覽器 API 更新文件標題
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

專案架構 & 資料流 & Router

專案架構

|
–– /node_modules 套件安裝在這裡面
|
–– /public 靜態網頁
|
–– /src
|
–– /assets 圖片
|
–– /components 元件庫
|
–– /layouts 頁面框架
|
–– /mixin 通用css
|
–– /pages 頁面
|
–– /reducers 存取api回傳的資料
|
–– /routes 設定網頁路徑資料
|
–– /sagas 之funciton
|
–– /services 存放api路徑及參數
|
–– /utils 工具庫(存放通用fuction)
|
–– /config.js 撰寫api路徑之前綴
|
–– /index.js 進入點
|
–– /index.scss
|
–– /Router.js 指路標
|
–– /.env 設定檔
|
–– /.env.exapmle 設定檔範例
|
–– .gitignore 忽略不上傳git的檔案
|
–– package-lock.json 記錄本次安裝的套件版本
|
–– package.json 記錄所有安裝的套件與版本
|
–– README.md

資料流

npm start
index.js->Router(引入設定好的所有路徑/routes檔)->導向對應的layout和page->
saga->service->reducer->page

• connect(mapStateToProps, mapDispatchToProps)
• import { put, takeLatest, call, all } from "redux-saga/effects";
• yield

常用套件

Lodash

• _.find
• _.filter
• _.map
• _.get

moment

moment(<value>).format("YYYY-MM-DD HH:mm:ss")

PrimeReact

https://www.primefaces.org/primereact/setup/

Mantine

https://mantine.dev/getting-started/

Bootstrap

https://react-bootstrap.github.io/components/alerts

leaflet

https://react-leaflet.js.org/