React Fundamentals

Last modified: 2024-02-27

Audience

Developers

Duration

2 Days

Description

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 library on the planet. It is now is used on millions of web sites, including Facebook, Netflix, Instagram, Uber and Airbnb.

Course Outline

Introduction to React

  • Presenting React?
  • Specs, pros and cons
  • Setup requirements
    • Node JS
    • nvm
  • React Hello World!
  • Fast refresh and hot reloading
  • Building and deploying a React application

JSX and rendering

  • Adding React to the root
  • JSX Language
  • JSX abstractions: createElement() and React Elements
  • Special attributes: className, style, key, etc.
  • Commit Optimizations

Components

  • Functional Components
  • Properties (React Props and destructuring)
  • React State
  • Scheduling of setState
  • setState and mutations

Component Architecture

  • UI is a function of state
  • Three phases of change: trigger, render, commit
  • Component render and pure functions
  • State immutability (objects and array)

Managing Events

  • Event listeners
  • Synthetic Events

Functional programming using Hooks

  • What are Hooks
  • Rules of Hooks
  • Custom Hooks

Layouts

  • CSS, styles and CSS-in-js
  • Sass and Less
  • Post-CSS and autoprefixer
  • StyleX

Routing

  • Using the key atribute
  • Navigation, NavBars and Links
  • Hash Links, History API, Navigation API
  • Using usesyncExternalStore()
  • React-Router-DOM

Forms

  • Controlled components
  • Uncontrolled components
  • Refs
  • PreventDefault

Loading data into State

  • Using Promises with use()
  • Using fetch() to get data from REST API
  • Modify data with a REST API
  • Asynchronous programming with JS
  • Using notifications

Loading data with Routing

  • Data loaders with the new React-Router-Dom
  • Modifying Data with actions
  • The role of Forms
  • Suspense

React tooling

  • Intro to the React Dev tools
  • Debugging Extension
  • Viewing the component tree
  • Analyzing performance with profiler
  • Detecting what is re-rendered