Introduction

• Functions as first class objects
• ES6 Concepts
• Pure functions
• Webpack

Setting up the Dev environment

• Babel and Webpack – the problems they solve
• Webpack HMR
• Visual Studio Code, Emmet and other React Plugins
• React Developer Tools Chrome Extension
• Setting up your Component Development Environment - Cosmos, Storybook

Introduction to React

• Evolution of client-side MVC and component based architectures
• React Hello World (in plain HTML and JS)
• Hello World with the create-react-app
• Introduction to JSX
• First encounter with Component based architecture
• Composing Components
• Props and States
• Component life cycle
• Lists and keys
• Handling events
• Forms
• Virtual DOM

Getting into depth

• Type checking with proptypes
• Controlled components
• Parent to child and child to parent communication
• State management challenges, Observer pattern and Event Emitters
• Communication across the component hierarchy
• refs and context

Patterns

• Mixin pattern
• Container and Presentation Components
• Higher Order Components
• Composition vs Inheritance and comparison of paradigms
• Anti-patterns

Advanced React Concepts

• React Hooks
• React Fragments
• Comparison of React Components with Web Components
• Integrating with Web Components
• React Portal

Integrating 3rd party components

• React-select case study
• React data grid
• Material UI

React Router

• Introduction to Routing and History APIs
• Introduction to React Router
• URL parameters
• Redirects
• Link component
• history manipulation

State management

• Need for state management
• Redux (without React)
• Flux architecture
• Actions and Reducers
• React with Redux
• Mobx
• Redux Thunk
• Comparison of different state management solutions

Server-side rendering

• Gatsby - a case study

React Testing

• React Test Utilities
• Shallow rendering
• Jest
• Enzyme
• Mocha