ReactJS

ReactJS, or simply React, is a JavaScript library for building user interfaces. It was developed by Facebook and is maintained by Facebook and a community of individual developers and companies. React is commonly used for building single-page applications where the content is dynamically updated without needing to reload the entire page.

Structure

• Directorysrc

  • Directorycomponents

    • Header.tsx
    • Footer.tsx
  • DirectoryApi

    • ApiURL.ts
  • Directoryglobal

    • DirectoryStyle

      • main.scss
    • DirectoryState/

      • …
  • Directorypage/

    • …
  • Directoryrouter/

    • …
  • functions
• Directorytest

  • main.test.ts
• package.json

api

in this case we get api file yo path your api data and return

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

in page floder you can and .jsx 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 Person{
    name: string,
    age: number
}

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