SitePoint
  • Premium
  • Library
  • Community
  • Jobs
  • Blog
LoginStart Free Trial
Your First Week With React, 2nd Edition
Your First Week With React, 2nd Edition
Notice of Rights
Notice of Liability
Trademark Notice
About SitePoint
What is React?
Understanding the Virtual DOM
Start a Blank React Project
Introducing JSX Syntax
Hello, World! in React
Declaring React Components
Styling JSX Elements
Stateless vs Stateful Components
Passing Data via Props
Prop Checking
Component Reuse
Refactor to Use React Hooks
Demo
Where to Go from Here
How Does Create React App Work?
Basic Features
Development Features
Opting Out
In Conclusion
What Is JSX?
How Does It Work?
Why Use JSX?
What about a Separation of Concerns?
Using JSX With React
Not Just for React
What Are React Hooks?
The useState Hook
useEffect Hook
Custom React Hooks
Fetching Data Using Third-party Hooks
Demo
Official React Hooks
Summary
Presentation Components
Working with Component State
Lifting State and Composition
Context API
State Management Libraries
Conclusion
Uncontrolled Inputs
Controlled Inputs
Validation
Form Libraries
Conclusion
The Various Styling Approaches
Inline CSS
Regular CSS
CSS-in-JS
JSS
Styled-Components
CSS Modules
Sass & SCSS
Less
Stylable
Getting Our Hands Dirty
And the Winner is...
Wrapping Up
The CSS Way
The GSAP Way
The React Way: Framer Motion
Conclusion
What We’re Building
Fetching Data Asynchronously
Loading state
Error state
A Class-based Approach
Wrapping Up
Error Boundaries
Placing Boundaries in Your Application
Where Error Boundaries Will Not Work
Summing Up
Pure Functions
Higher-order Functions
Higher-order Components
Better Higher-order Components
Higher-order Component Creators
Conclusion
Prerequisites
About the New State Management Technique
Setting Up the Project
Counter Example: useState
Contacts Example: useReducer
Summary
Sample Application
To TDD or Not to TDD?
Introducing Jest
Installing and Configuring Jest
Testing Business Logic
Rerunning Tests on Changes
Testing React Components
Conclusion
Structure of a React App
CI/CD
Full-stack React Apps
Database-backed React Apps
Summing Up
Build Tools and Linting
Folder Structure
React Components
Prefer the jsx Extension over Capital Letters
One React Component per File
“Smart” And “Dumb” React Components
Avoid Large render Methods
Always Use prop-type
Redux
Stand-alone JavaScript Modules
Tests
Conclusion

Community Questions