Advanced Front End Web Development Course — React.js 

offered by Coding Ninjas

WHAT IS REACT?

Features of React

SPAS VS. MPAS

Difference between Single page and Multi page applications

HOW REACT WORKS?

How Virtual DOM and Babel are working under the hood?

CREATING FIRST REACT ELEMENT

VS Code Basics, What is JSX?

REACT COMPONENTS

Functional Component, React Fragments, React dev tools,

JSX EXPRESSIONS

Rendering Javascript inside JSX (Variables, data types, functions)

RENDERING ARRAYS AND OBJECTS

How to render list of items from an array (using map function) and objects rendering in React

CONDITIONAL RENDERING

Conditional rendering using Ternary, AND and OR operators

EVENT HANDLING

How to handle events in JSX?

FORMS IN JSX

How to take input and display form data in JSX?

ACCESSING INPUT VALUES

Using refs to access React elements

CDNS AND WEBPACK

Drawbacks of CDNs, Using Module Bundler in React Project

TOOLS INSTALLATION

Installing required tools for creating a React Project

FOLDER STRUCTURE

Understanding the folder and files structure

IMPORT/EXPORT

How to import and export components in files?

CLASS BASED COMPONENTS

How to create class based components?

MOVIE-APP PROJECT

Creating and adding functionalities to Movie App

STATE IN REACT

Adding state to components

PROPS

What are props, passing data through props from one component to another, Default props

DRAWBACKS OF GLOBAL SCOPE OF STYLING FILE (CSS)

Understanding CSS Scope to avoid colashes in classNames

LIMITING THE SCOPE OF STYLING USING INLINE STYLING

Creating inline styles for the elements, styling objects in the component.

STYLED COMPONENTS

Writing styled components to limit the scope of styling

DYNAMIC STYLING

Styling Application based on a condition using styled-components

CSS MODULES

Modern styling techniques used by developers

COMPONENT LIFECYCLE

Different Phases of Component lifecycle like mounting, umounting, etc.

MOUNTING PHASE

Lifecycle methods involved during execution and their order

SIDE EFFECTS

How and where to perform side effects

UPDATING PHASE

Methods involved in the updating phase

UN-MOUNTING PHASE

Performing clean-ups during un-mounting

ERROR-HANDLING

Creating Error-Boundary

USE EFFECT, USE STATE AND OTHER

What are hooks, why do we use them and various React hooks out there

INTRODUCTION TO FIREBASE

Understanding what is firebase and how it actually works

FIREBASE SETUP

Setting up firebase and adding it to the project

CRUD WITH FIREBASE

Learning how to create, read, update and delete data from firebase

QUERYING DATA

Querying data from firebase

ROUTING

Building navigation and showing different pages for different routes

CONTEXT API

Passing Arguments to the component tree without passing props at every level

WHAT IS REDUX?

Why Redux is used? What is the Data Flow?

STORE, ACTION, REDUCERS

Fundamental Principles of Redux, applying them practically

THUNK MIDDLEWARE

Allows you to write action creators that return a function instead of an action

REDUX TOOLKIT

Set of tools that helps simplify Redux development