Entering
__Why React?
__History of React
Facebook's Challenges to the Front-End Development Environment of the 2010s
__BoltJS's emergence and limitations
React emerges as an alternative to the Facebook team
__Criticism and criticism of React
__React finally sees the light
__React's Present and Future

Chapter 1: JavaScript Essentials for React Development

1.1 Equivalence comparison in JavaScript
__1.1.1 Data types in JavaScript
__1.1.2 Differences in how values ​​are stored
__1.1.3 Another comparison formula in JavaScript, Object.is
__1.1.4 Equivalence comparison in React
__1.1.5 Summary
1.2 Function
__1.2.1 What is a function?
__1.2.2 Four ways to define a function
__1.2.3 Looking at various functions
__1.2.4 Things to watch out for when creating functions
__1.2.5 Summary
1.3 Class
__1.3.1 What is a class?
__1.3.2 Relationship between classes and functions
__1.3.3 Summary
1.4 Closure
__1.4.1 Definition of closure
__1.4.2 Variable scope, scope
__1.4.3 Using closures
__1.4.4 Things to note
__1.4.5 Summary
1.5 Understanding Event Loops and Asynchronous Communication
__1.5.1 Single-Threaded JavaScript
__1.5.2 What is an event loop?
__1.5.3 Task Queues and Microtask Queues
__1.5.4 Summary
1.6 JavaScript syntax frequently used in React
__1.6.1 Destructuring Assignment
__1.6.2 Deployment syntax
__1.6.3 Object Initializer
__1.6.4 Methods of the Array prototype: map, filter, reduce, forEach
__1.6.5 Ternary Conditional Operator
__1.6.6 Summary
1.7 TypeScript is a must, not an option
__1.7.1 What is TypeScript?
__1.7.2 How to use TypeScript to write React code effectively
__1.7.3 TypeScript Migration Guide
__1.7.4 Summary

Chapter 2: A Deep Dive into React's Core Elements

2.1 What is JSX?
__2.1.1 Definition of JSX
__2.1.2 JSX example
__2.1.3 How is JSX transformed into JavaScript?
__2.1.4 Summary
2.2 Virtual DOM and React Fiber
__2.2.1 DOM and browser rendering process
__2.2.2 Background of the Birth of Virtual DOM
__2.2.3 Architecture for Virtual DOM, React Fiber
__2.2.4 Fibers and the Virtual DOM
__2.2.5 Summary
2.3 Class Components and Functional Components
__2.3.1 Class-type components
__2.3.2 Functional Components
__2.3.3 Functional Components vs.
Class-type components
__2.3.4 Summary
2.4 How does rendering happen?
__2.4.1 What is React rendering?
__2.4.2 Why React Rendering Happens
__2.4.3 React's rendering process
__2.4.4 Render and Commit
__2.4.5 Examining Common Rendering Scenarios
__2.4.6 Summary
2.5 Memoization to remember heavy operations of components and functions
__2.5.1 Claim 1: Premature optimization is poisonous; add memoization only where absolutely necessary.
__2.5.2 Claim 2: The rendering process is expensive, so let's memoize everything.
__2.5.3 Conclusion and Summary

Chapter 3: A Deep Dive into React Hooks

3.1 Digging into all the hooks in React
__3.1.1 useState
__3.1.2 useEffect
__3.1.3 useMemo
__3.1.4 useCallback
__3.1.5 useRef
__3.1.6 useContext
__3.1.7 useReducer
__3.1.8 useImperativeHandle
__3.1.9 useLayoutEffect
__3.1.10 useDebugValue
__3.1.11 Hook Rules
__3.1.12 Summary
3.2 Should I use custom hooks or higher-order components?
__3.2.1 Custom Hooks
__3.2.2 Higher-order components
__3.2.3 Should I use custom hooks or higher-order components?
__3.2.4 Summary

Chapter 4: Server-Side Rendering

4.1 What is server-side rendering?
__4.1.1 The World of Single-Page Applications
__4.1.2 What is server-side rendering?
__4.1.3 Why you need to know both SPA and SSR
__4.1.4 Summary
4.2 Exploring the React API for Server-Side Rendering
__4.2.1 renderToString
__4.2.2 renderToStaticMarkup
__4.2.3 renderToNodeStream
__4.2.4 renderToStaticNodeStream
__4.2.5 hydrate
__4.2.6 Server-side rendering example project
__4.2.7 Summary
4.3 Next.js Overview
__4.3.1 What is Next.js?
__4.3.2 Getting Started with Next.js
__4.3.3 Data Fetching
__4.3.4 Applying Styles
Applying __4.3.5 _app.tsx
__4.3.6 Taking a look at next.config.js
__4.3.7 Summary

