Beginning ReactJS Foundations Building User Interfaces with ReactJS
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
WHAT'S IN A NAME?
UI LAYER
VIRTUAL DOM
THE PHILOSOPHY OF REACT
SUMMARY
JSX IS NOT HTML
JAVASCRIPT LESSON: MAKING SENSE OF MODULES WITH AMD, CJS, AND ESM
WHAT IS JSX?
SYNTAX BASICS OF JSX
SUMMARY
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
INSTALLATION AND GETTING STARTED
INSPECTING COMPONENTS
HIGHER-ORDER COMPONENTS
EDITING COMPONENT DATA IN DEVTOOLS
WORKING WITH ADDITIONAL DEVTOOLS FUNCTIONALITY
PROFILING
SUMMARY
ONE-WAY DATA FLOW
PROPS
REACT STATE
SETSTATE IS NOT SETSTATE
JAVASCRIPT LESSON: SHALLOW COPIES AND THE SPREAD OPERATOR
CONVERTING TO CLASS COMPONENTS
SUMMARY
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 HAVE STATE
CONTROLLED INPUTS VS. UNCONTROLLED INPUTS
LIFTING UP INPUT STATE
USING UNCONTROLLED INPUTS
USING DIFFERENT FORM ELEMENTS
PREVENTING DEFAULT ACTIONS
SUMMARY
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
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
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
WHAT IS ROUTING?
HOW ROUTING WORKS IN REACT
USING REACT ROUTER
JAVASCRIPT LESSON: HIGHER-ORDER FUNCTIONS
REACT ROUTER HOOKS
SUMMARY
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
WHAT IS DEPLOYMENT?
BUILDING AN APP
HOW IS A DEPLOYED APP DIFFERENT?
DEVELOPMENT MODE VS. PRODUCTION
PUTTING IT ON THE WEB
SUMMARY
BUILDING YOUR OWN TOOLCHAIN
HOW WEBPACK WORKS
AUTOMATING YOUR BUILD PROCESS
STRUCTURING YOUR SOURCE DIRECTORY
SUMMARY
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
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
WHAT IS A PORTAL?
COMMON USE CASES
SUMMARY
WHY IS ACCESSIBILITY IMPORTANT?
ACCESSIBILITY BASICS
IMPLEMENTING ACCESSIBILITY IN REACT COMPONENTS
HOW MANY BREAKPOINTS SHOULD YOU HAVE?
SUMMARY
TESTING
SERVER-SIDE RENDERING
PEOPLE TO FOLLOW
USEFUL LINKS AND RESOURCES
SUMMARY
ABOUT THE AUTHOR
ABOUT THE TECHNICAL EDITOR
ACKNOWLEDGMENTS
WILEY END USER LICENSE AGREEMENT

Forms

Unlock This Title

You do not have access to this section. Get the full version of this title with a SitePoint Premium Account.

Start Free TrialRead Free Preview

Already a Premium member? Sign In

Community Questions