Module 1: React กับ Typescript
- การขึ้นโปรเจ็กต์ React js ด้วย TypeScript
- รูปแบบไฟล์ที่สร้างในโปรเจ็กต์ด้วย TypeScript และการเรียกใช้งาน
- การปรับเปลี่ยนมาใช้ Typescript สำหรับโปรเจ็กต์ที่เขียนด้วย ES6
- สิ่งที่เปลี่ยนแปลงในการทำงานกับ Props ด้วย Typescript
- การเรียกใช้งาน State ใน TypeScript
- การใช้งาน Type Inference กับ State
- การใช้งาน Type Unions กับ State
Module 2: การใช้งาน TailwindCSS ร่วมกับ Styled-Components ใน ReactJs
- รู้จัก Styled-Components ใน React js
- ติดตั้ง Styled-Components
- การเรียกใช้งานใน Components
- การติดตั้ง TailwindCSS ใน React js
- การ Config เพื่อใช้งาน TailwindCSS ร่วมกับ Styled-Components
- ตัวอย่างการออกแบบ Template เว็บเพจด้วย TailwindCSS ร่วมกับ Styled-Components
Module 3: Backend with Strapi Headless CMS frameworks
- Strapi Quickstart, build a quick blog
- Installation
- Build your first content type
- Set up the Post Collection Type in Strapi
- Update your Article content type
- Make Articles Public
- Use the /public folder to build a quick blog demo
Module 4: React Restful Web API with Strapi CMS frameworks (CRUD)
- Install Strapi and React
- Installing React Router Dom + Recap
- Set up React Router Dom to create Pages
- Create a new Page and set up Navigation
- Adding image upload to the Create Form
- Simple frontend validation
- Backend Validation
- Error Handling in the Frontend
- JWT validation
Module 5: React with Redux
- Understanding State
- The Complexity of Managing State
- Understanding the Redux Flow
- Setting Up Reducer and Store
- Dispatching Actions
- Adding Subscriptions
- Connecting React to Redux
- Connecting the Store to React
- Dispatching Actions from within the Component
- Passing and Retrieving Data with Action
- Adding Middleware
- Using the Redux Devtools
- Executing Asynchronous Code
- Introducing Action Creators
- Action Creators & Async Code
- Handling Asynchronous Code
- Restructuring Actions
- Using Utility Functions
Module 6: React JWT Authentication
- Create Services
- Authentication service
- Data service
- Create React Components for Authentication
- Form Validation overview
- Login Page
- Register Page
- Profile Page
- Create React Components for accessing Resources
- Home Page
- Role-based Pages
- Add Navbar and define Routes
- Add CSS style for React Components
- Configure Port for React JWT Auth Client with Web API
Module 7: React Hooks กับ Firebase CRUD
- What is firebase
- FireBase Connection with React
- Sending Data to firebase
- Retriving The Data from Firebase
- Modifying the retrived data from firebase
- FireBase CRUD Demo
- Designing AddUser component
- Sending User Data to firebase
- Retreving userslist from firebase
- FireBase CRUD Delete User
- Adding Sweetalert Animation
Module 8: React Firebase Authentication
- Firebase Authentication Demo
- Firebase Authentication - Design
- Firebase Authentication Implementation
Module 9: React Deployment
- Connecting to Online DB & Preparing for deploy
- Push project to GitHub
- Deploying Strapi CMS frameworks on Heroku
- Deploying React js on Heroku
- Deploying React js on Vercel
- Deploying React js on Firebase Web hosting