ReactJs 2018, the complete guide with real world projects

Become job ready by building real world projects using the most popular frontend framework

What Will I Learn?
Build and deploy real world and robust client side applications
The ReactJS Framework
Standards of building world class applications
Modern Javascript development (ES8)

Requirements
Understand the basics of building websites with HTML, CSS & Javascript

Description
ReactJS is one of the most in-demand javascript frameworks, and its popularity keeps rising as more companies begin to adopt it. . It keeps getting popular, and there's no better time to add it to your portfolio. This course is the cumulation of everything you need to become a professional React developer.

Redux is a state management library and is very popular in the world of frontend development. In this course, you'll not just learn how to use Redux independently with vanilla Javascript, but you'll master the art of using this state management library hand in hand with React.

This course starts from the very basics, explaining exactly what React and Redux are, when and how to use it. The problem with most of the React community is lack of understanding of the fundamental principles. This course focuses on providing a very deep understanding of React and Redux.

Thereafter, we'll go all the way from basic to advanced. We'll not just scratch the surface but dive deeply into React as well as popular libraries like React Router, and Redux Thunk.

By the end of the course, you'll be able to build almost any sort of single page application.

What will you build?
This course uses a project driven approach, which means you will learn by doing. In every single lesson, you'll learn something new, while building on real-world projects. 

Customisable copyrighting component with ReactJS
Basic number counter component with ReactJS
Complete todos manager application with ReactJS
Alert customisable components with Higher order components (ReactJS)
Complete full-stack blog with ReactJS
A todos application with redux and vanilla javascript
Forum application with ReactJS and Redux
What should you bring to succeed in this course?

A basic understanding of HTML, CSS, and Javascript are required to succeed in this course.

What will you learn?

You'll learn:

How to build an deploy real-world applications with React and Redux
Frontend state management with redux
Single page application routing with React router.
Asynchronous server communication in React / Redux applications using redux thunk.
Debugging React / Redux applications
Building powerful, fast and user-friendly reactive web applications.
Who was this course built for?

This course is for you if:

You're just getting started with frontend / Javascript development and only JS basics set (No prior knowledge of ReactJS or any other frontend framework is required)
You know the basics of React and want to five deeper
You want to understand how ReactJS works with Redux
You want to build a portfolio with numerous ReactJS projects
PS: More lessons to be uploaded in the following days for the React-Redux-Forum

Who is the target audience?
Beginner/Intermediate javascript developers willing to become experts
Beginner developers willing to become frontend developers
Developers who want to get jobs at leading tech companies like Netflix / Facebook / Slack using the technologies taught in this course
Developers who want to learn how to build and deploy robust client side web applications
ReactJS developers willing to build projects and add to their portfolios
ReactJS developer who want to learn advanced concepts and improve on their skills

Course content

How to get the source code for each project.

Introduction

Creating first react element

Introduction to JSX

Creating react components

Styling JSX

Customising components with props

Mounting components in components

Introducing react class components

The basics of event handling

Introduction to component state

Changing component state

Understanding state and rendering in react js

Introducing conditional rendering in react applications

Setting up a webpack project from scratch

Installing webpack

Installing babel compiler

Setup development server

Install react and react dom

Build a complete CRUD application with ReactJS

Install CREATE REACT APP

Understanding how the default app works

Setting up our todos list

Displaying list items in react

Array keys in reactjs

Two way binding in react js

Creating todos

Deleting todos

Updating todos

Updating todos II

Updating todos III

Fix add todo bug

Refactoring to List-item component

Adding alert notifications

Disabling button conditionally

Creating mock api online

Installing axios

Introducing life cycle hooks

Creating todos on api

Deleting todos

Updating todos

Add loading state to app

Deploy application to netlify

Routing react applications with React Router 4

Initial install

Setting up react router

Navigating pages with react router Link component

Structuring our blog template

Migrating static html to react app

The footer component

The article component

The create article component

Refactoring banner component

The login component

Single article component

Clean up

–

A deeper understanding: React concepts and design patterns

Reusable UI components

When props are not the best choice (change this title)

Component prop types

Stateful and stateless components

Child to parent component communication

Higher order components

–

Build a full stack Blog with ReactJS

Hide navbar and footer on auth pages

User registration

Basic user validation

User password confirmation

Displaying validation errors

Customising error messages

Making api requests to server

User login sessions

Single state source in react applications

Updating authenticated user state after sign up

Refactoring sign up component

Refactoring sign up component II

Refactoring sign up component III

Refactoring sign up component IV

Introducing Eslint

Installing babel-eslint-parser

The login component

Logging in users

Login cleanup

The create article component

Displaying categories list

Uploading image to cloudinary

Creating article to api

