React JS Advanced (ขั้นสูง)

ภาพรวมหัวข้อการอบรม

• Module 1: React กับ Typescript
• Module 2: การใช้งาน TailwindCSS ร่วมกับ Styled-Components ใน ReactJs
• Module 3: Backend with Strapi Headless CMS frameworks
• Module 4: React Restful Web API with Strapi CMS frameworks (CRUD)
• Module 5: React with Redux
• Module 6: React JWT Authentication
• Module 7: React Hooks กับ Firebase CRUD
• Module 8: React Firebase Authentication
• Module 9: React Deployment

รายละเอียดหลักสูตร

Day 1

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

Day 2

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

Day 3

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

Day 4

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