Learn React with TypeScript 3

Learn React with TypeScript 3

by Carl Rippon
Released November 2018
Publisher(s): Packt Publishing
ISBN: 9781789610253

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Start developing modern day component based web apps using React 16, Redux and TypeScript 3 with this easy to follow guide filled with practical examples.

Key Features

  • Learn the latest and core features of React such as components, React Router, and suspense
  • Dive into TypeScript 3 and it`s core components such as interfaces, types aliases, tuples, generics and much more.
  • Build small-to-large scale single page applications with React, Redux, GraphQL and TypeScript

Book Description

React today is one of the most preferred choices for frontend development. Using React with TypeScript enhances development experience and offers a powerful combination to develop high performing web apps. In this book, you'll learn how to create well structured and reusable react components that are easy to read and maintain by leveraging modern web development techniques.

We will start with learning core TypeScript programming concepts before moving on to building reusable React components. You'll learn how to ensure all your components are type-safe by leveraging TypeScript's capabilities, including the latest on Project references, Tuples in rest parameters, and much more. You'll then be introduced to core features of React such as React Router, managing state with Redux and applying logic in lifecycle methods. Further on, you'll discover the latest features of React such as hooks and suspense which will enable you to create powerful function-based components. You'll get to grips with GraphQL web API using Apollo client to make your app more interactive. Finally, you'll learn how to write robust unit tests for React components using Jest.

By the end of the book, you'll be well versed with all you need to develop fully featured web apps with React and TypeScript.

What you will learn

  • Gain a first-hand experience of TypeScript and its productivity features
  • Transpile your TypeScript code into JavaScript for it to run in a browser
  • Learn relevant advanced types in TypeScript for creating strongly typed and reusable components.
  • Create stateful function-based components that handle lifecycle events using hooks
  • Get to know what GraphQL is and how to work with it by executing basic queries to get familiar with the syntax
  • Become confident in getting good unit testing coverage on your components using Jest

Who this book is for

The ideal target audience for this book are web developers who want to get started with creating modern day web apps with React and TypeScript.You are expected to have a basic understanding of JavaScript and HTML programming. No prior knowledge of TypeScript and React is needed.

Table of contents

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

Product information

  • Title: Learn React with TypeScript 3
  • Author(s): Carl Rippon
  • Release date: November 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789610253