ReactJS

    ReactJS หรือเรียกง่ายๆ ว่า React คือไลบรารี JavaScript สำหรับสร้างส่วนต่อประสานกับผู้ใช้ ได้รับการพัฒนาโดย Facebook และดูแลโดย Facebook และชุมชนของนักพัฒนาและบริษัทแต่ละราย โดยทั่วไปแล้ว React จะใช้ในการสร้างแอปพลิเคชันหน้าเดียวซึ่งมีการอัปเดตเนื้อหาแบบไดนามิกโดยไม่จำเป็นต้องโหลดทั้งหน้าซ้ำ

โครงสร้าง

api

ในโฟลเดอร์นี้ จะเป็นการรับค่าจาก การขอข้อมูลจากเซิฟเวอร์และส่งค่าไปแสดงบนหน้าเว็บ

import  axios  from  "axios";
import  { Stack }  from "../types/Main.type";
import  { ApiURL }  from "./ApiURL";

export async function GetData():Promise<Stack[]>{
    const data : Stack[] = await axios.get(`${ApiURL}`)
    return data
}

global

state in this floder we need to use global state file with zustand style set variable value of css font and many thing if you want it rendered on every page

page

   คุณสามารถสร้างไฟล์ ของหน้าต่างๆ โดยการสร้างไฟล์ นามสกุล .jsx , .tsx file and write ReactJS code in it to make pags of your website

type

   in type floder you can set your type interface and export or declare module,value with .d.ts file

export interface Stack{
    name: any,
    img: any
}

router

   in router floder you can import your page with lazy-loading put your loading page in <Suspense fallback={...}> and set path with your page by react-router-dom

import {BrowserRouter as  Router,Route,Routes} from 'react-router-dom'
import Header from '../components/Header/Header'
import { lazy , Suspense } from 'react'
const Hello = lazy(()=> import('../Pages/Hello/Hello'))
const One = lazy(()=> import('../Pages/one/One'))
const Two = lazy(()=> import('../Pages/two/Two'))
const Three = lazy(()=> import('../Pages/three/Three'))

function MainRoute() {
  return (
    <Router>
        <Suspense fallback={<h1>Loading....</h1>}>
          <Header/>
          <Routes>
            <Route path='/' element={<Hello/>}/>
            <Route path='/one' element={<One/>}/>
            <Route path='/two' element={<Two/>}/>
            <Route path='/three' element={<Three/>}/>
          </Routes>
        </Suspense>
      </Router>
  )
}

export default MainRoute;

components

  in components floder you can create .jsx file and export your components like Header,Footer ,…

functions

   In functions floder you can

export function Copy(text:string):void{
    navigator.clipboard.writeText(text)
}

test

   in test floder for unit testing project to run UI testing run npm run test

import { describe, expect, it } from 'vitest';
import '@testing-library/jest-dom';

describe('App', () => {
  const x = 2
  const y = 2
  it('can plus', () => {
    expect(x+y).toBe(4)
  });
  it('can multiply', () => {
    expect(x*y).toBe(4)
  });
});

Migration

vitest

  learn more Vitest to start your testing UI run

run unit test

npm run test

zustand

  in solidJS you can use Global state in your project like useContext by using Zustand to make you easy to manage your state learn more about zustand