Adobe

Beginning ReactJS Foundations Building User Interfaces with ReactJS

Lessons
TestPrep
AI Tutor (Add-on)
Get A Free Trial

About This Course

Skills You’ll Get

Download Course Outline

1

Introduction

  • WHY THIS COURSE?
  • WHAT'S COVERED IN THIS COURSE?
  • WHAT'S NOT COVERED?
  • PREREQUISITES
  • INSTALLING REQUIRED DEPENDENCIES
2

Hello, World!

  • REACT WITHOUT A BUILD TOOLCHAIN
  • INTERACTIVE “HELLO, WORLD” WITH CREATE REACT APP AND JSX
  • SUMMARY
3

The Foundation of React

  • WHAT'S IN A NAME?
  • UI LAYER
  • VIRTUAL DOM
  • THE PHILOSOPHY OF REACT
  • SUMMARY
4

JSX

  • JSX IS NOT HTML
  • WHAT IS JSX?
  • SYNTAX BASICS OF JSX
  • SUMMARY
5

All About Components

  • WHAT IS A COMPONENT?
  • COMPONENTS VS. ELEMENTS
  • BUILT-IN COMPONENTS
  • USER-DEFINED COMPONENTS
  • TYPES OF COMPONENTS
  • REACT COMPONENT CHILDREN
  • THE COMPONENT LIFECYCLE
  • RENDERING COMPONENTS
  • COMPONENT TERMINOLOGY
  • SUMMARY
6

React DevTools

  • INSTALLATION AND GETTING STARTED
  • INSPECTING COMPONENTS
  • EDITING COMPONENT DATA IN DEVTOOLS
  • WORKING WITH ADDITIONAL DEVTOOLS FUNCTIONALITY
  • PROFILING
  • SUMMARY
7

React Data Flow

  • ONE-WAY DATA FLOW
  • PROPS
  • REACT STATE
  • CONVERTING TO CLASS COMPONENTS
  • SUMMARY
8

Events

  • HOW EVENTS WORK IN REACT
  • WHAT IS SYNTHETICEVENT?
  • USING EVENT LISTENER ATTRIBUTES
  • THE EVENT OBJECT
  • SUPPORTED EVENTS
  • EVENT HANDLER FUNCTIONS
  • SUMMARY
9

Forms

  • FORMS HAVE STATE
  • CONTROLLED INPUTS VS. UNCONTROLLED INPUTS
  • LIFTING UP INPUT STATE
  • USING UNCONTROLLED INPUTS
  • USING DIFFERENT FORM ELEMENTS
  • PREVENTING DEFAULT ACTIONS
  • SUMMARY
10

Refs

  • WHAT REFS ARE
  • HOW TO CREATE A REF IN A CLASS COMPONENT
  • HOW TO CREATE A REF IN A FUNCTION COMPONENT
  • USING REFS
  • CREATING A CALLBACK REF
  • WHEN TO USE REFS
  • WHEN NOT TO USE REFS
  • EXAMPLES
  • SUMMARY
11

Styling React

  • THE IMPORTANCE OF STYLES
  • IMPORTING CSS INTO THE HTML FILE
  • USING PLAIN OLD CSS IN COMPONENTS
  • WRITING INLINE STYLES
  • CSS MODULES
  • CSS-IN-JS AND STYLED COMPONENTS
  • SUMMARY
12

Introducing Hooks

  • WHAT ARE HOOKS?
  • WHY WERE HOOKS INTRODUCED?
  • RULES OF HOOKS
  • THE BUILT-IN HOOKS
  • WRITING CUSTOM HOOKS
  • LABELING CUSTOM HOOKS WITH USEDEBUGVALUE
  • FINDING AND USING CUSTOM HOOKS
  • SUMMARY
13

Routing

  • WHAT IS ROUTING?
  • HOW ROUTING WORKS IN REACT
  • USING REACT ROUTER
  • REACT ROUTER HOOKS
  • SUMMARY
14

Error Boundaries

  • THE BEST LAID PLANS
  • WHAT IS AN ERROR BOUNDARY?
  • IMPLEMENTING AN ERROR BOUNDARY
  • WHAT CAN'T AN ERROR BOUNDARY CATCH?
  • SUMMARY
15

Deploying React

  • WHAT IS DEPLOYMENT?
  • BUILDING AN APP
  • HOW IS A DEPLOYED APP DIFFERENT?
  • DEVELOPMENT MODE VS. PRODUCTION
  • PUTTING IT ON THE WEB
  • SUMMARY
16

Initialize a React Project from Scratch

  • BUILDING YOUR OWN TOOLCHAIN
  • HOW WEBPACK WORKS
  • AUTOMATING YOUR BUILD PROCESS
  • STRUCTURING YOUR SOURCE DIRECTORY
  • SUMMARY
17

Fetching and Caching Data

  • ASYNCHRONOUS CODE: IT'S ALL ABOUT TIMING
  • JAVASCRIPT NEVER SLEEPS
  • WHERE TO RUN ASYNC CODE IN REACT
  • WAYS TO FETCH
  • GETTING DATA WITH FETCH
  • GETTING DATA WITH AXIOS
  • USING WEB STORAGE
  • SUMMARY
18

Context API

  • WHAT IS PROP DRILLING?
  • HOW CONTEXT API SOLVES THE PROBLEM
  • COMMON USE CASES FOR CONTEXT
  • WHEN NOT TO USE CONTEXT
  • COMPOSITION AS AN ALTERNATIVE TO CONTEXT
  • EXAMPLE APP: USER PREFERENCES
  • SUMMARY
19

React Portals 

  • WHAT IS A PORTAL?
  • COMMON USE CASES
  • SUMMARY
20

Accessibility in React

  • WHY IS ACCESSIBILITY IMPORTANT?
  • ACCESSIBILITY BASICS
  • IMPLEMENTING ACCESSIBILITY IN REACT COMPONENTS
  • SUMMARY
21

Going Further

  • TESTING
  • SERVER-SIDE RENDERING
  • PEOPLE TO FOLLOW
  • USEFUL LINKS AND RESOURCES
  • SUMMARY

Related Courses

All Course