Learn React 16 and Redux by building real world Application

Mastering React 16 Fundamentals, Context API, React-Router v4, Integrating

Instructed by Haider Malik

  • 1. Introduction to React
  • 2. Data Flow in React
  • 3. Component Life-cycle methods
  • 4. Components and rendering list
  • 5. React Context API
  • 6. Working with Forms in React
  • 7. Adding Routing using React-Router v4
  • 8. State Management with Redux
  • 9. Redux thunk and async actions
  • 10. Integrating Firebase with React
  • 11. Firebase Authentication

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.

  • Basic understanding of Javascript and HTML ES6+
  • JavaScript knowledge is beneficial but not a must-have
  • 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.
View More...

Section 1 : Getting Started

  • Lecture 1 :
  • In this lesson,I will introduce you the concepts that we are going to cover in this module. I will teach you all the basics or fundamentals of React in this course
  • Lecture 2 :
  • Create React App using create-react-app cli
  • In this video, You are going to learn how to create App using React App cli
  • Lecture 3 :
  • Create elements in react
  • A React element is a light, stateless, immutable primitive in React. There are two types: React Component Element and React DOM Element. React- DOM Elements are virtual representations of DOM elements. React Component- Elements reference either a function or a class corresponding to a React component.
  • Lecture 4 :
  • Creating Nested Elements in React
  • You can also create nested elements in React. React will use this.props.children to render the nested child element
  • Lecture 5 :
  • How React uses React Elements to Create Virtual DOM
  • Lecture 6 :
  • What is DOM?
  • The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
  • Lecture 7 :
  • What is Virtual DOM
  • You can think of the virtual DOM like a blueprint. It contains all the details needed to construct the DOM, but because it doesn't require all the heavyweight parts that go into a real DOM, it can be created and changed much more easily.
  • Lecture 8 :
  • What are Components in React
  • Lecture 9 :
  • Creating Components in React
  • A React component is basically any part of a UI that can contain React nodes (via React.createElement() or JSX). I spent a lot of time up front talking about React nodes so that the ingredients of a React component would be firmly understood.
  • Lecture 10 :
  • Adding props Validations in react component.
  • As your app grows, you can catch a lot of bugs with type checking. For some applications, you can use JavaScript extensions like Flow or Type Script to type check your whole application. But even if you don’t use those, React has some built-in type checking abilities. To run type checking on the props for a component, you can assign the special prop Types property:
  • Lecture 11 :
  • Creating Nested components in React
  • Nested components in React.js help you create more complex view element structures
  • Lecture 12 :
  • Create State in React Component
  • The heart of every React component is its “state”, an object that determines how that component renders & behaves. In other words, “state” is what allows you to create components that are dynamic and interactive. ... You've interacted with state-based systems your entire life — you just haven't realized it!
  • Lecture 13 :
  • Update State using events and custom methods
  • Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences: React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string.
  • Lecture 14 :
  • Iterate Array and render the components
  • Lecture 15 :
  • Pass function as props from Parent to Child Component
  • Pass event handlers and other functions as props to child components:
  • Lecture 16 :
  • Convert React Components to JSX
  • JSX is an extension of JavaScript that’s similar to XML and is only intended for use by code- transformation tools
  • Lecture 17 :
  • Module Summary
  • I will cover the basic summary of this module. What topics you have learned in this module
  • Lecture 18 :
  • Setup React Application
  • Lecture 19 :
  • Types and Phases of LifeCycle Methods

Section 2 : Data Flow in React Components

  • Lecture 1 :
  • Module Introduction
  • In this module you will learn about State and props in React. I will also explain you how to communicate with child components via props
  • Lecture 2 :
  • State in React Component
  • A state is an information available to a program at a given moment on time
  • Lecture 3 :
  • Shallow Merging with setState
  • setState() is the only legitimate way to update state after the initial state setup. React components can, and often do, have state. State can be anything, but think of things like whether a user is logged in or not and displaying the correct username based on which account is active. Or an array of blog posts. Or if a modal is open or not and which tab within it is active. React components with state render UI based on that state. When the state of components changes, so does the component UI.
  • Lecture 4 :
  • Use props, PropTypes and defaultProps in React Component
  • Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. In React props is short for properties. They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes. The primary purpose of props in React is to provide following component functionality: Pass custom data to your React component. Trigger "state" changes (more on this later). Use via this.props.reactProp inside component's render() method.
  • Lecture 5 :
  • Communicate with Parent and Child Component
  • Lecture 6 :
  • Module Summary

