React application architecture for production learn best practices and expert tips to deliver enterprise-ready react web apps
A hands-on guide to help you develop skills and confidence in building and structuring React applications in a well-organized way using the best tools in the React ecosystem Key Features Discover solutions to complex problems faced while creating production-ready apps with React Develop scalable Rea...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
London, England :
Packt Publishing
[2023]
|
| Edición: | 1st ed |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009711815206719 |
Tabla de Contenidos:
- Cover
- Title Page
- Copyright and Credits
- Contributors
- Table of Contents
- Preface
- Chapter 1: Understanding the Architecture of React Applications
- Benefits of having a good application architecture
- A good foundation for the project
- Easier project management
- Increased development speed and productivity
- Cost-effectiveness
- Better product quality
- Exploring the architectural challenges of React applications
- What are the challenges when building a React application?
- Understanding architectural decisions when building React applications
- Bad architectural decisions
- Good architectural decisions
- Planning our application
- What are we building?
- Application requirements
- Data model overview
- Exploring the technical decisions
- Summary
- Chapter 2: Setup and Project Structure Overview
- Technical requirements
- Next.js application overview
- Why Next.js?
- Next.js application structure
- TypeScript setup overview and usage
- Why TypeScript?
- TypeScript setup
- Basic TypeScript usage
- ESLint setup overview
- Prettier setup overview
- Pre-committing checks setup overview
- Project structure overview
- Features
- Summary
- Chapter 3: Building and Documenting Components
- Technical requirements
- Chakra UI
- Chakra UI setup
- Building components
- Button
- InputField
- Link
- Storybook
- Storybook configuration
- Storybook scripts
- Documenting components
- Button stories
- Exercises
- Summary
- Chapter 4: Building and Configuring Pages
- Technical requirements
- Next.js routing
- Next.js rendering strategies
- Client-side rendering
- Server-side rendering
- Next.js SEO
- Layouts
- Wrapping JSX of every page with the layout component
- Attaching the layout to the page component and using it to wrap the entire component
- Building the pages.
- The public organization details page
- The public job details page
- The jobs page in the dashboard
- The job details page in the dashboard
- The create job page
- 404 page
- Summary
- Chapter 5: Mocking the API
- Technical requirements
- Why is mocking useful?
- Introduction to MSW
- Configuration overview
- Writing our first handler
- Configuring data models
- Configuring request handlers for API endpoints
- API utils
- Auth handlers
- Jobs handlers
- Organizations handlers
- Summary
- Chapter 6: Integrating the API into the Application
- Technical requirements
- Configuring the API client
- Configuring React Query
- Why React Query?
- Configuring React Query
- Defining the API layer for the features
- Jobs
- Organizations
- Consuming the API in the application
- Public organization
- Public job
- Dashboard jobs
- Dashboard job
- Create job
- Summary
- Chapter 7: Implementing User Authentication and Global Notifications
- Technical requirements
- Implementing the authentication system
- Authentication system overview
- Building authentication features
- Protecting resources that require the user to be authenticated
- Implementing notifications
- Creating the store
- Creating the UI
- Integrating and using notifications
- Summary
- Chapter 8: Testing
- Technical requirements
- Unit testing
- Integration testing
- Dashboard jobs page
- Dashboard job page
- Job creation page
- Public organization page
- Public job page
- Login page
- End-to-end testing
- Dashboard flow
- Public flow
- Summary
- Chapter 9: Configuring CI/CD for Testing and Deployment
- Technical requirements
- What is CI/CD?
- Using GitHub Actions
- Workflows
- Events
- Jobs
- Actions
- Runners
- Configuring the pipeline for testing
- Code checks job
- End-to-end testing job.
- Configuring the pipeline for deploying to Vercel
- Having a Vercel account
- Disabling GitHub integration for Vercel
- Linking the project to Vercel
- Providing environment variables to GitHub Actions
- Creating the job that will deploy the application
- Summary
- Chapter 10: Going Beyond
- Feature improvements
- Jobs feature improvements
- Organization improvements
- Adding job applications
- Filtering and paginating lists of data
- Adding user registration
- Technical improvements
- Server-side rendering and caching
- React Query hydration for SSR
- Using query key factories
- Code scaffolding
- Validating form inputs and API responses with Zod
- Next.js 13
- Appendix
- GraphQL
- Monorepos
- Micro frontend architecture
- Summary
- Index
- Other Books You May Enjoy.
