SitePoint
Blog
Forum
Library
Login
Join Premium
Toggle sidebar
Beginning ReactJS Foundations Building User Interfaces with ReactJS
Toggle community discussions
Close
Content
Files
Bookmarks
Preface
Beginning ReactJS Foundations Building User Interfaces with ReactJS: AN APPROACHABLE GUIDE
INTRODUCTION
WHY THIS BOOK?
WHAT'S COVERED IN THIS BOOK?
WHAT'S NOT COVERED?
PREREQUISITES
INSTALLING REQUIRED DEPENDENCIES
READER SUPPORT FOR THIS BOOK
1
Hello, World!
REACT WITHOUT A BUILD TOOLCHAIN
INTERACTIVE “HELLO, WORLD” WITH CREATE REACT APP AND JSX
SUMMARY
The Foundation of React
WHAT'S IN A NAME?
UI LAYER
VIRTUAL DOM
THE PHILOSOPHY OF REACT
SUMMARY
JSX
JSX IS NOT HTML
JAVASCRIPT LESSON: MAKING SENSE OF MODULES WITH AMD, CJS, AND ESM
WHAT IS JSX?
SYNTAX BASICS OF JSX
SUMMARY
All About Components
WHAT IS A COMPONENT?
COMPONENTS VS. ELEMENTS
BUILT-IN COMPONENTS
JAVASCRIPT LESSON: USING ARRAY.MAP()
USER-DEFINED COMPONENTS
TYPES OF COMPONENTS
JAVASCRIPT LESSON: CLASSES
JAVASCRIPT LESSON: VARIABLES
REACT COMPONENT CHILDREN
THE COMPONENT LIFECYCLE
RENDERING COMPONENTS
COMPONENT TERMINOLOGY
SUMMARY
React DevTools
INSTALLATION AND GETTING STARTED
INSPECTING COMPONENTS
HIGHER-ORDER COMPONENTS
EDITING COMPONENT DATA IN DEVTOOLS
WORKING WITH ADDITIONAL DEVTOOLS FUNCTIONALITY
PROFILING
SUMMARY
React Data Flow
ONE-WAY DATA FLOW
PROPS
REACT STATE
SETSTATE IS NOT SETSTATE
JAVASCRIPT LESSON: SHALLOW COPIES AND THE SPREAD OPERATOR
CONVERTING TO CLASS COMPONENTS
SUMMARY
Events
HOW EVENTS WORK IN REACT
WHAT IS SYNTHETICEVENT?
USING EVENT LISTENER ATTRIBUTES
THE EVENT OBJECT
SUPPORTED EVENTS
EVENT HANDLER FUNCTIONS
JAVASCRIPT LESSON: METHOD DEFINITION SYNTAX
SUMMARY
Forms
FORMS HAVE STATE
CONTROLLED INPUTS VS. UNCONTROLLED INPUTS
LIFTING UP INPUT STATE
USING UNCONTROLLED INPUTS
USING DIFFERENT FORM ELEMENTS
PREVENTING DEFAULT ACTIONS
SUMMARY
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
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
JAVASCRIPT LESSON: TAGGED TEMPLATE LITERALS
SUMMARY
Introducing Hooks
WHAT ARE HOOKS?
WHY WERE HOOKS INTRODUCED?
RULES OF HOOKS
THE BUILT-IN HOOKS
IMPORTING ALL THE HOOKS
JAVASCRIPT LESSON: STRICT EQUALITY
JAVASCRIPT LESSON: SIDE EFFECTS
WRITING CUSTOM HOOKS
LABELING CUSTOM HOOKS WITH USEDEBUGVALUE
FINDING AND USING CUSTOM HOOKS
SUMMARY
Routing
WHAT IS ROUTING?
HOW ROUTING WORKS IN REACT
USING REACT ROUTER
JAVASCRIPT LESSON: HIGHER-ORDER FUNCTIONS
REACT ROUTER HOOKS
SUMMARY
Error Boundaries
THE BEST LAID PLANS
WHAT IS AN ERROR BOUNDARY?
IMPLEMENTING AN ERROR BOUNDARY
JAVASCRIPT LESSON: STATIC METHODS
WHAT CAN'T AN ERROR BOUNDARY CATCH?
SUMMARY
Deploying React
WHAT IS DEPLOYMENT?
BUILDING AN APP
HOW IS A DEPLOYED APP DIFFERENT?
DEVELOPMENT MODE VS. PRODUCTION
PUTTING IT ON THE WEB
SUMMARY
Initialize a React Project from Scratch
BUILDING YOUR OWN TOOLCHAIN
HOW WEBPACK WORKS
AUTOMATING YOUR BUILD PROCESS
STRUCTURING YOUR SOURCE DIRECTORY
SUMMARY
Fetching and Caching Data
ASYNCHRONOUS CODE: IT'S ALL ABOUT TIMING
JAVASCRIPT NEVER SLEEPS
JAVASCRIPT LESSON: PROMISES AND ASYNC/AWAIT
WHERE TO RUN ASYNC CODE IN REACT
WAYS TO FETCH
JAVASCRIPT LESSON: REST
GETTING DATA WITH FETCH
GETTING DATA WITH AXIOS
USING WEB STORAGE
SUMMARY
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
React Portals
WHAT IS A PORTAL?
COMMON USE CASES
SUMMARY
Accessibility in React
WHY IS ACCESSIBILITY IMPORTANT?
ACCESSIBILITY BASICS
IMPLEMENTING ACCESSIBILITY IN REACT COMPONENTS
HOW MANY BREAKPOINTS SHOULD YOU HAVE?
SUMMARY
Going Further
TESTING
SERVER-SIDE RENDERING
PEOPLE TO FOLLOW
USEFUL LINKS AND RESOURCES
SUMMARY
Index
ABOUT THE AUTHOR
ABOUT THE TECHNICAL EDITOR
ACKNOWLEDGMENTS
WILEY END USER LICENSE AGREEMENT
Open text modal
Community Questions
Close