Learn React JS from scratch: Create hands on projects

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: What is the DOM

Lecture 3: What is React

Lecture 4: Who is using React

Lecture 5: What is ReactDOM

Lecture 6: React Virtual DOM

Lecture 7: React VirtualDom Vs Real DOM

Lecture 8: React RapidDom Rendering

Lecture 9: React developer tools

Lecture 10: Introduction to JSBIN

Lecture 11: Arrow Functions

Lecture 12: Const Keyword

Lecture 13: Conditional Rendering

Chapter 2: Setting Up a local development environment

Lecture 1: What is Nodejs

Lecture 2: Downloading and Installing node

Lecture 3: What is npm

Lecture 4: SublimeText Editor

Lecture 5: What is Git

Lecture 6: Installing git

Lecture 7: Using git help

Lecture 8: Git Configuration

Lecture 9: Installing create-react-app

Lecture 10: Create a react app

Lecture 11: New folder structure

Lecture 12: Rendering

Chapter 3: Getting Started

Lecture 1: What is a contructor

Lecture 2: What is a class

Lecture 3: What is Babel

Lecture 4: Setting up access top React via CDN

Lecture 5: Accessing React Library

Lecture 6: Introduction to JSX

Lecture 7: What is JSX

Lecture 8: JSX Syntax

Lecture 9: Using JSX as an Expression

Lecture 10: Embedding expressions in JSX

Lecture 11: Using child elements in JSX

Lecture 12: Nesting JSX Elements

Lecture 13: Adding comments to JSX code

Lecture 14: React Components

Lecture 15: React Components Part 2

Lecture 16: How to create a React component

Lecture 17: Creating a React Component Part 2

Lecture 18: Create Component with ES6

Lecture 19: Creating a React component in ES6 Part 2

Lecture 20: Create stateless functional components

Lecture 21: Converting a function to ES6 Class

Lecture 22: Adding a state to a class

Lecture 23: Component life cycle

Chapter 4: Props and State

Lecture 1: Props

Lecture 2: Using Props with components

Lecture 3: Props with children

Lecture 4: Prop Types

Lecture 5: What is a state

Lecture 6: Using state part 1

Lecture 7: using state part 2

Lecture 8: Refs

Lecture 9: Handling Events part 1

Lecture 10: Handling Events Part 2

Lecture 11: Handling events

Chapter 5: Project 1 :Create a chat app with database storage

Lecture 1: Project intro: what we will create

Lecture 2: Create project directory

Lecture 3: Initialize npm

Lecture 4: Setting up your development environment

Lecture 5: Installing basic modules

Lecture 6: Installing Babel modules

Lecture 7: Creating files and directory

Lecture 8: Configuration of webpack file

Lecture 9: Creating the basic parts for the app

Lecture 10: Creating the chat component

Lecture 11: Adding react code to the chat component -part 1

Lecture 12: Adding react code to the chat component -part 2

Lecture 13: Activating the input and submit

Lecture 14: Setting up a firebase project

Lecture 15: Sublime text babel syntax view

Chapter 6: Project 2: Creating a countdown timer

Lecture 1: Creating a new react app

Lecture 2: Creating the component part 1

Lecture 3: Creating the component part 2

Lecture 4: Styling the component

Chapter 7: Project 3: Create a digital clock

Lecture 1: Creating a new react app project

Lecture 2: Creating an ES6 component part 1

Lecture 3: Creating an ES6 component part 2

Chapter 8: Project 4: Creating a Mortgage Calculator

Lecture 1: Create a new react app project

Lecture 2: Creating the component part 1

Lecture 3: Creating the component part 2

Lecture 4: Creating the component part 3

Chapter 9: Project 5: Static TweetBox

Lecture 1: Sketching out your project

Lecture 2: Creating a new react project

Lecture 3: Exploring project files and folders

Lecture 4: Modifying files

Lecture 5: Creating avatar component

Lecture 6: Creating more components