Go to Previous Chapter
Go to Previous Chapter
SECTION 4
Appendix
SECTION 5
Introduction
Fullstack React with TypeScript
CHAPTER 1
Patterns in React TypeScript Applications: Making Music with React
SECTION 1.1
Introduction
SECTION 1.2
What We're Going to Build
SECTION 1.3
What We're Going to Use
SECTION 1.4
First Steps and Basic Application Layout
SECTION 1.5
Logo component
SECTION 1.6
Combining Components
SECTION 1.7
A Bit of a Music Theory
SECTION 1.8
Third Party API and Browser API
SECTION 1.9
Patterns
SECTION 1.10
Adapter or Provider Pattern
SECTION 1.11
Creating a Keyboard
SECTION 1.12
Single Key on a Keyboard
SECTION 1.13
Styles for the Key
SECTION 1.14
Define the Key component
SECTION 1.15
Create the Keyboard component
SECTION 1.16
Update the Main component
SECTION 1.17
Adapter Hook
SECTION 1.18
Soundfont Adapter
SECTION 1.19
Connecting to a Keyboard
SECTION 1.20
Mapping Real Keys to Virtual
SECTION 1.21
Instruments List
SECTION 1.22
Instrument Selector
SECTION 1.23
Render Props
SECTION 1.24
What is a render prop
SECTION 1.25
Pros and Cons
SECTION 1.26
Creating Render Props With Functional Components
SECTION 1.27
Creating Render Props With Classes
SECTION 1.28
Higher-Order Components
SECTION 1.29
Higher-Order Functions
SECTION 1.30
Define a HOC
SECTION 1.31
When to Use
SECTION 1.32
Pros and Cons
SECTION 1.33
Caveats
SECTION 1.34
Instrument adapter as a Higher-Order Component
SECTION 1.35
Using HOC with Keyboard
SECTION 1.36
Passing Refs Through
SECTION 1.37
Static Composition
SECTION 1.38
Using Hooks with HOCs
SECTION 1.39
Conclusion
CHAPTER 2
GraphQL, React, and TypeScript
SECTION 2.1
Introduction
SECTION 2.2
Is GraphQL better than REST?
SECTION 2.3
What are we building?
SECTION 2.4
Authenticate in GitHub and Preview The Final Result
SECTION 2.5
Authenticating in GitHub
SECTION 2.6
Previewing the final result
SECTION 2.7
Setting up the project
SECTION 2.8
Running TypeScript in the console
SECTION 2.9
Add the .env file
SECTION 2.10
Running the application
SECTION 2.11
Get the auth code
SECTION 2.12
Define the HTML page
SECTION 2.13
Define the getCode
SECTION 2.14
Auth Flow Link
SECTION 2.15
Authentication context
SECTION 2.16
GraphQL queries. Getting user data
SECTION 2.17
Adding helper components
SECTION 2.18
Define the Button component
SECTION 2.19
Define the List component
SECTION 2.20
Define the Text component
SECTION 2.21
Define the TextBox component
SECTION 2.22
Define the Panel component
SECTION 2.23
Form helper components
SECTION 2.24
Informationbal message components
SECTION 2.25
Defining the WelcomeWindow layout
SECTION 2.26
Getting GitHub GraphQL schema
SECTION 2.27
Generating types
SECTION 2.28
Adding routing
SECTION 2.29
Define the resource screens
SECTION 2.30
Define the routing scheme
SECTION 2.31
Implement navigation
SECTION 2.32
Define the debounce function
SECTION 2.33
Define the Header
SECTION 2.34
Render the Header
SECTION 2.35
Repositories main component
SECTION 2.36
Getting the list of repositories
SECTION 2.37
GraphQL mutations. Creating repositories
SECTION 2.38
Getting the repository ID
SECTION 2.39
Working with GitHub issues
SECTION 2.40
Getting the list of issues
SECTION 2.41
Creating an issue
SECTION 2.42
Generate the types for the mutation
SECTION 2.43
Define the component
SECTION 2.44
Define the layout
SECTION 2.45
Create a new issue on form submit
SECTION 2.46
Render the success and error results
SECTION 2.47
Render the NewIssue component
SECTION 2.48
Working with GitHub pull requests
SECTION 2.49
Define the routing
SECTION 2.50
Getting the list of pull requests
SECTION 2.51
Update the root pull requests component
SECTION 2.52
Creating a new pull request
SECTION 2.53
Define the form
SECTION 2.54
Add the navigation instructions
SECTION 2.55
Use the component
SECTION 2.56
Summary
CHAPTER 3
Static Site Generation and Server-Side Rendering Using Next.js
SECTION 3.1
Introduction
SECTION 3.2
What We're Going to Build
SECTION 3.3
Pre-Rendering
SECTION 3.4
Next.js
SECTION 3.5
Setting Up a Project
SECTION 3.6
Creating A First Page
SECTION 3.7
Basic Application Layout
SECTION 3.8
Footer Component
SECTION 3.9
Custom Document Component
SECTION 3.10
Application Theme
SECTION 3.11
Custom App Component
SECTION 3.12
Front Page
SECTION 3.13
Update the Front component
SECTION 3.14
Page 404
SECTION 3.15
Post Page Template
SECTION 3.16
Backend API Server
SECTION 3.17
Frontend API Client
SECTION 3.18
Updating The Main Page
SECTION 3.19
Pre-Render Post Page
SECTION 3.20
Post API
SECTION 3.21
Category Page
SECTION 3.22
Category API
SECTION 3.23
Adding Breadcrumbs
SECTION 3.24
Comments and Server-Side Rendering
SECTION 3.25
Components to render comments
SECTION 3.26
API for Adding Comments
SECTION 3.27
Adding comments to a page
SECTION 3.28
Updating a statically generated page to use server-side rendering
SECTION 3.29
Connecting Redux
SECTION 3.30
Optimizing Images
SECTION 3.31
Building Project
SECTION 3.32
Deploying Project
SECTION 3.33
Remaking API
SECTION 3.34
Creating Client Requests
SECTION 3.35
Updating Pages
SECTION 3.36
Deployment with Serverless Functions
SECTION 3.37
Summary
CHAPTER 4
Appendix
CHAPTER 5
Introduction
SECTION 5.1
How To Get The Most Out Of This Book
SECTION 5.2
What is TypeScript
SECTION 5.3
Why Use TypeScript With React
SECTION 5.4
A Necessary Word Of Caution
CHAPTER 6
Your First React and TypeScript Application: Building Trello with Drag and Drop
SECTION 6.1
Introduction
SECTION 6.2
What Are We Building?
SECTION 6.3
Prerequisites
SECTION 6.4
Preview The Final Result
SECTION 6.5
How to Bootstrap React + TypeScript App Automatically
SECTION 6.6
App Layout. React + TypeScript Basics
SECTION 6.7
Remove The Clutter
SECTION 6.8
Add Global Styles
SECTION 6.9
How To Style React Elements
SECTION 6.10
Using Separate CSS Files
SECTION 6.11
Passing CSS Rules Through Style Property
SECTION 6.12
Using External Styling Libraries
SECTION 6.13
Prepare Styled Components
SECTION 6.14
Install styled-components. Working with @types packages