Lessons
Lab
TestPrep
AI Tutor
Beginning ReactJS Foundations Building User Interfaces with ReactJS
Lessons
Lab
TestPrep
AI Tutor (Add-on)
About This Course
Skills You’ll Get
Interactive Lessons
21+ Interactive Lessons |
Gamified TestPrep
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
1
Hello, World!
2
JSX
3
All About Components
4
React DevTools
5
React Data Flow
6
Events
7
Forms
8
Refs
9
Styling React
10
Introducing Hooks
11
Routing
12
Error Boundaries
13
Initialize a React Project from Scratch
14
Fetching and Caching Data
15
Context API
16
React Portals
17
Accessibility in React
18
Going Further
Related Courses
All Course
Lessons
TestPrep
AI Tutor
Lessons
Lab
TestPrep
AI Tutor
Lessons
TestPrep
Lessons
TestPrep
Lessons
Lab
TestPrep
AI Tutor
Lessons
TestPrep
AI Tutor