Section 3 : Component LifeCycle Methods in React

  • Lecture 1 :
  • What are LifeCycle Methods in React Component
  • The beauty of React is the splitting of complicated UI’s into little, bite-sized bits. Not only can we thus compartmentalize our app, we can also customize each compartment. Through lifecycle methods, we can then control what happens when each tiny section of your UI renders, updates, thinks about re-rendering, and then disappears entirely.
  • Lecture 2 :
  • Types and Phases of LifeCycle Methods
  • Lifecycle methods are special methods attached to class-based React components that will be executed at specific points in a component's lifecycle. A lifecycle is a way of thinking about a component. Lifecycle methods can be broken into two main groups: Will methods—Called right before something happens Did methods—Called right after something happens Components have four main parts of their lifecycle and corresponding lifecycle methods for each: Initialization—When a component class is being instantiated. Mounting—A component is being inserted into the DOM. Updating—A component is being updated with new data via state or props. Unmounting—A component is being removed from the DOM. Types and Phases of LifeCycle Methods
  • Lecture 3 :
  • LifeCycle Mounting Methods in Action
  • Mounting is the process of React inserting a component into the DOM.
  • Lecture 4 :
  • LifeCycle Updating Methods in Action
  • Updating lifecycle methods. When a component is being updated, several hooks fire that let you determine whether the component should be updated at all, how to update, and when the update is done.
  • Lecture 5 :
  • Error Handling with componentDidCatch
  • More recent versions of React introduced a new concept called error boundaries to help deal with this. If an uncaught exception is thrown within a component’s con- structor, render, or lifecycle methods, React will unmount the component and its children from the DOM

Section 4 : Hacker news App - Building Components

  • Lecture 1 :
  • Setup React Application
  • In this video, we will create React Application using create-react-app cli
  • Lecture 2 :
  • Add Bootstrap to React Application
  • In this video, I am going to add bootstrap in React Project
  • Lecture 3 :
  • Create Mock Restful API with Json-Server
  • Lecture 4 :
  • Send HTTP Requested in React using axios
  • Promise based HTTP client for the browser and node.js Features Make XMLHttpRequests from the browser Make http requests from node.js Supports the Promise API Intercept request and response Transform request and response data Cancel requests Automatic transforms for JSON data Client side support for protecting against XSRF
  • Lecture 5 :
  • Iterate Array and render the components
  • In this video, we will iterate the links array and render the Link component for each array element
  • Lecture 6 :
  • Add Bootstrap Card to render List Items
  • A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
  • Lecture 7 :
  • Creating Header Component
  • In this video, we will create a header component. Inside the header component I will show you how to create navbar
  • Lecture 8 :
  • Error Handling with Custom ErrorMessage Component
  • We will create custom Error Message component. If something went wrong react will render or display the text from Error Message component
  • Lecture 9 :
  • Adding Loading Spinner
  • In this video, I will show you how to create loader in react. We will use third party package for Loader component

Section 5 : React Context API

  • Lecture 1 :
  • Introduction to React Context API
  • Context provides a way to pass data through the component tree without having to pass props down manually at every level. In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
  • Lecture 2 :
  • React Context API in Action
  • Context provides a way to pass data through the component tree without having to pass props down manually at every level. In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
  • Lecture 3 :
  • Create Reducer to update the State in React Context
  • Reducers specify how the application's state changes in response to actions sent to the store. Remember that actions only describe what happened, but don't describe how the application's state changes.
  • Lecture 4 :
  • Refactoring Context Code to Store
  • In this video, We will refactor our code to store folder. I will place action_types, reducers and context.js in a separate folder
  • Lecture 5 :
  • Create new Action to Handle Errors
  • I will also show you how to handle Errors in Context API . we will create a new action to handle errors and dispatch the action if something went wrong

Section 6 : Working with Forms in React

  • Lecture 1 :
  • Creating Controlled Component
  • An input form element whose value is controlled by React in this way is called a “controlled component”
  • Lecture 2 :
  • Adding State to the Form
  • In this video, we will add state to the add link form.
  • Lecture 3 :
  • Save new record by sending Http Request
  • In this video, you will learn how to send the http post request from the react component to save the record
  • Lecture 4 :
  • Creating Reusable Component for Input Form Control
  • In this video, we will create a separate reusable component for input form control. Now you can use this form control in any component
  • Lecture 5 :
  • Adding Form Validations in React and Bootstrap
  • In this video, you will learn how to validate the form in React. We will use some bootstrap classes for displaying errors and validations. I will also use external package classnames for handling validations