Chapter 5: React and State Management Libraries

5.1 Why is state management necessary?
__5.1.1 History of React State Management
__5.1.2 Summary
5.2 State Management with React Hooks
__5.2.1 The most basic method: useState and useReducer
__5.2.2 Let's go beyond the limitations of local state: Separating useState's state outside of it
__5.2.3 Using useState and Context at the same time
__5.2.4 State Management Libraries: Recoil, Jotai, and Zustand
__5.2.5 Summary

Chapter 6: Debugging with React Development Tools

6.1 What are React development tools?
6.2 Installing React Development Tools
6.3 Using React Development Tools
__6.3.1 Components
__6.3.2 Profiler
6.4 Summary

Chapter 7: Analyzing Applications Using Chrome Developer Tools

7.1 What are Chrome Developer Tools?
7.2 Elements tab
__7.2.1 Element Screen
__7.2.2 Element Information
7.3 Source tab
7.4 Network tab
7.5 Memory Tab
__7.5.1 Selecting a JavaScript Instance VM
__7.5.2 Heap Snapshot
__7.5.3 Timeline Allocation Instrumentation
__7.5.4 Allocation Sampling
7.6 Debugging the Next.js Environment
__7.6.1 Running a Next.js project in debug mode
__7.6.2 Driving Traffic to Your Next.js Server
__7.6.3 Identifying Memory Leaks in Next.js
7.7 Summary

Chapter 8: Setting Up an Environment for Writing Good React Code

8.1 Static Code Analysis with ESLint
__8.1.1 A Look at ESLint
__8.1.2 eslint-plugin and eslint-config
__8.1.3 Creating Your Own ESLint Rules
__8.1.4 Things to note
__8.1.5 Summary
8.2 React testing libraries recommended by the React team
__8.2.1 What is React Testing Library?
__8.2.2 Basics of JavaScript Testing
__8.2.3 Writing React component test code
__8.2.4 Testing custom hooks
__8.2.5 Things to consider before writing tests
__8.2.6 Several other tests worth trying
__8.2.7 Summary

Chapter 9: Building a Development and Deployment Environment with Modern React Development Tools

9.1 Setting up a React development environment with Next.js
__9.1.1 Building one by one without create-next-app
__9.1.2 Writing tsconfig.json
__9.1.3 Writing next.config.js
__9.1.4 Setting up ESLint and Prettier
__9.1.5 Setting Styles
__9.1.6 Writing Application Code
__9.1.7 Summary
9.2 Utilizing GitHub 100%
__9.2.1 Building a CI Environment with GitHub Actions
__9.2.2 Using useful actions and GitHub apps without writing them yourself
__9.2.3 Fixing Security Vulnerabilities with GitHub Dependabot
__9.2.4 Summary
9.3 Deploying a React Application
__9.3.1 Netlify
__9.3.2 Vercel
__9.3.3 DigitalOcean
__9.3.4 Summary
9.4 Dockerizing a React Application
__9.4.1 How to Dockerize a React App
__9.4.2 Deploying an image created with Docker
__9.4.3 Summary

Chapter 10: Exploring Changes in React 17 and 18

10.1 React 17 Overview
__10.1.1 Incremental Upgrade of React
__10.1.2 Change in event delegation method
__10.1.3 import React from 'reac' is no longer needed: new JSX transform
__10.1.4 Other major changes
__10.1.5 Summary
10.2 React 18 Overview
__10.2.1 A look at the newly added hooks
__10.2.2 react-dom/client
__10.2.3 react-dom/server
__10.2.4 Automatic Batching
__10.2.5 Stricter Mode Made More Strict
__10.2.6 Suspense feature enhancement
__10.2.7 Additional polyfills required due to discontinuation of Internet Explorer support
__10.2.8 Other changes worth knowing about
__10.2.9 Summary

Chapter 11: Next.js 13 and React 18

