SitePoint
Blog
Forum
Library
Login
Join Premium
Toggle sidebar
Your First Week With React, 2nd Edition
Toggle community discussions
Close
Content
Files
Bookmarks
Preface
Your First Week With React, 2nd Edition
Notice of Rights
Notice of Liability
Trademark Notice
About SitePoint
1
Getting Started with React: A Beginner’s Guide
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
Create React App: Get React Projects Ready Fast
How Does Create React App Work?
Basic Features
Development Features
Opting Out
In Conclusion
An Introduction to JSX
What Is JSX?
How Does It Work?
Why Use JSX?
What about a Separation of Concerns?
Using JSX With React
Not Just for React
React Hooks: How to Get Started & Build Your Own
What Are React Hooks?
The useState Hook
useEffect Hook
Custom React Hooks
Fetching Data Using Third-party Hooks
Demo
Official React Hooks
Summary
Working with Data in React: Properties & State
Presentation Components
Working with Component State
Lifting State and Composition
Context API
State Management Libraries
Conclusion
Working with Forms in React
Uncontrolled Inputs
Controlled Inputs
Validation
Form Libraries
Conclusion
7 Ways to Style React Components Compared
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
How to Do Animation in React Apps
The CSS Way
The GSAP Way
The React Way: Framer Motion
Conclusion
How to Fetch Data with React Hooks
What We’re Building
Fetching Data Asynchronously
Loading state
Error state
A Class-based Approach
Wrapping Up
How to Deal with Errors in a React App
Error Boundaries
Placing Boundaries in Your Application
Where Error Boundaries Will Not Work
Summing Up
Higher-order Components: A React Application Design Pattern
Pure Functions
Higher-order Functions
Higher-order Components
Better Higher-order Components
Higher-order Component Creators
Conclusion
How to Replace Redux with React Hooks and the Context API
Prerequisites
About the New State Management Technique
Setting Up the Project
Counter Example: useState
Contacts Example: useReducer
Summary
How to Test React Components Using Jest
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
How to Deploy a React App
Structure of a React App
CI/CD
Full-stack React Apps
Database-backed React Apps
Summing Up
How to Organize a Large React Application and Make It Scale
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
Open text modal
Community Questions
Close