Section 7 : Add Routing in React using React-Router

  • Lecture 1 :
  • Add Link Navigations using React-Router
  • React Router is the standard routing library for React. From the docs: “React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in
  • Lecture 2 :
  • Redirect after submitted new Record
  • Lecture 3 :
  • Creating NotFound Component
  • In this video, we will create a not found component. If you user will try to access the invalid path or url then our application loads the NotFound Component
  • Lecture 4 :
  • Creating new Component to Edit the Record
  • In this video, we will create a separate component for edit record.

Section 8 : State Management with Redux

  • Lecture 1 :
  • Setting up Redux into React application
  • In this video, we will setup redux into our demo application.
  • Lecture 2 :
  • Connect React Component to Redux
  • In this video, I will show you how to connect react application to redux. we will use react-redux package to connect with React component
  • Lecture 3 :
  • Delete the Record from the ReduxStore
  • In this video, we will create a delete action to delete the record from the array
  • Lecture 4 :
  • Add Record to ReduxStore
  • In this video, we will create an add action to create new record in Redux Store

Section 9 : Consuming Http Rest API using Async Action Creators

  • Lecture 1 :
  • Create Async Action to fetch records from the API
  • The standard way to do it with Redux is to use the Redux Thunk middleware. It comes in a separate package called redux-thunk. We'll explain how middleware works in general later; for now, there is just one important thing you need to know: by using this specific middleware, an action creator can return a function instead of an action object. This way, the action creator becomes a thunk. When an action creator returns a function, that function will get executed by the Redux Thunk middleware. This function doesn't need to be pure; it is thus allowed to have side effects, including executing asynchronous API calls. The function can also dispatch actions—like those synchronous actions we defined earlier.
  • Lecture 2 :
  • Create Async Action to delete records from the API
  • In this video, we will create async action to delete the records from the Rest API
  • Lecture 3 :
  • Create Async Action to add new Record
  • In this section, we will create an async action creator in redux to add the data to the API
  • Lecture 4 :
  • Async Action to fetch single record
  • In this section, we will create an async action creator in redux to fetch the data from the API
  • Lecture 5 :
  • Async Action to update the Link
  • In this section, we will create an async action creator in redux to update the data from the API

Section 10 : Integrating React and Redux with Firebase

  • Lecture 1 :
  • Creating Database on Firebase
  • Lecture 2 :
  • Fetching data from firebase collection in react component
  • Lecture 3 :
  • Delete document from firebase collection with react
  • I will show you how to delete the document from firebase collection inside React component
  • Lecture 4 :
  • Add document in firebase collection with react
  • We will delete the record from the firebase collection in react and redux
  • Lecture 5 :
  • Update document from firebase collection
  • In this video, I will show you how to edit the record from the firebase collection

Section 11 : Firebase Authentication with React and Redux

  • Lecture 1 :
  • User Registration in React and Firebase
  • In this video, we will implement the signup feature. An authenticated user can create, delete and update the links
  • Lecture 2 :
  • Logout User
  • In this lesson, we will implement the logout feature
  • Lecture 3 :
  • User Login with Firebase and React
  • In this lesson, we will implement the firebase login
  • Lecture 4 :
  • Apply Authentication on private Routes
  • In this lesson, we will protect private route in react application. I will use firebase-auth-wrapper package to apply security on routes
  • Lecture 5 :
  • Display error notification in React
  • I will show you display toaster message in react application
  • Lecture 6 :
  • Deploy React Application to Firebase
  • In this video, we will deploy the React application to firebase

Haider Malik,

Fullstack Javascript developer and Instructor Haider Malik is the founder of fullstackhour. He is a full-stack Javascript developer. He is passionate about everything JavaScript, and he loves exploring new libraries. He’s had extensive experience developing software and working with teams to improve how software is developed to meet business objectives.Although his primary focus is on outcomes, implementation often includes technical competency
View More...

Getting started with coding

By : Devansh Varshney

Lecture 27

$14

The Extreme Web Development Course

By : Paul Carlo Tordecilla

Lecture 124

$18

Superb Python Course - Become Certi...

By : Paul Carlo Tordecilla

Lecture 91

$18

Superb Advance Javascript - Become ...

By : Paul Carlo Tordecilla

Lecture 28

$14

Application development with IBM Wa...

By : Harshit Srivastava

Lecture 14

Free

Python for Beginners : A Python Meg...

By : Vijay Gadhave

Lecture 39

$14

Need any help with the platform? Contact us at: support@learnfly.com