Into The React

agenda.md

A deep dive into the React. Starting from the very basics, exploring what? why? how? the APIs work and levelling up to its advanced patterns.

1. Introduction: What is and Why should one do React?
2. The Basics: Exploring the basic elements of React with just one single HTML file. Building few core React APIs ourself and learning how they work.
3. Thinking in React: Setup and building simple React Front End. Create react App. Life Cycles. Synthetic Events. Lifting State. Dropping Props. Some Styling. Some Tooling. Different Component Patterns. Data Fetching. Data persistence with Firebase re-base. Deploying builds.
4. Advanced Patterns: Declarative Development, Compound Components, HOCs, Refs, Context, Portals and More! Learning by building real-world usages.

Into The React.md

Into the React

Introduction: 10mins

• What & Why React
• Intro:
  • Declarative
  • Component Based
  • Learn Once, Write Anywhere
• Babel Repl & ES6
• Intro on How React works
• It's competitiors
• Production usages

Starting with Some code (The setup):

• Blank html file and no build configuration
  • document.createElement => React.createElement => JSX
  • JS in JSX Land
• What we are building
• create react app?
• npm node npx yarn
  • Why CRA?
  • ES6, Babel, webpack, bundling, parceljs ?
• A React Project Structure
• How to start building a frontend project when you only have an idea about it in your mind.

React Basics(Explaining with usages): 1hr

• react and react-dom/native/vr
• Its not HTML, it's JSX!
  • synthetic events
• Rendering Elements
• In React, Everything is a Component, Functional vs Class Syntactic Sugar
• Parent, Child, Presentational, Controller Components
• Props and State
• The setState and the Virtual Dom, Reconciliation, Diffing process.
• LifeCycles
• Handling Events
• lists & keys
• What exactly the bind() does?
• Class methods and class properties
• How react manages event listeners
• How to style components
• react dev tools, call stack, props ans state

Building some Front End: 1hr

• Thinking in React
• Explain concepts while building the app
• Lifting State Up i.e Smart and Dumb/functional/presentational Components
• Controlling child components with parent
• usage of life cycles
• V = F(D)
• Composition vs Inheritance
• Time and Frontend State Management
• Compound Components
• Why React warns about Keys ? Why do we need keys ?
• Some more React Caveats
• How to do PWA ?

Advancing With React: 1.45-2hrs

Essentials:

What, Why with real world usages:

• Higher Order Components, real world usages
• Declarative development, Thinking In React
• Refs
• Children API
• Context
• Portals, real world usage

More:

• Render Props
• Error Boundaries

Links: JSX Conversion Example