React
Academy

Course outline

React Fundamentals

React is a JavaScript library originally built by Facebook. It allows developers to create large web apps using simple components that are connected to one another, like lego pieces. It provides speed, simplicity, and scalability.

In a few short years, React has become the most popular JS libraryon the planet. It is now is used on millions of web sites, including Facebook, Netflix, Instagram, Uber and Airbnb.

Day 1

All the React basics you need
1. Introduction to React 
  • What is React? (previously known as ReactJS)
  • Specs, pros and cons
  • Installation
  • React "Hello World!"
  • Building and deploying a React application
2. JSX and rendering 
  • Adding React to a blank page
  • JSX Language
  • Three phases of change: trigger, render, commit
  • JSX abstractions: createElement() and React Elements
3. Components 
  • Functional Components
  • Properties (React Props and destructuring)
  • React State
  • setState, mutations and immuability
4. Lifecycle 
  • Life and death of components
  • Scheduling of setState
  • Using effects with useEffect()
  • Dependency array
  • Cleanup effect
5. Managing Events 
  • Event listeners
  • Synthetic Events
6. Functional programming using Hooks New
  • What are Hooks
  • Rules of Hooks
  • Custom Hooks

Day 2

Building up your skills on React
7. Layout New
  • CSS, styles and CSS-in-js
  • Sass and Less
  • Post-CSS and autoprefixer
8. Routing 
  • Navigation, NavBars and Links
  • Hash Links, History API, Navigation API
  • React-Router-DOM
9. Forms 
  • Controlled components
  • Uncontrolled components
  • Refs
  • PreventDefault
10. Loading data into State 
  • Using keys
  • Using fetch() to get data from REST API
  • Modify data with a REST API
  • Asynchronous programming with JS
  • Using notifications
11. Loading data with Routing New
  • Data loaders with the new React-Router-Dom
  • Modifying Data with actions
  • The role of Forms
  • Suspense
12. React tooling 
  • Intro to the React Dev tools
  • Debugging Extension
  • Viewing the component tree
  • Analyzing performance with profiler
  • Detecting what is re-rendered