Learn react with typescript a beginner's guide to reactive web development with react 18 and typescript
Reading, navigating, and debugging a large frontend codebase is a major issue faced by frontend developers. This book is designed to help web developers like you learn about ReactJS and TypeScript, both of which power large-scale apps for many organizations. This second edition of Learn React with T...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England ; Mumbai :
Packt Publishing
[2023]
|
| Edición: | Second edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009726539906719 |
Tabla de Contenidos:
- Intro
- Preface
- Part 1: Introduction
- Chapter 1: Introducing React
- Technical requirements
- Understanding the benefits of React
- Understanding JSX
- Creating a component
- Creating a CodeSandbox project
- Understanding the React entry point
- Understanding the React component tree
- Creating a basic alert component
- Understanding imports and exports
- Understanding the importance of modules
- Using export statements
- Using import statements
- Adding Alert to the App component
- Using props
- Understanding props
- Adding props to the alert component
- Using state
- Understanding state
- Implementing a visible state in the alert component
- Adding a close button to Alert
- Using events
- Understanding events
- Implementing a close button click handler in the alert
- Implementing an alert close event
- Summary
- Questions
- Answers
- Chapter 2: Introducing TypeScript
- Technical requirements
- Understanding the benefits of TypeScript
- Understanding TypeScript
- Catching type errors early
- Improving developer experience and productivity with IntelliSense
- Understanding JavaScript types
- Using basic TypeScript types
- Using type annotations
- Using type inference
- Using the Date type
- Using the any type
- Using the unknown type
- Using the void type
- Using the never type
- Using arrays
- Creating TypeScript types
- Using object types
- Creating type aliases
- Creating interfaces
- Creating classes
- Creating enumerations
- Creating union types
- Using the TypeScript compiler
- Summary
- Questions
- Answers
- Chapter 3: Setting Up React and TypeScript
- Technical requirements
- Creating a project with webpack
- Introducing webpack
- Creating the folder structure
- Creating package.json
- Adding a web page
- Adding TypeScript
- Adding React
- Adding Babel.
- Adding webpack
- Creating a project with Create React App
- Using Create React App
- Adding linting to Visual Studio Code
- Adding code formatting
- Starting the app in development mode
- Producing a production build
- Creating a React and TypeScript component
- Adding a props type
- Adding a state type
- Using React DevTools
- Summary
- Questions
- Answers
- Chapter 4: Using React Hooks
- Technical requirements
- Using the effect Hook
- Understanding the effect Hook parameters
- The rules of Hooks
- Effect cleanup
- Creating the project
- Fetching data using the effect Hook
- Using state Hooks
- Using useState
- Understanding useReducer
- Using useReducer
- Using the ref Hook
- Understanding the ref Hook
- Using the ref Hook
- Using the memo Hook
- Understanding the memo Hook
- Using the memo Hook
- Using the callback Hook
- Understanding the callback Hook
- Understanding when a component is re-rendered
- Using the callback Hook
- Summary
- Questions
- Answers
- Part 2: App Fundamentals
- Chapter 5: Approaches to Styling React Frontends
- Technical requirements
- Using plain CSS
- Creating the project
- Understanding how to reference CSS
- Using plain CSS in the alert component
- Experiencing CSS clashes
- Using CSS modules
- Understanding CSS modules
- Using CSS modules in the alert component
- Using CSS-in-JS
- Understanding CSS-in-JS
- Using Emotion in the alert component
- Using Tailwind CSS
- Understanding Tailwind CSS
- Installing and configuring Tailwind CSS
- Using Tailwind CSS
- Using SVGs
- Understanding how to use SVGs in React
- Adding SVGs to the alert component
- Summary
- Questions
- Answers
- Chapter 6: Routing with React Router
- Technical requirements
- Introducing React Router
- Creating the project
- Understanding React Router
- Installing React Router.
- Declaring routes
- Creating the products list page
- Understanding React Router's router
- Declaring the products route
- Creating navigation
- Using the Link component
- Using the NavLink component
- Using nested routes
- Understanding nested routes
- Using nested routes in the app
- Using route parameters
- Understanding route parameters
- Using route parameters in the app
- Creating an error page
- Understanding error pages
- Adding an error page
- Using index routes
- Understanding index routes
- Using an index route in the app
- Using search parameters
- Understanding search parameters
- Adding search functionality to the app
- Navigating programmatically
- Using form navigation
- Implementing lazy loading
- Understanding React lazy loading
- Adding a lazy admin page to the app
- Summary
- Questions
- Answers
- Chapter 7: Working with Forms
- Technical requirements
- Using controlled fields
- Creating the project
- Creating a contact form
- Using uncontrolled fields
- Using React Router Form
- Using native validation
- Using React Hook Form
- Understanding React Hook Form
- Using React Hook Form
- Adding validation
- Summary
- Questions
- Answers
- Part 3: Data
- Chapter 8: State Management
- Technical requirements
- Creating the project
- Using prop drilling
- Using React context
- Understanding React context
- Using React context
- Using Redux
- Understanding Redux
- Installing Redux
- Using Redux
- Summary
- Questions
- Answers
- Chapter 9: Interacting with RESTful APIs
- Technical requirements
- Creating the project
- Setting up the project
- Understanding the component structure
- Creating a REST API
- Using the effect hook with fetch
- Getting blog posts using fetch
- Strongly typing response data
- Creating a blog posts list component.
- Creating a blog posts page component
- Posting data with fetch
- Creating new blog posts using fetch
- Creating a blog post form component
- Using React Router
- Understanding React Router data loading
- Using React Router for data loading
- Deferred React Router data fetching
- Using React Query
- Installing React Query
- Adding the React Query provider
- Getting data using React Query
- Updating data using React Query
- Using React Router with React Query
- Summary
- Questions
- Answers
- Chapter 10: Interacting with GraphQL APIs
- Technical requirements
- Understanding the GraphQL syntax
- Returning flat data
- Returning hierarchical data
- Specifying query parameters
- GraphQL mutations
- Setting up the project
- Creating the project
- Creating a PAT for the GitHub GraphQL API
- Creating environment variables
- Using React Query with fetch
- Creating the header
- Creating the repository page
- Using Apollo Client
- Understanding Apollo Client
- Installing Apollo Client
- Refactoring the App component
- Refactoring the Header component
- Refactoring the repository page
- Summary
- Questions
- Answers
- Part 4: Advanced React
- Chapter 11: Reusable Components
- Technical requirements
- Creating the project
- Using generic props
- Understanding generics
- Creating a basic list component
- Using props spreading
- Using render props
- Understanding the render props pattern
- Adding a renderItem prop
- Adding checked functionality
- Creating custom hooks
- Understanding custom hooks
- Extracting checked logic into a custom hook
- Allowing the internal state to be controlled
- Understanding how the internal state can be controlled
- Allowing checkedIds to be controlled
- Summary
- Questions
- Answers
- Chapter 12: Unit Testing with Jest and React Testing Library
- Technical requirements.
- Testing pure functions
- Understanding a Jest test
- Testing isChecked
- Testing exceptions
- Running tests
- Testing components
- Understanding React Testing Library
- Implementing checklist component tests
- Using test IDs
- Simulating user interactions
- Understanding fireEvent and user-event
- Implementing checklist tests for checking items
- Getting code coverage
- Running code coverage
- Understanding the code coverage report
- Gaining full coverage on the checklist component
- Ignoring files in the coverage report
- Summary
- Questions
- Answers
- Index
- Other Books You May Enjoy.
