DEV Community

Aung Myat Moe
Aung Myat Moe

Posted on • Originally published at aungmyatmoe.me on

React JS Workshop

Course Duration

4 Days (Apr 12 to 15)

Day 1: Introduction to React

  • Introduction to React and its benefits
  • Setting up a development environment
  • JSX syntax and using it to create components
  • Creating and rendering components
  • Debugging React and Next.js apps using Chrome DevTools
  • Handling events in React
  • Props and state basics
  • Exercise: Create a simple React app with components and events

Day 2: Introduction to Next.js for Routing

  • Introduction to Next.js and its benefits
  • Setting up a development environment with Next.js
  • Creating pages in Next.js and using Next.js router
  • Dynamic routing in Next.js
  • Conditional rendering and user input with forms
  • Fetching data from an API in Next.js using fetch or axios
  • Displaying data from an API in your Next.js app
  • Exercise: Create a simple Next.js app with pages, router, and API integration

Day 3: Introduction to Context API

  • Introduction to Context API and its benefits
  • Creating a context provider and consuming it in components
  • Advanced usage of Context API, such as useContext hook and multiple contexts
  • Exercise: Create a React/Next.js app that uses Context API to manage state and implements advanced topics.

Day 4: Basic Setup and CRUD Operations

  • Introduction to the project and its features
  • Setting up a development environment with Next.js
  • Creating the login and signup pages with React and Next.js
  • Implementing basic form validation with React
  • Securing the application routes based on authentication status
  • Creating the homepage and posts page with React and Next.js
  • Creating a form for creating and editing posts with React
  • Implementing basic CRUD operations using React state and local storage
  • Displaying posts on the homepage and posts page
  • Exercise: Implement CRUD operations for posts with React state and display them on the homepage and posts page.

What’s next?

Why should you learn Vue?

Prerequisites

  1. HTML and CSS: Participants should have a good understanding of HTML and CSS.
  2. JavaScript fundamentals: Participants should have a solid foundation in JavaScript, including concepts like variables, data types, loops, functions, and objects.
  3. ES6 syntax: Familiarity with ES6 syntax would be helpful, as many of the features used in React, like arrow functions, destructuring, and template literals, are ES6 features.
  4. Git basics: Participants should have a basic understanding of Git and version control, as this will be used to manage code changes throughout the course.

Resources

Top comments (0)