Learn React & Redux by Creating Real Apps Fast

Learn React 16 and Redux by building real world Application

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

Created by : Rated :4.9 8472 views

Last Updated: 2024-11-14 08:11:48 English Course Type: Self Learning

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.

Section 1 : Getting Started 19 Lectures 01:26:39
Lecture 1 :
Module Introduction Preview
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 6 Lectures 00:25:46
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 5 Lectures 00:27:55
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 9 Lectures 00:46:38
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 5 Lectures 00:35:12
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 5 Lectures 00:37:11
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 4 Lectures 00:20:24
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 4 Lectures 00:23:44
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 5 Lectures 00:22:44
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 5 Lectures 00:34:16
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 6 Lectures 00:45:42
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

How do i access the course after purchase?
It's simple. When you sign up, you'll immediately have unlimited viewing of thousands of expert courses, paths to guide your learning, tools to measure your skills and hands-on resources like exercise files. There’s no limit on what you can learn and you can cancel at any time.
Are these video based online self-learning courses?
Yes. All of the courses comes with online video based lectures created by certified instructors. Instructors have crafted these courses with a blend of high quality interactive videos, lectures, quizzes & real world projects to give you an indepth knowledge about the topic.
Can i play & pause the course as per my convenience?
Yes absolutely & thats one of the advantage of self-paced courses. You can anytime pause or resume the course & come back & forth from one lecture to another lecture, play the videos mulitple times & so on.
How do i contact the instructor for any doubts or questions?
Most of these courses have general questions & answers already covered within the course lectures. However, if you need any further help from the instructor, you can use the inbuilt Chat with Instructor option to send a message to an instructor & they will reply you within 24 hours. You can ask as many questions as you want.
Do i need a pc to access the course or can i do it on mobile & tablet as well?
Brilliant question? Isn't it? You can access the courses on any device like PC, Mobile, Tablet & even on a smart tv. For mobile & a tablet you can download the Learnfly android or an iOS app. If mobile app is not available in your country, you can access the course directly by visting our website, its fully mobile friendly.
Do i get any certificate for the courses?
Yes. Once you complete any course on our platform along with provided assessments by the instructor, you will be eligble to get certificate of course completion.
For how long can i access my course on the platform?
You require an active subscription to access courses on our platform. If your subscription is active, you can access any course on our platform with no restrictions.
Is there any free trial?
Currently, we do not offer any free trial.
Can i cancel anytime?
Yes, you can cancel your subscription at any time. Your subscription will auto-renew until you cancel, but why would you want to?

Haider Malik,

18840 Course Views

2 Courses

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