Modern Web Frontend with React (Next.js – App Router – Typescript)

The Modern Web Frontend with React (Next.js – App Router – Typescript) course is a learning experience focused on the basics of developing web applications using ReactJS, a JavaScript library used for building user interfaces. Participants will learn about the React structure, component creation, state management, API integration, and routing in web applications.

OBJECTIVES

• To provide participants with an understanding of the basics of ReactJS and web application development using React.
• To empower participants to create and manage various components in web applications using React.
• To enable participants to fetch data from APIs and manage the state of the application in the React framework.

WHO SHOULD ATTEND?

• Software developers looking to learn about ReactJS and web application development.
• Developers with experience in website development who seek to understand the usage of ReactJS.
• Individuals interested in learning how to create efficient web applications using ReactJS.

PREREQUISITES

• Participants in the course should have basic knowledge of programming with JavaScript.
• Participants in the course should also have fundamental knowledge of web application development.
• Participants should have a basic understanding of HTML, CSS and JavaScript to better grasp the content.
• Preparation of necessary development tools such as Node.js and npm (Node Package Manager) for building and managing React projects.
• Ability to use Command Line Interface (CLI) for creating React projects and managing dependencies using npm.
• A computer equipped with programming tools such as a Text Editor or Integrated Development Environment (IDE) suitable for React development.
• Enthusiasm for learning and collaborating with others during the course. Working with team members helps participants gain valuable experience through knowledge exchange and collaboration.

ALL PARTICIPANTS WILL RECEIVE

• Training manuals/documentation.
• Lunch and refreshments.
• Certification upon completion of the Modern Web Frontend with React (Next.js – App Router – Typescript) course.
• Excellent care and attention from instructors and staff.
• Unlimited attendance to the Modern Web Frontend with React (Next.js – App Router – Typescript) (limited to 5 repeat attendees per training session; if you wish to attend the workshop again, please contact our Facebook Page, Line, Email, or other channels to reserve your seat).
• If you are unable to attend the training session this time, you can reschedule your participation according to the training schedule.

OUTLINE

1. History of Web Frontend Development
   • The evolution of web application development before the separation of Backend and Frontend.
2. Pros and Cons
   • Advantages and disadvantages of developing web applications with separated Backend and Frontend.
3. System Architecture Overview
   • An overview of current web application design with Backend and Frontend separation, including case studies.
4. ECMAScript and TypeScript
   • Modern JavaScript writing and fundamentals of TypeScript.
5. What is React? And why Next.js?
   • Introduction to React and React-powered frameworks.
6. Workshop 1
   • Creating a Next.js app.
7. Project Structure
   • Introduction to the basic structure of Next.js.
8. HTML and JSX
   • What is JSX?
   • Differences and precautions between HTML tags and JSX.
9. Component Concept
   • Explanation of functions and various necessary roles in developing web applications with React
   • Creating components to separate frequently used parts
   • Component exporting and importing
   • Passing values to components (Component Props).
10. Workshop 2
    • My First Component.
11. Tailwind CSS
    • Introduction to basic usage of Tailwind CSS
12. Workshop 3
    • My Home Page.
13. State: A Component’s Memory
    • Explanation of useState function and basic usage.
14. Workshop 4
    • Carousel banner.
15. Reacting to Input with State
    • Using State with Input.
16. Workshop 5
    • Search box.
17. Sharing State Between Components
    • Explanation of using State with other components.
18. Workshop 6
    • Search results.
19. Next.js Routing
    • Explanation of creating Route Paths in various formats
    • Page and Layout structures
    • page navigation (Linking and Navigating).
20. Workshop 7
    • New search page.
21. Workshop 8
    • Products and Details.
22. Server Components and Client Components
    • Explanation of differences and usage of Server Components and Client Components
    • Case studies.
23. Next.js Data Fetching
    • Explanation of API calls
    • Creating and using Server Actions and Mutations
    • Using formData and useFormStatus.
24. Workshop 9
    • Register.
25. Authentication Flow
    • Explanation of the structure and principles of Authentication systems.
26. Workshop 10
    • Login.
27. Passing Data Deeply with Context
    • Explanation of principles, necessity, and management of complex
    • Case studies.
28. Workshop 11
    • My Profile.
29. Error Handling and Middleware
    • Explanation of Error Handling principles in the Next.js framework and Middleware operations
    • Case studies.
30. Workshop 12
    • Redirect when not logged in.
31. Scaling Up with Reducer and Context
    • Explanation of using Reducer and State Action with Context
    • Case studies.
32. Workshop 13
    • Add products to cart.
33. Synchronizing with Effects
    • Explanation of useEffect function and its usage in various formats.
34. Workshop 14
    • Checkout!
35. Workshop 15
    • Order History.
36. Environment Variables and Deploying
    • Explanation of Environment Variables usage and deployment in various formats.
37. Workshop 16
    • Hello World!