• Course Outline and What This Course Will Cover

• Installing Visual Code

• Install React

• HTML & CSS & JavaScript in React

• NPM (node package manager)

• Creating React Project

• Exploring React files

• Mapping

• Object Destructuring

• Spread & React Operators

• Arrow Functions

• Flex Box

• Flex Grid

• Showing basics content

• React Component Layout

• JSX (JavaScript and XML)

• Printing JavaScript Variables in JSX

• Props System

• Applying Styling in JSX

• Customizing Elements with Props

• Module Systems Overview

• Working with Paths

• Imports and Exports

• Picturing the Movement of Data

• Parent-Child Components Concept

• How to work with Images

• Design component using style

• Design Directories/Files in a React Application

• Event system & Synthetic Events

• Variations on Event Handlers

• State System

• Understanding the Re-Rendering Process

• DOM & Virtual DOM

• Reconciliation and Diffing Algorithm

• Working with Lists

• Importance of using ‘key’ prop

• Hooks in essence

• Introduction to useState Hook

• Conditional Rendering

• Forms of using useState Hook 

• Introduction to Refs

• Introduction to useState Hook

• Targeting Elements with Refs

• Lifecycle Methods (Mounting, Updating, Unmounting)

• Introduction to useEffect Hook

• Asynchronous Programming

• Promises

• Handling Promises

• Async Await

• Using an API with React

• Overview of HTTP Requests

• Making an HTTP Request

• Fetch API & Axios

• Explain HTTP methods

• Explain some HTTP statuses

• CRUD Form

• Communicating With Props

• Validating Props with PropTypes

• Prop Drilling

• Parent to Child & Child to Parent communication

• Introduction to Context System

• Introduction to useContext hook

• Working with useContext in a Real Application

• Introduction to useReducer

• Working with useReducerin a Real Application

• Practicing Props and State Design

• useCallback Hook

• useMemo Hook

• Custom Hooks

• Classic Styling

• Style Component

• Tailwind

• React Router

• Lazy Loading

• Portals

Along the training path, we will have dozens of projects. The projects will be small and medium. At the end of the training we will build three more large projects that will include all the preliminary units learned along the way of the course in React JS

• Project #1

• Project #2

• Project #3

Minimum criteria:

1. Course Attendance - 80%

2.Final Project / Exam - 20%