> For the complete documentation index, see [llms.txt](https://oms-frontend.gitbook.io/oms-frontend/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://oms-frontend.gitbook.io/oms-frontend/coding-conventions/react-tech-stack.md).
# 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](https://dirask.com/posts/Programming-PascalCase-definition-with-example-DLrW6j) for interface names.
> 2. Use [camelCase](https://dirask.com/posts/Programming-camelCase-definition-with-example-1RvaM1) 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
{% hint style="info" %}
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 - ที่เก็บไฟล์สำหรับฟั่งชั่นที่ใช้หลายๆที่
{% endhint %}
## #Pages
ใน folder pages จะแบ่ง folder ตามชื่อ หน้านั้นๆ(path) โดยแต่ละ folder path จะมี folder แยกย่อยดังนี้
* components - สำหรับไฟล์ component ที่ใช้เฉพาะในหน้านั้นๆ
* contexts - สำหรับไฟล์ context ที่ใช้เฉพาะในหน้านั้นๆ
* types - สำหรับไฟล์ .ts ที่ใช้เฉพาะในหน้านั้นๆ
{% hint style="info" %}
Design Component
อย่าพยามสร้าง component ที่ nested เกิน 3ขั้น ควรจะ compose ให้ได้มากที่สุด ถ้าเราพยายามที่จะ reuse โค๊ดมากเกินไป มันจะกลายเป็นทำให้ทุกอย่างมัน depend กันเกินไป เวลามี requried ใหม่ๆเข้ามามันไม่สามารถ scale ได้ดีเท่าที่ควร
{% endhint %}