⭐React Tech Stack

Teach Stack & Project Structure

#Stack Lists

State management

redux , redux-thunk , redux-persist , context-api

Css framework

tailwindcss , styled components , mui

optional : headlessui

Router

react-router-dom

Http Request & Data Fetching

fetch (native js) , react-query

Table management

react-table

Form management

react-hook-form

Languague

react-i18n

Deployment

Build Docker file

Test

Jest(Unit Test)

Date picker

Mui Date Picker

Charting

Victory chart

#Naming convention

Varible : CamelCase

Function : CamelCase

Varible Config : Screnming Snake Case

Component : Upper Camel Case

File , Folder : lower camel case,

Action Store : Screnming Snake Case

Type Interface or Type Assertions :

1. Use PascalCase for interface names.

2. Use camelCase for interface members.

3. Use "I" as a prefix for interface names.

4. Use "Props" end of interface name

State :

Use "use" prefix for state name and use "set" prefix for setState

#Proejct Structure

assets - ที่เก็บไฟล์ Static เช่น รูปภาพ , font

component - ที่เก็บไฟล์ component ต่างๆ

config - ที่เก็บ config หรือ ค่าคงที่ต่างๆ

Hoc - ที่เก็บไฟล์ HOC หรือ higher order component

hook - ที่เก็บไฟล์ custom hook

page - ที่เก็บไฟล์หน้าหลักของ page

route - ที่เก็บไฟล์สำหรับไว้สร้างหน้า route ต่างๆ

service - ที่เก็บไฟล์สำหรับเรียก service หรือ api

store - ที่เก็บไฟล์ของ store ใน redux

styles - ที่เก็บไฟล์สำหรับ custom css

__test__ - ที่เก็บไฟล์สำหรับเขียน unit test

themes - ที่เก็บไฟล์สำหรับ custom themes ของ tailwind

type - ที่เก็บไฟล์สำหรับ global type

utils - ที่เก็บไฟล์สำหรับฟั่งชั่นที่ใช้หลายๆที่

#Pages

ใน folder pages จะแบ่ง folder ตามชื่อ หน้านั้นๆ(path) โดยแต่ละ folder path จะมี folder แยกย่อยดังนี้

• components - สำหรับไฟล์ component ที่ใช้เฉพาะในหน้านั้นๆ

• contexts - สำหรับไฟล์ context ที่ใช้เฉพาะในหน้านั้นๆ

• types - สำหรับไฟล์ .ts ที่ใช้เฉพาะในหน้านั้นๆ

Design Component

อย่าพยามสร้าง component ที่ nested เกิน 3ขั้น ควรจะ compose ให้ได้มากที่สุด ถ้าเราพยายามที่จะ reuse โค๊ดมากเกินไป มันจะกลายเป็นทำให้ทุกอย่างมัน depend กันเกินไป เวลามี requried ใหม่ๆเข้ามามันไม่สามารถ scale ได้ดีเท่าที่ควร