Learn React 16 And Redux By Building Real World Application

Mastering React 16 Fundamentals, Context API, React-Router v4, Integrating Firebase with React and Redux, Authentication

What you'll learn

Master the React Fundamentals

Build Real world Applications with React and Redux

Learn firebase with React and Redux

Requirements

Basic understanding of Javascript and HTML

ES6+ JavaScript knowledge is beneficial but not a must-have

Description

React is a JavaScript library for building user interfaces across a variety of platforms. React gives you a powerful mental model to work with and helps you build user inter- faces in a declarative and component-driven way.Who this course for? This course is for anyone who’s working on or interested in building user interfaces. Really, it’s is for anyone who’s curious about React, even if you don’t work in UI engineering. You’ll get the most out of this course if you have some experience with using JavaScript to build front-end applications.Advantages of React: The following list highlights some of the benefits of React versus other libraries and frameworks:  Simpler apps—React has a CBA with pure JavaScript; a declarative style; and pow- erful, developer-friendly DOM abstractions (and not just DOM, but also iOS, Android, and so on).  Fast UIs—React provides outstanding performance thanks to its virtual DOM and smart-reconciliation algorithm, which, as a side benefit, lets you perform testing without spinning up (starting) a headless browser.  Less code to write—React’s great community and vast ecosystem of components provide developers with a variety of libraries and components. This is important when you’re considering what framework to use for development. What you will learn in this course:Introduction to ReactData Flow in ReactComponent Lifecycle methodsComponents and rendering listReact Context APIWorking with Forms in ReactAdding Routing using React-Router v4State Management with ReduxRedux thunk and async actionsIntegrating Firebase with ReactFirebase Authentication

Overview

Section 1: Getting Started

Lecture 1 Installing Tools

Lecture 2 VS Code Setup

Lecture 3 How to get source code for each lecture

Lecture 4 Module Introduction

Lecture 5 Create React App using create-react-app cli

Lecture 6 Creating Elements in React

Lecture 7 Creating Nested Elements in React

Lecture 8 How React uses React Elements to Create Virtual DOM

Lecture 9 What is DOM

Lecture 10 What is Virtual DOM

Lecture 11 What are Components in React

Lecture 12 Creating Components in React

Lecture 13 Adding Props Validations in React Component

Lecture 14 Create Nested Components in React

Lecture 15 Create State in React Component

Lecture 16 Update State using events and custom methods

Lecture 17 Iterate Array and render the components

Lecture 18 Pass function as props from Parent to Child Component

Lecture 19 Convert React Components to JSX

Lecture 20 Module Summary

Section 2: Data Flow in React Components

Lecture 21 Module Introduction

Lecture 22 State in React Component

Lecture 23 Shallow Merging with setState

Lecture 24 Use props, PropTypes and defaultProps in React Component

Lecture 25 Communicate with Parent and Child Component

Lecture 26 Module Summary

Section 3: Component LifeCycle Methods in React

Lecture 27 What are LifeCycle Methods in React Component

Lecture 28 Types and Phases of LifeCycle Methods

Lecture 29 LifeCycle Mounting Methods in Action

Lecture 30 LifeCycle Updating Methods in Action

Lecture 31 Error Handling with componentDidCatch

Section 4: Hacker news App - Building Components

Lecture 32 Setup React Application

Lecture 33 Add Bootstrap to React Application

Lecture 34 Create Mock Restful API with Json-Server

Lecture 35 Send HTTP Request in React using axios

Lecture 36 Iterate Array and render the components

Lecture 37 Add Bootstrap Card to render List Items

Lecture 38 Creating Header Component

Lecture 39 Error Handling with Custom ErrorMessage Component

Lecture 40 Adding Loading Spinner

Section 5: React Context API

Lecture 41 Introduction to React Context API

Lecture 42 React Context API in Action

Lecture 43 Create Reducer to update the State in React Context

Lecture 44 Refactoring Context Code to Store

Lecture 45 Create new Action to Handle Errors

Section 6: Working with Forms in React

Lecture 46 What is controlled component

Lecture 47 Creating Controlled Component

Lecture 48 Adding State to the Form

Lecture 49 Save new record by sending Http Request

Lecture 50 Creating Reusable Component for Input FormControl

Lecture 51 Adding Form Validations in React and Bootstrap

Section 7: Add Routing in React using React-Router

Lecture 52 Add Link Navigations using React-Router

Lecture 53 Redirect after submitted new Record

Lecture 54 Creating NotFound Component

Lecture 55 Creating new Component to Edit the Record

Section 8: State Management with Redux

Lecture 56 What is Redux

Lecture 57 What are Actions

Lecture 58 What is Reducer

Lecture 59 What is a Redux Store

Lecture 60 Data Flow in Redux

Lecture 61 Setting up Redux into React application

Lecture 62 Connect React Component to Redux

Lecture 63 Delete the Record from the ReduxStore

Lecture 64 Add Record to ReduxStore

Section 9: Consuming Http Rest API using Async Action Creators

Lecture 65 Create Async Action to fetch records from the API

Lecture 66 Create Async Action to delete records from the API

Lecture 67 Create Async Action to add new Record

Lecture 68 Async Action to fetch single record

Lecture 69 Async Action to update the Link

Section 10: Integrating React and Redux with Firebase

Lecture 70 Creating Database on Firebase

Lecture 71 Fetching data from firebase collection in react component

Lecture 72 Delete document from firebase collection with react

Lecture 73 Add document in firebase collection with react

Lecture 74 Update document from firebase collection

Section 11: Firebase Authentication with React and Redux

Lecture 75 User Registration in React and Firebase

Lecture 76 Logout User

Lecture 77 User Login with Firebase and React

Lecture 78 Apply Authentication on private Routes

Lecture 79 Display error notification in React

Lecture 80 Deploy React Application to Firebase

Lecture 81 Challenge-Excercise

Section 12: Bonus: ES6 crash course

Lecture 82 var scoping

Lecture 83 understanding let

Lecture 84 Examples of const

Lecture 85 More use cases of let and const

Lecture 86 Introduction to Arrow functions

Lecture 87 Examples on Arrow functions

Lecture 88 Javascript call, bind, apply

Lecture 89 Destructring Objects

Lecture 90 Destructring Arrays

Lecture 91 Destructring Function Arguments

Lecture 92 Build Full-Stack Apps with GraphQL, Prisma, Node and React

Lecture 93 Learn GraphQL from beginner to Advanced concepts

Section 13: Learning Path to Become a FullStack Developer

Lecture 94 Learning Path to become a full-stack developer

Javascript developers who want to develop frontend applications with React,Javascript developers who want to learn Redux with React,Developers who want to integrate firebase with React and redux