React Web Development || Become a React Developer

Course Curriculum

Chapter 1: Introduction

Lecture 1: What Make This Course Unique?

Lecture 2: What and Why React?

Lecture 3: How and Where React?

Lecture 4: What Should I Learn (important) ?

Chapter 2: Es6 Guide

Lecture 1: Intro

Lecture 2: install create react app

Lecture 3: generate our first project

Lecture 4: general overview on the project

Lecture 5: let and const

Lecture 6: arrow function

Lecture 7: import and export part 1

Lecture 8: import and export part 2

Lecture 9: render content in the web browser

Lecture 10: array methods map

Lecture 11: array methods filter

Lecture 12: array methods find

Lecture 13: objects in es6

Lecture 14: arrays and objects in one example

Lecture 15: template literals

Lecture 16: the ternary operator

Lecture 17: task to finish

Lecture 18: spread in ES6

Lecture 19: rest in ES6

Lecture 20: Next Steps After ES6

Chapter 3: Render List With React

Lecture 1: 00-what we are going to build and create our proejct

Lecture 2: 01-delete no need files

Lecture 3: 02-create the data that we want to show

Lecture 4: Note About The Data That we Created

Lecture 5: 03-create the main files for the app

Lecture 6: 04-reander content to the user

Lecture 7: 05-what extensions do I use

Lecture 8: 06-our first component

Lecture 9: 07-use our data that we create

Lecture 10: 08-redner jsx in the web browser

Lecture 11: 09-write some css code

Lecture 12: 10-add the courseItem component

Lecture 13: 11-uses props to pass data

Lecture 14: 12-show data and style the courseItem

Lecture 15: 13-add UX to the app

Lecture 16: 14-conditional rendering in react

Lecture 17: 15-final touchs and the next steps

Chapter 4: React Router in Real World Example

Lecture 1: 00-what we are going to build

Lecture 2: 01-add the needed markup

Lecture 3: 02-style the markup the we added

Lecture 4: 03-steps to follow when using react router

Lecture 5: 04-define some routes

Lecture 6: 05-the switch component

Lecture 7: 06-more about the exact

Lecture 8: 07-replace any a with a NavLink

Lecture 9: 08-different between Link and NavLink

Lecture 10: 09-control the url with the to

Lecture 11: 10-make the title as a Link

Lecture 12: 11-create the CourseDetaild component

Lecture 13: 12-pass paramters to the urls with react router

Lecture 14: 13-fetch the right course using thr id

Lecture 15: 14-add the html for the course details

Lecture 16: 15-style the course details

Lecture 17: 16-style the course details part 2

Lecture 18: 17-style the course details part 3

Lecture 19: 18-real examples about the react router

Chapter 5: React Forms Part 1

Lecture 1: 00-what we are going to build

Lecture 2: 01-intro to the state mamgment tools

Lecture 3: 02-our first class base component

Lecture 4: 03-the constructor function and the state

Lecture 5: 04-review our code

Lecture 6: 05-add the input markup

Lecture 7: 06-get the value from the input

Lecture 8: 07-control input and uncontroled input

Lecture 9: 08-filter courses

Lecture 10: 09-other way for filter with react

Lecture 11: 10-get the code back

Lecture 12: 11-conditional rending in react

Lecture 13: 12-sort courses demo

Lecture 14: 13-add the select input

Lecture 15: 14-get the value from the select input

Lecture 16: 15-sort function

Lecture 17: 16-more about lodash

Lecture 18: 17-style the select input

Lecture 19: 18-refactor our code part 1

Lecture 20: 19-refactor our code part 2

Chapter 6: React Forms Part 2

Lecture 1: 00-what we are going to build

Lecture 2: 01-why you should a package for form creation in react

Lecture 3: 02-what packages can I use

Lecture 4: 03-create the sign and the login component

Lecture 5: 04-our first step in formik

Lecture 6: 05-the Formik Component

Lecture 7: 06-the signup function

Lecture 8: 07-render input to the user

Lecture 9: 08-get the vlaues from the form

Lecture 10: 09-basic style to our form

Lecture 11: 10-review to formik code

Lecture 12: 11-start with Login

Lecture 13: 12-create a validation schema

Lecture 14: 13-the Formik Component