11.1 The Appearance of the App Directory
__11.1.1 Routing
11.2 React Server Components
__11.2.1 Limitations of existing React components and server-side rendering
__11.2.2 What is a server component?
__11.2.3 Differences between server-side rendering and server components
__11.2.4 How does the server component work?
11.3 React Server Components in Next.js
__11.3.1 Introduction of new fetch and removal of getServerSideProps, getStaticProps, and getInitialProps
__11.3.2 Static and Dynamic Rendering
__11.3.3 Caching, mutating, and revalidating
__11.3.4 Progressive Page Loading Using Streaming
11.4 Webpack's Competitor, Turbopack, Appears (beta)
11.5 Server Actions (alpha)
__11.5.1 form action
__11.5.2 Input's submit and image's formAction
__11.5.3 Integration with startTransition
__11.5.4 Tasks without server mutations
__11.5.5 Things to note when using server actions
11.6 Other changes
11.7 Next.js 13 Code Preview
__11.7.1 Implementing server-side rendering similar to getServerSideProps
__11.7.2 Implementing static page rendering similar to getStaticProps
__11.7.3 Loading, Streaming, Suspense
11.8 Summary and Precautions

Chapter 12: Core Web Metrics Every Web Developer Should Care About

12.1 Website and Performance
12.2 What are Core Web Metrics?
12.3 Maximum Content Pool Paint (LCP)
__12.3.1 Definition
__12.3.2 Meaning
__12.3.3 Example
__12.3.4 Criteria Score
__12.3.5 Improvement Plan
12.4 First Input Delay (FID)
__12.4.1 Definition
__12.4.2 Meaning
__12.4.3 Example
__12.4.4 Criteria Score
__12.4.5 Improvement Plan
12.5 Moving the Cumulative Layout (CLS)
__12.5.1 Definition
__12.5.2 Meaning
__12.5.3 Example
__12.5.4 Criteria Score
__12.5.5 Improvement Plan
__12.5.6 Not core web metrics, but important for performance verification
12.6 Summary

Chapter 13: Various Ways to Measure Web Page Performance

13.1 Check in the application
__13.1.1 create-react-app
__13.1.2 create-next-app
13.2 Google Lighthouse
__13.2.1 Google Lighthouse - Exploration Mode
__13.2.2 Google Lighthouse - Duration Mode
__13.2.3 Google Lighthouse - Snapshot
13.3 WebPageTest
__13.3.1 Performance Summary
__13.3.2 Opportunities & Experiments
__13.3.3 Filmstrip
__13.3.4 Details
__13.3.5 Web Vitals
__13.3.6 Optimizations
__13.3.7 Content
__13.3.8 Domains
__13.3.9 Console Log
__13.3.10 Detected Technologies
__13.3.11 Main-thread Processing
__13.3.12 Lighthouse Report
__13.3.13 Other
13.4 Chrome Developer Tools
__13.4.1 Performance Statistics
__13.4.2 Performance
13.5 Summary

Chapter 14: React and Webpage Security Issues for Website Security

14.1 Cross-site scripting (XSS) in React
__14.1.1 dangerouslySetInnerHTML prop
__14.1.2 Direct insertion using useRef
__14.1.3 How to avoid XSS problems in React
14.2 Be careful with getServerSideProps and server components.
14.3 The values ​​of the 〈a〉 tag must be appropriately restricted.
14.4 Setting HTTP Security Headers
__14.4.1 Strict-Transport-Security
__14.4.2 X-XSS-Protection
__14.4.3 X-Frame-Options
__14.4.4 Permissions-Policy
__14.4.5 X-Content-Type-Options
__14.4.6 Referrer-Policy
__14.4.7 Content-Security-Policy
__14.4.8 Setting the security header
__14.4.9 Checking the security header
14.5 Avoid using vulnerable packages
14.6 OWASP Top 10
14.7 Summary

Chapter 15: Conclusion

15.1 Things to Consider When Starting a React Project
__15.1.1 If the service is under maintenance, upgrade the React version from at least 16.8.6 to at most 17.0.2.
__15.1.2 If you are targeting Internet Explorer 11 support, be especially careful.
__15.1.3 Prioritize server-side rendering applications
__15.1.4 Use the state management library only when absolutely necessary.
__15.1.5 Be careful when installing React dependency libraries
15.2 React May Disappear Someday
__15.2.1 So is React really the perfect library?
__15.2.2 The Light and Darkness of the Open Source Ecosystem
__15.2.3 jQuery, AngularJS, React, and What's Next?
__15.2.4 Flexible attitude to have as a web developer

What this book covers

- History of React
- Basic concepts that make up React - From JSX, functional/class components, to memoization
- React's server-side rendering and server components
- State management library for the React ecosystem
- Debugging React applications
- Changes in React 17 and 18
- Next.js 12 and 13
- React-based website performance analysis and security issues