Complete React Developer
in 2022:
Zero to Mastery

4.7 (200 reviews)

Master React and Redux with React Router, Webpack, and Create-React-App.
Includes Hooks!


2,983 enrolled on this course
Complete React Course

Duration

4 Months

Assignments

Daily

Courses

Both Online & Offline

Course Fee

See Prices

Overview

React is a JavaScript library for building user interfaces. React is used to build single-page applications. React allows us to create reusable UI components.

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies

React can be used as a base in the development of single-page, mobile, or server-rendered applications with frameworks like Next.js. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.

overview-img
overview-img

What you'll learn

  • Be able to Code in React professionally
  • Create a portfolio of 100 React projects to apply for developer jobs
  • Be able to use React for Web development and App development
  • Build Reusable UI Components with React
  • Master React by building 100 projects over 100 days.
  • Be able to build fully fledged websites and web apps with React

    • Our Instructor

    Chandrapal Singh Deora

    Co-Founder at Code Planet
    Technologies

    Parth Maheshwari

    Co-Founder at Code Planet
    Technologies

    overview-img

    Course Content

    Introduction
    • What is Create React App
    • Core Concepts
    • Create a React Project
    • Node Setup
    • Let's Build an App
    Building Content with JSX
    • What is JSX ?
    • Printing JavaScript Variables in JSX
    • Shorthand JS Expressions
    • Typical Component Layouts
    • Customizing Elements with Props
    • Converting HTML to JSX
    • Applying Styling in JSX
    Communicating with props
    • Three Tenets of Components
    • Getting Some Free Styling
    • Naive Component Approach
    • Specifying Images in JSX
    • Specifying Images in JSX
    • Duplicating a Single Component
    • Extracting JSX to New Components
    • Component Nesting
    • React's Props System
    • Passing and Receiving Props
    • Passing Multiple Props
    • Showing Custom Children
    Structuring App with Class-Based Component
    • Class-Based Components
    • Application Overview
    • Scaffolding the App
    • Getting a Users Physical Location
    • Resetting Geolocation Preferences
    • Handling Async Operations with Functional Components
    • Refactoring from Functional to Class Components
    State in React Components
    • The Rules of State
    • Initializing State Through Constructors
    • Updating State Properties
    • App Lifecycle Walkthrough
    • Handling Errors Gracefully
    Understanding Lifecycle Methods
    • Introducing Lifecycle Methods
    • Why Lifecycle Methods?
    • Refactoring Data Loading to Lifecycle Methods
    • Alternate State Initialization
    • Passing State as Props
    • Ternary Expressions in JSX
    • Extracting Options to Config Objects
    • Adding Some Styling
    • Showing a Loading Spinner
    • Specifying Default Props
    • Avoiding Conditionals in Render
    Handling User Inputs with Forms and Events
    • App Overview
    • Component Design
    • Adding Some Project Structure
    • Showing Forms to the User
    • Adding a Touch of Style
    • Creating Event Handlers
    • Alternate Event Handler Syntax
    • Uncontrolled vs Controlled Elements
    • More on Controlled Elements
    • Handling Form Submittal
    • Understanding 'this' In Javascript
    • Solving Context Issues
    • Communicating Child to Parent
    • Invoking Callbacks in Children
    Making API Request with React
    • Fetching Data
    • Axios vs Fetch
    • Viewing Request Results
    • Handling Requests with Async Await
    • Setting State After Async Requests
    • Binding Callbacks
    • Creating Custom Clients
    Building List of Records
    • Rendering Lists
    • Review of Map Statements
    • Rendering Lists of Components
    • The Purpose of Keys in Lists
    • Implementing Keys in Lists
    Using Ref's For DOM
    • Grid CSS
    • Issues with Grid CSS
    • Creating an Image Card Component
    • Accessing the DOM with Refs
    • Accessing Image Height
    • Callbacks on Image Load
    • Dynamic Spans
    • App Review
    Understanding Hooks in React
    • React hooks
    • App Architecture
    • Communicating the Items Prop
    • Building and Styling the Accordion
    • Helper Functions in Function Components
    • Introducing useState
    • Understanding useState
    • Setter Functions
    • Expanding the Accordion
    • Creating Additional Widgets
    • The Search Widget Architecture
    • Scaffolding the Widget
    • Text Inputs with Hooks
    • When do we Search?
    • The useEffect Hook
    • List Building!
    Integrating React with Redux
    • React Cooperating with Redux
    • Design of the Redux App
    • How React-Redux Works
    • Redux Project Structure
    • Building Reducers
    • The Connect Function
    • Configuring Connect with MapStateToProps
    • Building a List with Redux Data
    Redux
    • Integrating React with Redux
    • Async Actions with Redux Thunk
    • Redux Store Design
    • Navigation with React Router
    • Handing Authentication with React
    • Redux Dev Tools
    • Handling Forms with React Forms
    • REST - Based React Apps
    • Using React Portals
    • Implementing Streaming Video
    • The Context System with React
    • Replacing Redux with Context