Home

Open Intelligent Automation Research Center's Basic React Starter Project. This is just a lab not a good document follow great documents at Create React App

Project 1 Familiar with React

ทำความรู้จักกับ React การใช้งาน Component, Props การเริ่มวาง HTML Layout การนำ Component Library, CSS Library ง่าย ๆ มาวางให้เห็นภาพของ React

Instruction and Code

• Instruction: Project-1-Familiar-With-React-Instruction
• Code ตัวอย่าง: ในโฟลเดอร์ 01-familiar

Information

• เริ่มเขียน JavaScript
• เริ่มเขียน React เบื้องต้น

Project 2 using Tailwind CSS, Component and Layouting

ติดตั้ง Tailwind CSS การเรียกใช้ การเขียน การวาง Layout และการหา Component Library อื่น ๆ มาช่วย

Instruction and Code

• Instruction: Project-2-Instruction-Tailwind-CSS
• Code ตัวอย่าง: ในโฟลเดอร์ 02-tailwind

Information

• Install Guide from Official Doc
• MUI
• Mantine
• AntD
• Useful Resource from Resource.fyi

Project 3 useState, useEffect and API Call

การเข้าสู่ Concept หลักของ React Hook หรือ React Functional Component

Instruction and Code

• Instruction: Project-3-Instruction-HookAndAPI
• Code ตัวอย่าง: ในโฟลเดอร์ 03-hook

Information

• Introducing to Hook Official Doc
• React Hooks คืออะไร มาลองหัดใช้กันดีกว่า / Devahoy
• useState และ useEffect ใน React / NeeMeOn Medium
• Axios
• Node Package Manager / NPM
• Starwar API

Project 4 Create Basic Express Backend

Instruction and Code

• Instruction : Project-4-Instruction
• Code ตัวอย่าง: ในโฟลเดอร์ 04-express-backend

Information

• สร้าง RESTful API ด้วย Express — Express 101
• ทำ Backend API ด้วย Node.js และ MongoDB กันดีกว่า
• MongoDB Official Website
• Mongoose Official Doc
• Download MongoDB Community Server
• ExpressJS Official Doc

Project 5 Frontend Backend Integration

Instruction and Code

• Instruction : Project5 Instruction
• ในโฟลเดอร์ 05-front-back-integrate

Project 6 Routing With React Router

Instruction and Code

• Instruction : Project6 Instruction
• ในโฟลเดอร์ 06-routing

Project 7 Search with react

Instruction and Code

• Instruction : Project7 Instruction

Project 8 Pushing the Array

สมมติว่าเรากำลังทำการสร้างระบบร้านค้า เรามี Product และเรากำลังสร้างรถเข็น (Cart) เพื่อเก็บ Product เอาไว้ซื้อของ

Instruction and Code

• Instruction : Project8 Instruction

Project 9 More Complex Data Structure

นำ Product ที่อยู่ในรถเข็นมาสร้างเป็น Order แล้วเก็บไว้ใน Database

Instruction and Code

• Instruction : Project9 Instruction

Project 10 Basic MongoDB Aggregation Pipeline

การเปลี่ยนการ Query แบบการ Find แล้ว Populate มาเป็นการใช้ Aggregation Pipeline แทน

Instruction and Code

• Instruction : Project10 Instruction
• Code ตัวอย่าง : โฟลเดอร์ 10-Aggregation-Pipeline

Project 11 Create Pagination and Search Query

• Instruction : Project 11 Instruction
• Code ตัวอย่าง : โฟลเดอร์ 11 Pagination Search

Project 12 Integrate Redux to React

• Instruction : Project 12 Instruction
• Code ตัวอย่าง : โฟลเดอร์ 11 Pagination Search

Project 13 Full CRUD with React-Redux

Project 14 Visualize your data

Project 15 Reporting Your Document

Project 16 Protect Your Backend and Basic Concept of Authentication and Token

Project 17 Make Program Generalization (Advance 🔥)

Project 18 Your first Pivot Table (Advance 🔥)

Project 19 Mixing up the data structure (Advance 🔥)

Project 20 Upload Your Files (Advance 🔥)

Project 21 Import data from Excel and CSV file (Advance 🔥)

Project 22 Export your Excel or CSV file (Advance 🔥)

Project 23 Basic Deployment and Container Deployment

Project 24 Workflow Deployment and CI/CD

---

With 💖, Create at 2022-24 from Intelligent Automation Research Center & Intelligent Automation Engineering Center