Bugl Daniel / Багл Дэниел - Modern Full-Stack React Projects / Современные полнофункциональные React проекты [2024, PDF/EPUB, ENG]

Примеры страниц (скриншоты)

Оглавление

Preface xvii
Part 1: Getting Started with Full-Stack Development
1
Preparing for Full-Stack Development 3
Technical requirements 3
Motivation to become a full-stack developer 4
What is new in this release of Full-Stack React Projects? 4
Getting the most out of this book 4
Setting up the development environment 5
Installing VS Code and extensions 5
Setting up a project with Vite 8
Setting up ESLint and Prettier to enforce best practices and code style 11
Setting up Husky to make sure we commit proper code 16
Summary 20
2
Getting to Know Node.js and MongoDB 21
Technical requirements 21
Writing and running scripts with Node.js 22
Similarities and differences between JavaScript in the browser and in Node.js 22
Creating our first Node.js script 23
Handling files in Node.js 24
Concurrency with JavaScript in the browser and Node.js 25
Creating our first web server 28
Extending the web server to serve our JSON file 29
Introducing Docker, a platform for containers 30
The Docker platform 31
Installing Docker 32
Creating a container 32
Accessing Docker via VS Code 34
Introducing MongoDB, a document
database 34
Setting up a MongoDB server 37
Running commands directly on the database 38
Accessing the database via VS Code 42
Accessing the MongoDB database
via Node.js 45
Summary 47
Part 2: Building and Deploying Our First
Full-Stack Application with a REST API
3
Implementing a Backend Using Express, Mongoose ODM, and Jest 51
Technical requirements 51
Designing a backend service 52
Creating the folder structure for our backend
service 53
Creating database schemas using
Mongoose 55
Defining a model for blog posts 56
Using the blog post model 57
Defining creation and last update dates in the
blog post 59
Developing and testing service
functions 60
Setting up the test environment 60
Writing our first service function: createPost 63
Defining test cases for the createPost service
function 64
Defining a function to list posts 66
Defining test cases for list posts 67
Defining the get single post, update and
delete post functions 71
Using the Jest VS Code extension 74
Providing a REST API using Express 75
Defining our API routes 77
Setting up Express 77
Using dotenv for setting environment variables 79
Using nodemon for easier development 81
Creating our API routes with Express 83
Summary 90
4
Integrating a Frontend Using React and TanStack Query 91
Technical requirements 91
Principles of React 92
Setting up a full-stack React project 93
Creating the user interface for our
application 94
Component structure 95
Implementing static React components 97
Integrating the backend service
using TanStack Query 106
Setting up TanStack Query for React 107
Fetching blog posts 108
Implementing filters and sorting 110
Creating new posts 114
Summary 118
5
Deploying the Application with Docker and CI/CD 119
Technical requirements 119
Creating Docker images 120
Creating the backend Dockerfile 120
Creating a .dockerignore file 122
Building the Docker image 122
Creating and running a container from our
image 123
Creating the frontend Dockerfile 124
Creating the .dockerignore file for
the frontend 126
Building the frontend Docker image 126
Creating and running the frontend container 127
Managing multiple images using Docker
Compose 127
Cleaning up unused containers 129
Deploying our full-stack application
to the cloud 130
Creating a MongoDB Atlas database 130
Creating an account on Google Cloud 131
Deploying our Docker images to a Docker
registry 132
Deploying the backend Docker image to
Cloud Run 134
Deploying the frontend Docker image to
Cloud Run 135
Configuring CI to automate testing 136
Adding CI for the frontend 137
Adding CI for the backend 138
Configuring CD to automate the
deployment 141
Getting Docker Hub credentials 141
Getting Google Cloud credentials 141
Defining the deployment workflow 142
Summary 146
Part 3: Practicing Development of Full-Stack
Web Applications
6
Adding Authentication with JWT 149
Technical requirements 149
What is JWT? 150
JWT header 150
JWT payload 151
JWT signature 152
Creating a JWT 152
Using JWT 153
Storing JWT 155
Implementing login, signup, and
authenticated routes in the backend
using JWTs 155
Creating the user model 155
Creating the signup service 156
Creating the signup route 157
Creating the login service 158
Creating the login route 160
Defining authenticated routes 162
Accessing the currently logged-in user 164
Integrating login and signup in the
frontend using React Router and JWT 166
Using React Router to implement multiple
routes 166
Creating the signup page 168
Linking to other routes using the Link
component 170
Creating the login page and storing the JWT 172
Using the stored JWT and implementing a
simple logout 174
Fetching the usernames 175
Sending the JWT header when creating posts 178
Advanced token handling 180
Summary 181
7
Improving the Load Time Using Server-Side Rendering 183
Technical requirements 183
Benchmarking the load time of our
application 184
Rendering React components on the
server 191
Setting up the server 193
Defining the server-side entry point 196
Defining the client-side entry point 196
Updating index.html and package.json 197
Making React Router work with server-side
rendering 198
Server-side data fetching 204
Using initial data 204
Using hydration 205
Advanced server-side rendering 209
Summary 212
8
Making Sure Customers Find You with Search Engine
Optimization 213
Technical requirements 213
Optimizing an application for search
engines 214
Creating a robots.txt file 215
Creating separate pages for posts 216
Creating meaningful URLs (slugs) 221
Adding dynamic titles 222
Adding other meta tags 223
Creating a sitemap 226
Improving social media embeds 229
Open Graph meta tags 229
Using the OG article meta tags 230
Summary 232
9
Implementing End-to-End Tests Using Playwright 233
Technical requirements 233
Setting up Playwright for
end-to-end testing 234
Installing Playwright 234
Preparing the backend for end-to-end testing 235
Writing and running
end-to-end tests 237
Using the VS Code extension 238
Reusable test setups using fixtures 244
Overview of built-in fixtures 245
Writing our own fixture 245
Using custom fixtures 247
Viewing test reports and running in
CI 248
Viewing an HTML report 248
Running Playwright tests in CI 250
Summary 251
10
Aggregating and Visualizing Statistics Using MongoDB
and Victory 253
Technical requirements 254
Collecting and simulating events 254
Creating the event model 254
Defining a service function and route to track
events 255
Collecting events on the frontend 257
Simulating events 258
Aggregating data with MongoDB 262
Getting the total number of views per post 262
Getting the number of daily views per post 264
Calculating the average session duration 266
Implementing data aggregation in
the backend 268
Defining aggregation service functions 268
Defining the routes 271
Integrating and visualizing data on
the frontend using Victory 272
Integrating the aggregation API 273
Visualizing data using Victory 275
Summary 279
11
Building a Backend with a GraphQL API 281
Technical requirements 281
What is GraphQL? 282
Mutations 284
Implementing a GraphQL API in a
backend 285
Implementing fields that query posts 287
Defining the Post type 289
Defining the User type 290
Trying out deeply nested queries 291
Implementing input types 294
Implementing GraphQL
authentication and mutations 296
Adding authentication to GraphQL 296
Implementing mutations 297
Using mutations 299
Overview of advanced GraphQL
concepts 301
Fragments 302
Introspection 303
Summary 303
12
Interfacing with GraphQL on the Frontend Using Apollo Client 305
Technical requirements 305
Setting up Apollo Client and making
our first query 306
Querying posts from the frontend using
GraphQL 307
Resolving author usernames in a single query 310
Using variables in GraphQL queries 312
Using fragments to reuse parts of queries 312
Using mutations on the frontend 314
Migrating login to GraphQL 316
Migrating create post to GraphQL 317
Summary 320
Part 4: Exploring an Event-Based Full-Stack
Architecture
13
Building an Event-Based Backend Using Express and Socket.IO 323
Technical requirements 323 What are event-based applications? 324
What are WebSockets? 325
What is Socket.IO? 326
Connecting to Socket.IO 326
Emitting and receiving events 327
Setting up Socket.IO 328
Setting up a simple Socket.IO client 329
Creating a backend for a chat app
using Socket.IO 331
Emitting events to send chat messages from
the client to the server 331
Broadcasting chat messages from the server
to all clients 332
Joining rooms to send messages in 333
Using acknowledgments to get information
about a user 334
Adding authentication by
integrating JWT with Socket.IO 336
Summary 340
14
Creating a Frontend to Consume and Send Events 341
Technical requirements 341
Integrating the Socket.IO client
with React 342
Cleaning up the project 342
Creating a Socket.IO context 343
Hooking up the context and displaying
the status 346
Disconnecting socket on logout 350
Implementing chat functionality 350
Implementing the chat components 351
Implementing a useChat hook 352
Implementing the ChatRoom component 354
Implementing chat commands with
acknowledgments 356
Summary 358
15
Adding Persistence to Socket.IO Using MongoDB 359
Technical requirements 359
Storing and replaying messages
using MongoDB 360
Creating the Mongoose schema 360
Creating the service functions 361
Storing and replaying messages 361
Visually distinguishing replayed messages 363
Refactoring the app to be more
extensible 365
Defining service functions 365
Refactoring the Socket.IO server to use the
service functions 367
Refactoring the client-side code 368
Implementing commands to join and
switch rooms 370
Summary 373
Part 5: Advancing to Enterprise-Ready Full-Stack
Applications
16
Getting Started with Next.js 377
Technical requirements 378
What is Next.js? 378
Setting up Next.js 379
Introducing the App Router 382
Defining the folder structure 384
Creating static components
and pages 386
Defining components 386
Defining pages 390
Adding links between pages 392
Summary 395
17
Introducing React Server Components 397
Technical requirements 397
What are RSCs? 398
Adding a data layer to our
Next.js app 402
Setting up the database connection 403
Creating the database models 404
Defining data layer functions 405
Using RSCs to fetch data from the
database 409
Fetching a list of posts 409
Fetching a single post 410
Using Server Actions to sign up,
log in, and create new posts 412
Implementing the signup page 413
Implementing the login page and JWT
handling 416
Checking if the user is logged in 418
Implementing logout 419
Implementing post creation 421
Summary 422
18
Advanced Next.js Concepts and Optimizations 423
Technical requirements 423
Defining API routes in Next.js 424
Creating an API route for listing blog posts 424
Caching in Next.js 426
Exploring static rendering in API routes 428
Making the route dynamic 430
Caching functions in the data layer 430
Revalidating the cache via Server Actions 433
Revalidating the cache via a Webhook 434
Revalidating the cache periodically 435
Opting out of caching 436
SEO with Next.js 436
Adding dynamic titles and meta tags 436
Creating a robots.txt file 437
Creating meaningful URLs (slugs) 438
Creating a sitemap 439
Optimized image and font loading
in Next.js 440
The Font component 440
The Image component 442
Summary 444
19
Deploying a Next.js App 445
Technical requirements 445
Deploying a Next.js app with Vercel 446
Setting environment variables in Vercel 447
Creating a custom deployment setup
for Next.js apps 451
Summary 454
20
Diving Deeper into Full-Stack Development 455
Overview of other full-stack
frameworks 455
Next.js 456
Remix 456
Gatsby 457
Overview of UI libraries 457
Material UI (MUI) 458
Tailwind CSS 458
React Aria 458
NextUI 458
Overview of advanced state
management solutions 459
Recoil 459
Jotai 459
Redux 459
MobX 459
xstate 460
Zustand 460
Pointers on maintaining large-scale
projects 460
Using TypeScript 460
Setting up a Monorepo 460
Optimizing the bundle size 461
Summary 461
Index 463
Other Books You May Enjoy 476