Learn React 16 And Redux By Building Real World Application

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


Homepage