舉報 
會員
Learn React with TypeScript 3
Reacttodayisoneofthemostpreferredchoicesforfrontenddevelopment.UsingReactwithTypeScriptenhancesdevelopmentexperienceandoffersapowerfulcombinationtodevelophighperformingwebapps.Inthisbook,you’lllearnhowtocreatewellstructuredandreusablereactcomponentsthatareeasytoreadandmaintainbyleveragingmodernwebdevelopmenttechniques.WewillstartwithlearningcoreTypeScriptprogrammingconceptsbeforemovingontobuildingreusableReactcomponents.You'lllearnhowtoensureallyourcomponentsaretype-safebyleveragingTypeScript'scapabilities,includingthelatestonProjectreferences,Tuplesinrestparameters,andmuchmore.You'llthenbeintroducedtocorefeaturesofReactsuchasReactRouter,managingstatewithReduxandapplyinglogicinlifecyclemethods.Furtheron,you'lldiscoverthelatestfeaturesofReactsuchashooksandsuspensewhichwillenableyoutocreatepowerfulfunction-basedcomponents.You'llgettogripswithGraphQLwebAPIusingApolloclienttomakeyourappmoreinteractive.Finally,you'lllearnhowtowriterobustunittestsforReactcomponentsusingJest.Bytheendofthebook,you'llbewellversedwithallyouneedtodevelopfullyfeaturedwebappswithReactandTypeScript.
最新章節
- Leave a review - let other readers know what you think
- Other Books You May Enjoy
- Chapter 11: Unit Testing with Jest
- Chapter 10: Interacting with GraphQL APIs
- Chapter 9: Interacting with RESTful APIs
- Chapter 8: React Redux
品牌：中圖公司
上架時間：2021-06-10 18:24:19
出版社：Packt Publishing
本書數字版權由中圖公司提供，并由其授權上海閱文信息技術有限公司制作發行
- Leave a review - let other readers know what you think 更新時間：2021-06-10 19:17:31
- Other Books You May Enjoy
- Chapter 11: Unit Testing with Jest
- Chapter 10: Interacting with GraphQL APIs
- Chapter 9: Interacting with RESTful APIs
- Chapter 8: React Redux
- Chapter 7: Working with Forms
- Chapter 6: Component Patterns
- Chapter 5: Advanced Types
- Chapter 4: Routing with React Router
- Chapter 3: Getting Started with React and TypeScript
- Chapter 2: What is New in TypeScript 3
- Chapter 1: TypeScript Basics
- Answers
- Further reading
- Questions
- Summary
- Getting code coverage
- Mocking Axios with axios-mock-adapter
- Using a mock function in Jest
- Mocking dependencies
- Using Jest snapshot tests
- Creating a second test for a valid form submission
- Using fireEvent for user interaction
- Removing CSS class references from our tests
- Installing react-testing-library
- Improving our tests with react-testing-library
- Creating a basic component test
- Testing components
- Adding structure to unit test results
- Understanding Jest watch options
- Creating a basic pure function test
- Testing pure functions
- Technical requirements
- Unit Testing with Jest
- Further reading
- Questions
- Summary
- Updating the cache after a Mutation
- Clearing the caching using refetchQueries
- Working with cached data in Apollo
- Implementing a mutation with Apollo
- Rendering the search result
- Implementing the search query
- Implementing the search form
- Adding a repository search component
- Using the query component to query GraphQL
- Adding an Apollo provider
- Migrating from axios to Apollo
- Installing Apollo client
- Using Apollo GraphQL client
- Querying the GraphQL server
- Creating our app
- Getting a GitHub personal access token
- Using axios as a GraphQL client
- Writing GraphQL data
- Query parameters
- Returning nested data
- Basic query
- Reading GraphQL data
- GraphQL query and mutation syntax
- Technical requirements
- Interacting with GraphQL APIs
- Further reading
- Questions
- Summary
- Using axios with function components
- Deleting data with axios
- Updating data with axios
- Creating data with axios
- Canceling requests
- Timeouts
- Request HTTP headers
- Handling errors
- Basic GET request
- Getting data with axios
- Installing axios
- Using axios with class components
- Deleting data with fetch
- Basic PATCH request
- Basic PUT request
- Changing data with fetch
- Request HTTP headers
- Basic POST request
- Creating data with fetch
- Handling errors
- Getting response status
- Basic GET request
- Getting data with fetch
- Using fetch
- async and await
- Creating a promised based function
- Consuming a promised-based function
- Promises
- Handling callback errors
- Callback execution
- Callbacks
- Writing asynchronous code
- Technical requirements
- Interacting with RESTful APIs
- Further reading
- Questions
- Summary
- Managing state with useReducer
- Creating and connecting BasketSummary to the store
- Connecting ProductPage to the store
- Adding basket state and actions to the store
- Adding product state and actions to the store
- Connecting ProductsPage to the loading store state
- Connecting ProductsPage to the store
- Connecting components to the store
- Adding the store Provider component
- Connecting our React app to the store
- Creating a store
- Creating reducers
- Creating actions
- Creating state and action types
- Creating actions
- Installing Redux
- Key concepts
- Principles
- Principles and key concepts
- Technical requirements
- React Redux
- Further reading
- Questions
- Summary
- Consuming the onSubmit form prop
- Adding a onSubmit form prop
- Adding a submit button to the form
- Form submission
- Rendering validation error messages
- Triggering validation rule execution from field
- Invoking validation rules
- Tracking validation error messages
- Adding a validation rules prop to form
- Validating forms
- Implementing our new ContactUs component
- Sharing state with React context
- Adding a basic Field component
- Creating a basic form component
- Reducing boilerplate code with generic components
- Creating controlled inputs
- Adding a Contact Us page
- Creating a form with controlled components
- Technical requirements
- Working with Forms
- Further reading
- Questions
- Summary
- Consuming the withLoader HOC
- Implementing the withLoader HOC
- Adding asynchronous data fetching
- Higher-order components
- Using children prop for tab content
- Using render prop for tab headings
- Completing Tabs with render props
- Render props pattern
- Sharing state with React context
- Leveraging the compound component pattern
- Creating a basic tab component
- Adding reviews to a product
- Compound components
- Container and presentational components
- Technical requirements
- Component Patterns
- Further reading
- Questions
- Summary
- Lookup and mapped types
- Overload signatures
- Generic classes
- Generic functions
- Generics
- Using a user-defined type guard
- Using the in keyword
- Using the instanceof keyword
- Using the typeof keyword
- Type guards
- Discriminated union pattern
- String literal union types
- String literal types
- Union types
- Technical requirements
- Advanced Types
- Further reading
- Questions
- Summary
- Lazy loading routes
- Animated transitions
- Nested routes
- Route prompts
- Query parameters
- Conditional redirect
- Simple redirect
- Implementing page redirects
- Handling not found routes
- Route parameters
- Using the NavLink component
- Using the Link component
- Creating navigation
- Declaring routes
- Installing React Router with routing types
- Technical requirements
- Routing with React Router
- Further reading
- Questions
- Summary
- Optimizing function component rendering
- Function component life cycle hooks
- Stateful function components
- Creating a basic function component
- Creating a function component
- Deprecated life cycle methods
- shouldComponentUpdate
- getSnapshotBeforeUpdate and componentDidUpdate
- getDerivedStateFromProps
- componentWillUnmount
- componentDidMount
- Class component life cycle methods
- Changing state
- Initializing the state
- Defining state type
- Class component states
- Function props
- The this problem
- Basic event handlers
- Handling class component events
- Default prop values
- Optional props
- Component props
- JSX
- Creating a basic class component
- Creating a class component
- Creating start and build scripts
- Project folders and files
- Adding webpack
- Creating a simple React component
- Creating a root web page
- Adding React with types
- Adding TSLint
- Creating tsconfig.json
- Adding TypeScript
- Creating package.json
- Creating our folder structure
- Creating a project manually
- Using create-react-app
- Creating a React and TypeScript project
- Technical requirements
- Getting Started with React and TypeScript
- Further reading
- Questions
- Summary
- Default JSX properties
- Build mode
- Cross-project Go to Definition
- Additions to compiler options
- Referencing projects
- Setting up an example
- Project references
- Type narrowing with a type assertion
- Type checking with a type predicate
- The unknown type
- Optional tuple elements
- Empty tuples
- Spread expressions
- Tuple function parameters
- Open-ended tuples
- JavaScript rest and spread syntax
- Tuples
- Technical requirements
- What is New in TypeScript 3
- Further reading
- Questions
- Summary
- Code formatting
- Excluding files
- Built-in rules
- Configuring rules
- Installing TSLint
- TypeScript linting
- Specifying files for compilation
- tsconfig.json
- --moduleResolution
- --sourceMap
- --noImplicitReturns
- --noImplicitAny
- --watch
- --allowJS
- --module
- --outDir
- --target
- Common options
- Configuring compilation
- Default exports
- Importing
- Exporting
- Module formats
- Structuring code into modules
- Static
- Property setters and getters
- Access modifiers
- Abstract classes
- Extending classes
- Constructors
- Implementing interfaces
- Basic classes
- Classes
- Type aliases
- Extending interfaces
- Readonly properties
- Optional properties and parameters
- Method signatures
- Properties
- Interfaces
- Creating interfaces types aliases and classes
- Arrays
- Objects
- Enumerations
- Never
- Void
- Any
- Type inference
- Type annotations
- Primitive types
- Understanding basic types
- Using future JavaScript features
- Better developer experience and productivity
- Catching coding errors early
- Understanding the benefits of TypeScript
- Technical requirements
- TypeScript Basics
- Reviews
- Get in touch
- Conventions used
- Download the color images
- Download the example code files
- To get the most out of this book
- What this book covers
- Who this book is for
- Preface
- Packt is searching for authors like you
- About the reviewers
- About the author
- Contributors
- Packt.com
- Why subscribe?
- About Packt
- Title Page
- coverpage
- coverpage
- Title Page
- About Packt
- Why subscribe?
- Packt.com
- Contributors
- About the author
- About the reviewers
- Packt is searching for authors like you
- Preface
- Who this book is for
- What this book covers
- To get the most out of this book
- Download the example code files
- Download the color images
- Conventions used
- Get in touch
- Reviews
- TypeScript Basics
- Technical requirements
- Understanding the benefits of TypeScript
- Catching coding errors early
- Better developer experience and productivity
- Using future JavaScript features
- Understanding basic types
- Primitive types
- Type annotations
- Type inference
- Any
- Void
- Never
- Enumerations
- Objects
- Arrays
- Creating interfaces types aliases and classes
- Interfaces
- Properties
- Method signatures
- Optional properties and parameters
- Readonly properties
- Extending interfaces
- Type aliases
- Classes
- Basic classes
- Implementing interfaces
- Constructors
- Extending classes
- Abstract classes
- Access modifiers
- Property setters and getters
- Static
- Structuring code into modules
- Module formats
- Exporting
- Importing
- Default exports
- Configuring compilation
- Common options
- --target
- --outDir
- --module
- --allowJS
- --watch
- --noImplicitAny
- --noImplicitReturns
- --sourceMap
- --moduleResolution
- tsconfig.json
- Specifying files for compilation
- TypeScript linting
- Installing TSLint
- Configuring rules
- Built-in rules
- Excluding files
- Code formatting
- Summary
- Questions
- Further reading
- What is New in TypeScript 3
- Technical requirements
- Tuples
- JavaScript rest and spread syntax
- Open-ended tuples
- Tuple function parameters
- Spread expressions
- Empty tuples
- Optional tuple elements
- The unknown type
- Type checking with a type predicate
- Type narrowing with a type assertion
- Project references
- Setting up an example
- Referencing projects
- Additions to compiler options
- Cross-project Go to Definition
- Build mode
- Default JSX properties
- Summary
- Questions
- Further reading
- Getting Started with React and TypeScript
- Technical requirements
- Creating a React and TypeScript project
- Using create-react-app
- Creating a project manually
- Creating our folder structure
- Creating package.json
- Adding TypeScript
- Creating tsconfig.json
- Adding TSLint
- Adding React with types
- Creating a root web page
- Creating a simple React component
- Adding webpack
- Project folders and files
- Creating start and build scripts
- Creating a class component
- Creating a basic class component
- JSX
- Component props
- Optional props
- Default prop values
- Handling class component events
- Basic event handlers
- The this problem
- Function props
- Class component states
- Defining state type
- Initializing the state
- Changing state
- Class component life cycle methods
- componentDidMount
- componentWillUnmount
- getDerivedStateFromProps
- getSnapshotBeforeUpdate and componentDidUpdate
- shouldComponentUpdate
- Deprecated life cycle methods
- Creating a function component
- Creating a basic function component
- Stateful function components
- Function component life cycle hooks
- Optimizing function component rendering
- Summary
- Questions
- Further reading
- Routing with React Router
- Technical requirements
- Installing React Router with routing types
- Declaring routes
- Creating navigation
- Using the Link component
- Using the NavLink component
- Route parameters
- Handling not found routes
- Implementing page redirects
- Simple redirect
- Conditional redirect
- Query parameters
- Route prompts
- Nested routes
- Animated transitions
- Lazy loading routes
- Summary
- Questions
- Further reading
- Advanced Types
- Technical requirements
- Union types
- String literal types
- String literal union types
- Discriminated union pattern
- Type guards
- Using the typeof keyword
- Using the instanceof keyword
- Using the in keyword
- Using a user-defined type guard
- Generics
- Generic functions
- Generic classes
- Overload signatures
- Lookup and mapped types
- Summary
- Questions
- Further reading
- Component Patterns
- Technical requirements
- Container and presentational components
- Compound components
- Adding reviews to a product
- Creating a basic tab component
- Leveraging the compound component pattern
- Sharing state with React context
- Render props pattern
- Completing Tabs with render props
- Using render prop for tab headings
- Using children prop for tab content
- Higher-order components
- Adding asynchronous data fetching
- Implementing the withLoader HOC
- Consuming the withLoader HOC
- Summary
- Questions
- Further reading
- Working with Forms
- Technical requirements
- Creating a form with controlled components
- Adding a Contact Us page
- Creating controlled inputs
- Reducing boilerplate code with generic components
- Creating a basic form component
- Adding a basic Field component
- Sharing state with React context
- Implementing our new ContactUs component
- Validating forms
- Adding a validation rules prop to form
- Tracking validation error messages
- Invoking validation rules
- Triggering validation rule execution from field
- Rendering validation error messages
- Form submission
- Adding a submit button to the form
- Adding a onSubmit form prop
- Consuming the onSubmit form prop
- Summary
- Questions
- Further reading
- React Redux
- Technical requirements
- Principles and key concepts
- Principles
- Key concepts
- Installing Redux
- Creating actions
- Creating state and action types
- Creating actions
- Creating reducers
- Creating a store
- Connecting our React app to the store
- Adding the store Provider component
- Connecting components to the store
- Connecting ProductsPage to the store
- Connecting ProductsPage to the loading store state
- Adding product state and actions to the store
- Adding basket state and actions to the store
- Connecting ProductPage to the store
- Creating and connecting BasketSummary to the store
- Managing state with useReducer
- Summary
- Questions
- Further reading
- Interacting with RESTful APIs
- Technical requirements
- Writing asynchronous code
- Callbacks
- Callback execution
- Handling callback errors
- Promises
- Consuming a promised-based function
- Creating a promised based function
- async and await
- Using fetch
- Getting data with fetch
- Basic GET request
- Getting response status
- Handling errors
- Creating data with fetch
- Basic POST request
- Request HTTP headers
- Changing data with fetch
- Basic PUT request
- Basic PATCH request
- Deleting data with fetch
- Using axios with class components
- Installing axios
- Getting data with axios
- Basic GET request
- Handling errors
- Request HTTP headers
- Timeouts
- Canceling requests
- Creating data with axios
- Updating data with axios
- Deleting data with axios
- Using axios with function components
- Summary
- Questions
- Further reading
- Interacting with GraphQL APIs
- Technical requirements
- GraphQL query and mutation syntax
- Reading GraphQL data
- Basic query
- Returning nested data
- Query parameters
- Writing GraphQL data
- Using axios as a GraphQL client
- Getting a GitHub personal access token
- Creating our app
- Querying the GraphQL server
- Using Apollo GraphQL client
- Installing Apollo client
- Migrating from axios to Apollo
- Adding an Apollo provider
- Using the query component to query GraphQL
- Adding a repository search component
- Implementing the search form
- Implementing the search query
- Rendering the search result
- Implementing a mutation with Apollo
- Working with cached data in Apollo
- Clearing the caching using refetchQueries
- Updating the cache after a Mutation
- Summary
- Questions
- Further reading
- Unit Testing with Jest
- Technical requirements
- Testing pure functions
- Creating a basic pure function test
- Understanding Jest watch options
- Adding structure to unit test results
- Testing components
- Creating a basic component test
- Improving our tests with react-testing-library
- Installing react-testing-library
- Removing CSS class references from our tests
- Using fireEvent for user interaction
- Creating a second test for a valid form submission
- Using Jest snapshot tests
- Mocking dependencies
- Using a mock function in Jest
- Mocking Axios with axios-mock-adapter
- Getting code coverage
- Summary
- Questions
- Further reading
- Answers
- Chapter 1: TypeScript Basics
- Chapter 2: What is New in TypeScript 3
- Chapter 3: Getting Started with React and TypeScript
- Chapter 4: Routing with React Router
- Chapter 5: Advanced Types
- Chapter 6: Component Patterns
- Chapter 7: Working with Forms
- Chapter 8: React Redux
- Chapter 9: Interacting with RESTful APIs
- Chapter 10: Interacting with GraphQL APIs
- Chapter 11: Unit Testing with Jest
- Other Books You May Enjoy
- Leave a review - let other readers know what you think 更新時間：2021-06-10 19:17:31
