React.js Design Patterns: Learn how to build scalable React apps with ease

Cover Page
Title Page
Copyright Page
Dedication Page
About the Author
About the Reviewers
Acknowledgement
Preface
Errata
Table of Contents
1. React Anti-Patterns and Best Practices
Introduction
Structure
Objectives
Bad practices in building a React application
Inline CSS
Large component
Props drilling
Do not pass all props
Not using the key in the map loop
Using the index as a key in the map loop
Nested ternary statements
Ambiguous naming
Do not mutate state directly
Do not style HTML tags directly
What are the best ways of architecting a react application?
Styling
Preprocessor (SASS/LESS)
File/folder structure
Naming conventions
Rendering with useMemo and useCallBack
Use Prettier
Use Linter and its rules
Use try…catch
Log errors
React error boundary
Test your code
Component name must be in Pascal case
Extract reusable logic
Benefits of using JavaScript in React application
Benefits of using TypeScript in React application
Conclusion
2. Writing Components
Introduction
Structure
Objectives
Naming conventions
Camel case
Pascal case
Functional component
useState
useRef
useEffect
Class component
ComponentDidMount
ComponentDidUpdate
Best way to structure a react component
Data sharing between components
Props
Context API
Provider
Consumer
Redux
Store
Reducer
Actions
useReducer
Controlled versus uncontrolled components
Conclusion
3. Clean and Maintainable Code
Introduction
Structure
Objectives
Writing a clean code
Business continuity
Easy to read and understand
Achieving clean and maintainable code
Writing maintainable code
Design patterns
Writing testable codes
Checking for errors
Log errors for easy bug tracking and fixes
Using TypeScript to build applications
Conclusion
4. React Hooks
Introduction
Structure
Objectives
React hooks
useState
useReducer
useEffect
useLayoutEffect
useMemo
useCallBack
useRef
useContext
Custom hooks
Conclusion
5. Styling
Introduction
Structure
Objectives
Styling a component
Types of styling
Inline CSS
External CSS
Sass
Bootstrap
Styled components
Tailwind CSS
Conventions of writing styles
BEM
Conclusion
6. Server-Side Renderings
Introduction
Structure
Objectives
What is Server-Side rendering?
When to use server-side rendering?
Pros of using Next.js
Cons of using Next.js
Pre-rendering in Next.js
Static generation
Static page without data
Static page with data
GetServerSideProps
Next.js versus React.js
Maintainability
TypeScript support
Configuration
Server-side rendering
Image optimization
Server-side rendering with Node.js and Express.js.
Conclusion
7. Data Fetching
Introduction
Structure
Objectives
Fetching data in React
Fetch
Axios
GraphQL
Rest API versus GraphQl
Caching data
Memoization
useMemo
useCallBack
State management
Promises
Conclusion
8. Building Scalable Applications
Introduction
Structure
Objectives
Conditional rendering
Ternary operation
Logical operation
If else operation
Memoization
useMemo
useCallback
TypeScript
File organization
Separation of concerns
Higher order component
Solid principles
Conclusion
9. Testing
Introduction
Structure
Objectives
How to test components?
Functional test
Rendering test
Testing with Jest
React testing library
Regression test
End-to-end test with Cypress
Integration test with Jest
API mocking with Jest
Conclusion
Index

The book describes the best practices for creating the React application architecture. Then it will help you learn how to create clean, productive and easy-to-maintain React components using JavaScript and TypeScript.
The book will help you learn and work with some useful hooks in React. It will also help you learn how to enable server-side rendering for your React application. Later, the book will help you learn how to effectively style React components. Towards the end, the book will help you learn how to write tests for your React applications.