Library

Course: Learn React 16 And Redux By Building Real World Application

Learn React 16 And Redux By Building Real World Application

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

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 React
  • Data Flow in React
  • Component Lifecycle methods
  • Components and rendering list
  • React Context API
  • Working with Forms in React
  • Adding Routing using React-Router v4
  • State Management with Redux
  • Redux thunk and async actions
  • Integrating Firebase with React
  • Firebase Authentication

Who this course is for:

  • 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
Basic knowledge
  • Basic understanding of Javascript and HTML
  • ES6+ JavaScript knowledge is beneficial but not a must-have
What you will learn
  • Master the React Fundamentals
  • Build Real world Applications with React and Redux
  • Learn firebase with React and Redux


Curriculum
Number of Lectures: 74
Total Duration: 07:00:05
Getting Started
  • VS Code Setup  
  • How to get source code for each lecture  
  • Module Introduction  

    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

  • Create React App using create-react-app cli  

    In this video, You are going to learn how to create App using React App cli

  • Creating Elements in React  

    A React element is a light, stateless, immutable primitive in React. There are two types: ReactComponentElement and ReactDOMElement. React- DOMElements are virtual representations of DOM elements. ReactComponent- Elements reference either a function or a class corresponding to a React component. 

  • 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

  • How React uses React Elements to Create Virtual DOM  
  • 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."

  • 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.

  • What are Components in React  
  • Creating Components in React  

    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.

  • Adding Props Validations in React Component  

    As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like Flow or TypeScript to typecheck your whole application. But even if you don’t use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special propTypesproperty:

  • Create Nested Components in React  

    Nested components in React.js help you create more complex view element structures

  • 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!

  • 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.

  • Iterate Array and render the components  
  • Pass function as props from Parent to Child Component  

    Pass event handlers and other functions as props to child components:

    <button onClick={this.handleClick}>

    If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).

  • 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 

  • Module Summary  

    I will cover the basic summary of this module. What topics you have learned in this module

Data Flow in React Components
  • Introduction - Data Flow In React Components  

    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.

  • State in React Component  

    A state is an information available to a program at a given moment on time.

  • 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.

  • 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.


  • Communicate with Parent and Child Component  

    You can communicate from parent to child component via props. You can pass functions, objects and arrays inside the child components. Child component can access this data via props.

  • Module Summary - Data Flow In React Components  
Component LifeCycle Methods in React
  • 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.

  • 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. 

  • LifeCycle Mounting Methods in Action  

    Mounting is the process of React inserting a component into the DOM. 

  • 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. 

  • 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.

Hacker news App - Building Components
  • Setup React Application  

    In this video, we will create React Application using create-react-app cli.

  • Add Bootstrap to React Application  

    In this video, I am going to add bootstrap in React Project.

  • Create Mock Restful API with Json-Server  

    A common task for front-end developers is to simulate a backend REST service to deliver some data in JSONformat to the front-end application and make sure everything is working as expected. ... JSON Server is a simple project that helps you to setup a REST API with CRUD operations very fast.

  • Send HTTP Request 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
  • Iterate Array and render the Building components  

    In this video, we will iterate the links array and render the Link component for each array element

  • Add Bootstrap Card to render List Items  

    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.

  • Creating Header Component  

    In this video, we will create a header component. Inside the header component I will show you how to create navbar.

  • Error Handling with Custom ErrorMessage Component  

    We will create custom ErrorMessage component. If something went wrong react will render or display the text from ErrorMessage component

  • 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.

  • Deleting Link by ID  
React Context API
  • Introduction to React Context API  
  • 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.

  • 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.

  • 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.

  • 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.

Working with Forms in React
  • Creating Controlled Component  

    An input form element whose value is controlled by React in this way is called a “controlled component”.

  • Adding State to the Form  

    In this video, we will add state to the add link form. 

  • 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.

  • Creating Reusable Component for Input FormControl  

    In this video, we will create a separate reusable component for input form control. Now you can use this form control in any component.

  • 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.

Add Routing in React using React-Router
  • 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.

  • Redirect after submitted new Record  

    ReactRouter provides a push method from the history class. You can access the push method from this.props.history.push. It will allow you to navigate to specific path.

  • 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.

  • Creating new Component to Edit the Record  

    In this video, we will create a separate component for edit record.

State Management with Redux
  • Setting up Redux into React application  

    In this video, we will setup redux into our demo application.

  • 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

  • Delete the Record from the ReduxStore  

    In this video, we will create a delete action to delete the record from the array.

  • Add Record to ReduxStore  

    In this video, we will create an add action to create new record in Redux Store.

Consuming Http Rest API using Async Action Creators
  • 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.

  • 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

  • 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

  • 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.

  • 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.

Integrating React and Redux with Firebase
  • Creating Database on Firebase  
  • Fetching data from firebase collection in react component  
  • Delete document from firebase collection with react  

    I will show you how to delete the document from firebase collection inside React component.

  • Add document in firebase collection with react  
  • Update document from firebase collection  

    In this video, I will show you how to edit the record from the firebase collection.

Firebase Authentication with React and Redux
  • 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.

  • Logout User  

    In this lesson, we will implement the logout feature.

  • User Login with Firebase and React  

    In this lesson, we will implement the firebase login.

  • 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.

  • Display error notification in React  

    I will show you display toaster message in react application.

  • Deploy React Application to Firebase  

    In this video, we will deploy the React application to firebase.

Reviews (0)