Displaying create article validation errors

Displaying a list of articles

Paginating article results

Displaying single article

Optimising for better performance

Securing authenticated endpoints

Redirect if authenticated

Display auth user articles

Deleting articles

Editing articles

Editing articles 2

Editing articles 3

Fix update article bug

User logout functionality

Adding toast notifications

Cleaning up proptype errors

Installing a wysiwyg editor

Rendering HTML in react

Deploying to heroku

Pending features

–

STATE MANAGEMENT WITH REDUX

Introducing redux

Creating first redux store

Dispatching actions

Subscribing to redux state

Simple todo app with redux

Introducing action creators

Redux middleware

–

Build a complete forum with REACT-REDUX

Setup application

Installing redux and creating first store

Redux dev tools

Introduction to the connect api

Dispatching actions from components

Introducing asynchronous action creators

Displaying channels

Saving threads to redux store

Handling GET_THREADS action in reducer

Introducing combined reducers

Displaying threads on home screen

Paginating threads

Handling component loading state with redux

Implementing loading state for channels

Refactoring to thread component

Display single thread

Rendering single thread

The thread replies

Displaying replies

Introduction to redux form

Handle login functionality

Authentication with redux store

Display auth user data

Download code as zip

1. Chapter 1

Introduction

Creating first react element

Introduction to JSX

Creating react components

Styling JSX

Customising components with props

Mounting components in components

Introducing react class components

The basics of event handling

Introduction to component state

Changing component state

Understanding state and rendering in react js

Introducing conditional rendering in react applications

Setting up a webpack project from scratch

Installing webpack

Installing babel compiler

Setup development server

Install react and react dom

2. Introduction

3. Setting up a webpack project from scratch

Build a complete CRUD application with ReactJS

Install CREATE REACT APP

Understanding how the default app works

Setting up our todos list

Displaying list items in react

Array keys in reactjs

Two way binding in react js

Creating todos

Deleting todos

Updating todos

Updating todos II

Updating todos III

Fix add todo bug

Refactoring to List-item component

Adding alert notifications

Disabling button conditionally

Creating mock api online

Installing axios

Introducing life cycle hooks

Creating todos on api

Deleting todos

Updating todos

Add loading state to app

Deploy application to netlify

4. Build a complete CRUD application with ReactJS

Routing react applications with React Router 4

Initial install

Setting up react router

Navigating pages with react router Link component

Structuring our blog template

Migrating static html to react app

The footer component

The article component

The create article component

Refactoring banner component

The login component

Single article component

Clean up

–

5. Routing react applications with React Router 4

A deeper understanding: React concepts and design patterns

Reusable UI components

When props are not the best choice (change this title)

Component prop types

Stateful and stateless components

Child to parent component communication

Higher order components

–

6. A deeper understanding React concepts and design patterns

Build a full stack Blog with ReactJS

Hide navbar and footer on auth pages

User registration

Basic user validation

User password confirmation

Displaying validation errors

Customising error messages

Making api requests to server

User login sessions

Single state source in react applications

Updating authenticated user state after sign up

Refactoring sign up component

Refactoring sign up component II

Refactoring sign up component III

Refactoring sign up component IV

Introducing Eslint

Installing babel-eslint-parser

The login component

Logging in users

Login cleanup

The create article component

Displaying categories list

Uploading image to cloudinary

Creating article to api

Displaying create article validation errors

Displaying a list of articles

Paginating article results

Displaying single article

Optimising for better performance

Securing authenticated endpoints

Redirect if authenticated

Display auth user articles

Deleting articles

Editing articles

Editing articles 2

Editing articles 3

Fix update article bug

User logout functionality

Adding toast notifications

Cleaning up proptype errors

Installing a wysiwyg editor

Rendering HTML in react

Deploying to heroku

Pending features

–

7. Build a full stack Blog with ReactJS

STATE MANAGEMENT WITH REDUX

Introducing redux

Creating first redux store

Dispatching actions

Subscribing to redux state

Simple todo app with redux

Introducing action creators

Redux middleware

–

8. STATE MANAGEMENT WITH REDUX

Build a complete forum with REACT-REDUX

Setup application

Installing redux and creating first store

Redux dev tools

Introduction to the connect api

Dispatching actions from components

Introducing asynchronous action creators

Displaying channels

Saving threads to redux store

Handling GET_THREADS action in reducer

Introducing combined reducers

Displaying threads on home screen

Paginating threads

Handling component loading state with redux

Implementing loading state for channels

Refactoring to thread component

Display single thread

Rendering single thread

The thread replies

Displaying replies

Introduction to redux form

Handle login functionality

Authentication with redux store

Display auth user data

9. Build a complete forum with REACT-REDUX