SitePoint
  • Premium
  • Library
  • Community
  • Jobs
  • Blog
LoginStart Free Trial
React: Tools & Skills, 2nd Edition
React: Tools & Skills, 2nd Edition
Notice of Rights
Notice of Liability
Trademark Notice
About SitePoint
Introduction
Overview
Setting up React Router
React Router Basics
Nested Routing
Protecting Routes
Working Demo
Summary
Hooks
Function Components
Create React App
Proxy Server
PropTypes
TypeScript
Redux
React-Redux
React Router
ESLint
Lodash
Axios
Jest
Enzyme
Shallow Renderer
Storybook
React Bootstrap
Material-UI
React DevTools
Awesome React
Conclusion
How React and TypeScript Work Together
Best Practices
Summary
Further Reading
Where to Start?
Maturity
Features
Languages, Paradigms, and Patterns
Ecosystem
Adoption, Learning Curve and Development Experience
Popularity and Community Feedback
Making a Decision
One Framework to Rule Them All?
Prerequisites
What is React Native?
What is Expo?
Plain React Native or Expo?
Setting Up the React Native Development Environment
What We’ll Be Building
Coding the App
Conclusion and Next Steps
1. What’s the virtual DOM?
2. What’s JSX?
3. What’s the difference between a class component and a functional one?
4. What are keys used for?
5. What’s the difference between state and props?
6. Why call setState instead of directly mutating state?
7. How do you restrict the type of value passed as a prop, or make it required?
8. What’s prop drilling, and how can you avoid it?
9. What’s React context?
10. What’s Redux?
11. What are the most common approaches for styling a React application?
12. What’s the difference between a controlled and an uncontrolled component?
13. What are the lifecycle methods?
14. What are React hooks?
15. What are the advantages of React hooks?
Wrapping Up
What Makes a Good User Interface?
React Strap
React Suite
Ant Design
Material UI
Fluent UI React
Bonus
Summary
How Does Next.js Use React?
How Does Next.js Work?
Quick Setup and Zero Configuration
File-based Page Routing
Client-side Page Transitions
Static Assets
Template Components
Static Generation
Server-side Rendering
Dynamic Routes
Client-side Rendering
API Routes
CSS Options
Global CSS
Next.js Application Deployment
Export a Next.js Site to Static HTML
Your Next(.js) Project
Criteria for the Decision
A High-level Overview of React vs Vue
Coding Comparison
Let’s Build an App
Project Breakdown
Job Opportunities
Summary

Community Questions