// Create an Array
const fruits = ["Banana", "Orange", "Apple", "Mango"];

// Sort the Array
fruits.sort();
console.log(fruits.sort())

// 沒有給參數的預設排序
const arr = [5, 9, 1, 3, 2, 6];
arr.sort();  // [1, 2, 3, 5, 6, 9]

// 以匿名函式回參數做「升序」排序
arr.sort(function(a, b) {
  return a - b; // a - b > 0
});
// [1, 2, 3, 5, 6, 9]

// 如果要反過來做「降序」排序
arr.sort(function(a, b) {
  return b - a;
});
// [9, 6, 5, 3, 2, 1]

try {
   // 欲執行的程式碼
} carch(error) {
    // 當錯誤發生時，欲執行的程式碼
} finally {
    //錯誤與否都會被執行的區塊
}

npm install cors

const express = require('express');
const cors = require('cors');

const app = express();

// 將其實作為中間件
app.use(cors());

//origin單個時
const corsOptions = {
   origin: 'https://www.nileshblog.tech/',
   optionsSuccessStatus: 200,
 };

//origin多個時
const corsOptions = {
   origin: ['https://localhost:5175', 'https://192.168.220.20:5175','https://www.nileshblog.tech/'],
   optionsSuccessStatus: 200,
 };
//使用
app.use(cors(corsOptions))

app.get('/authenticated-route', cors(corsOptions), (req, res) => {
   // Your route logic here
 });

filter: blur(5px);

filter: brightness(2)

filter: contrast(200%)

filter:grayscale(1);

filter: hue-rotate(90deg);

filter: invert(100%);

filter: opacity(50%);

filter: saturate(200%);

filter: sepia(100%)

/* 同時設定對比度、亮度、飽和度*/
filter: contrast(175%) brightness(3%) saturate(200%);

display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
// grid-template-columns: 200px 200px 200px;
gap: 1.25rem;

.two-wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
 // grid-auto-rows: minmax(50px, auto);
  grid-column-gap: 10px; //指定網格欄之間的間距。
   grid-row-gap: 1em; //指定網格列之間的間距。
  margin-top:30px;
    div{
    border:1px solid green;
    display: flex;
    }
  }

npm install --save react-hook-form 

import React from "react";
import { useForm } from "react-hook-form";
import axios from 'axios';
import "../assets/scss/form.scss";
const Register = () =>{
    const { register, handleSubmit, formState: { errors }, } = useForm();
    //表單onSubmit
    const onSubmit = async (data) => {  
    const api = `${import.meta.env.VITE_API_DOMAIN}/auth/register`;
    try{
        await  axios.post(api,data)
            .then(res =>{
                if (res.status===200) {
                    console.log(res.data)
                    alert('註冊成功')
                }
            })
        } 
        catch (error) {
        console.log(error,"GET Error!!")
        } 
    }
    return (
        <div className="register_area">
            <div className="title"><b>註冊帳號</b></div>
            <form onSubmit={handleSubmit(onSubmit)}>
             <input type="text" className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
      placeholder="username" { ...register('username', {required: { value: true, message: '欄位必填'}})} />
          { errors.username && <span> {errors.username?.message}</span> }
          <input type="text" className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="email" { ...register('email', {required: { value: true, message: '欄位必填'},pattern: { value: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g, message: '不符合 Email 規則'}})}/>
           { errors.email && <span> {errors.email?.message}</span> }
            <input type="password" className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="password" { ...register('password', {required: { value: true, message: '欄位必填'},})} />
      { errors.password && <span> {errors.password?.message}</span> }
       <input type="submit" value="登入"  className="block w-full rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" />
            </form>
        </div>
    )


}
//輸出Register
export default Register

npm install --save react-owl-carousel 

import { defineConfig } from 'vite'
import inject from '@rollup/plugin-inject'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
     inject({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),
  ]
})

npm install @rollup/plugin-inject --save

import { useEffect, useState } from "react"
import $ from 'jquery';
import OwlCarousel from "react-owl-carousel";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";

const App = () =>{
  const [banners, setBanners] = useState([]);
  const api = "https://xxx/api/banners";
  const getBanners = () => {
    fetch(api, { method: "GET" })
      .then((res) => res.json())
      .then((data) => {
        setBanners(data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    getBanners();
  }, []);
  return (
    <div>    
      <OwlCarousel className='owl-theme' loop items={1} autoplay={true} nav>
           {banners.map(item => (
             <div className="item" key={item._id}>
               <img src={item.image} />
                <div>{item.subject}</div> 
             </div>
              ))}
      </OwlCarousel>
    </div>
  )
}

export default App

npm install --save react-router-dom＠6.4.1

import * as React from "react";
import * as ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";
import App from './App'
import './index.css'

const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>
)

<Route path="/todolist" element={ <ToDoList/> }>

import React from 'react'
import { HashRouter, Route, Routes } from "react-router-dom";
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import ToDoList from "./TodoList";

const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <HashRouter>
      <Routes>
        <Route path="/" element={ <App /> } />
        <Route path="/todolist" element={ <ToDoList /> } />
      </Routes>
    </HashRouter>
  </React.StrictMode>
)

npm install --save tailwindcss postcss autoprefixer

npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;

npm create vite@3.1.0 專案名稱

cd 專案名稱

npm install
//啟動 
npm run dev

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path"
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    base: "/",
    resolve: {
        alias: {
        '@': resolve(__dirname, '/src')
        }
    },
    envDir: path.resolve(__dirname, "./env")
})

VITE_API_URL = '開發端環境Api網址'

VITE_API_URL = '正式主機位置Api網址'

VITE_API_URL = '測試環境位置Api網址'

import.meta.env.VITE_API_URL