Pixel Pioneers: Next.js and React Masterclass

last updated on: 19 Feb 2024, 02:00

Pixel Pioneers: Next.js and React Masterclass 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.

Pixel Pioneers: Next.js and React Masterclass

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 Pixel Pioneers: Next.js and React Masterclass course.
  • Excellent care and attention from instructors and staff.
  • Unlimited attendance to the Pixel Pioneers: Next.js and React Masterclass course (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.
DURATION
2 Days, 09:00 - 17:00
Public Training Schedule

Pixel Pioneers: Next.js and React Masterclass - 1/2564

7 Oct 2024

- 8 Oct 2024

02:00

- 10:00

Online

ENDED

Pixel Pioneers: Next.js and React Masterclass - 2/2564

2 Nov 2024

- 3 Nov 2024

02:00

- 10:00

Online

ENDED

Pixel Pioneers: Next.js and React Masterclass - 3/2568

26 Jul 2025

- 27 Jul 2025

02:00

- 10:00

COMING SOON

COMING SOON!
Special offer? Please contact us!
DKS
DKS - Connecting digital communities and tech enthusiasts. We facilitate collaboration, host joint events, and continuously update knowledge through community exchanges.
Follow us
Copyright © 2025. Made with ♥ by Gumon.io