All in One Offer! | Access Unlimited Courses in any category starting at just $29. Offer Ends in:

Browse Library

  • Business Solutions
  • Become an Instructor
  • 0
    Shopping Cart

    Your Cart is empty. Keep shopping to find a course!

    Browse Courses
Get Unlimited Learning Access
$29
8 days left at this price!
30-Day Money-Back Guarantee

This plan includes

  • Instant access to 11,000+ online courses
  • Play & Pause Course Videos
  • HD Video Recorded Lectures
  • Learn on Mobile/PC/Tablet
  • Quizzes and Real Projects
  • Lifetime Course Certificate
  • Instructor Chat Support
  • Cancel Plan Anytime
Subscribe to Learnfly’s top courses
Get this course, plus 11,000+ of our top-rated courses for one year with Go Annually Plan.
$348 $244 a year Save 30%
8 days left at this price!
Buy Now
30-Day Money-Back Guarantee

This plan includes

  • Instant access to 11,000+ online courses
  • Play & Pause Course Videos
  • HD Video Recorded Lectures
  • Learn on Mobile/PC/Tablet
  • Quizzes and Real Projects
  • Lifetime Course Certificate
  • Instructor Chat Support
  • Cancel Plan Anytime
$29
Buy Now
$244

What you'll learn?

  • 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

Course Overview

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.

See More

Pre-requisites

  • Basic understanding of Javascript and HTML ES6+
  • JavaScript knowledge is beneficial but not a must-have

Target Audience

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

Curriculum 74 Lectures 06:46:11

  • Section 1 : Getting Started 19 Lectures 01:26:39

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

Our learners work at

Frequently Asked Questions

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

Instructor

Haider Malik,

16986 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
View More...

More Courses By : Haider Malik

Student Reviews 4.6

  • Unmatched Variety and Value!
    Learnfly's monthly subscription offers unlimited access to a vast range of courses. Affordable pricing, compared to competitors, makes it the ultimate choice for continuous learning.
    Jessica M.

    4.7

    JM
  • Top-Notch Quality, Affordable Rates!
    High-quality courses with certified instructors make Learnfly stand out. The affordable pricing is a game-changer for those seeking premium education.
    Alex P.

    4.5

    AP
  • Certified Excellence Every Time!
    Learnfly's courses, taught by certified instructors, ensure top-notch learning experiences. The course completion certificates add significant value to one's skill set.
    Sarah R.

    4.3

    SR
  • Round-the-Clock Support!
    Learnfly goes the extra mile with 24/7 course support. Their dedication to helping students succeed is commendable.
    Ryan K.

    4.1

    RK
  • Learn Anywhere, Anytime!
    Whether on mobile, PC, or tablet, Learnfly's platform offers flexibility. Learning on the go has never been easier.
    Emily S.

    4.7

    ES
  • Job-Ready Skills!
    Learnfly's job-oriented courses equip learners with practical skills for the workplace. An investment in career growth!
    Jake M.

    4.2

    JM
  • Budget-Friendly Brilliance!
    Learnfly's pricing is a steal for the quality and variety of courses offered. Quality education without breaking the bank.
    Olivia T.

    4.5

    OT
  • Instructor Excellence Unleashed!
    Learn from the best with Learnfly's certified instructors. The platform ensures that knowledge is imparted by industry experts.
    Daniel L.

    4.0

    DL
  • Achievement Unlocked!
    Learnfly not only offers courses but also recognizes your efforts with course completion certificates. A sense of accomplishment with every course finished.
    Maya H.

    4.6

    MH
  • Learning Revolution!
    Learnfly's platform is a revolution in education. Access to unlimited courses at affordable rates is a game-changer.
    Ethan W.

    4.7

    EW

Students also bought

  • the-extreme-web-development-course

    The Extreme Web Development Course

    By : Paul Carlo Tordecilla

    Lectures 124 Beginner 4:26:22
  • develop-your-own-chrome-extension-firefox-plugin

    Develop your own Chrome Extension &...

    By : Harshit Srivastava

    Lectures 15 Beginner 2:1:54
  • the-ultimate-codeigniter-3-course

    The Ultimate Codeigniter 3 Course

    By : Paul Carlo Tordecilla

    Lectures 23 Beginner 2:17:35
  • superb-advance-javascript-become-javascript-professional

    Superb Advance Javascript - Become ...

    By : Paul Carlo Tordecilla

    Lectures 28 Beginner 1:28:39
  • application-development-with-ibm-watson

    Application development with IBM Wa...

    By : Harshit Srivastava

    Lectures 14 Intermedite 1:42:29
  • learning-mean-stack-by-building-real-world-application

    Learning MEAN Stack by Building Rea...

    By : Haider Malik

    Lectures 289 Beginner 14:12:12

Students learning on Learnfly works with Fortune 500 companies around the globe.

Sign Up & Start Learning
By signing up, you agree to our Terms of Use and Privacy Policy
Reset Password
Enter your email address and we'll send you a link to reset your password.