Go to Previous Chapter
Go to Previous Chapter
SECTION 2
GraphQL, React, and TypeScript
SECTION 3
Static Site Generation and Server-Side Rendering Using Next.js
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
SECTION 6.15
Break the UI into components
SECTION 6.16
Render Everything Together
SECTION 6.17
Create Column Components
SECTION 6.18
How to define props
SECTION 6.19
How to accept children prop
SECTION 6.20
Create Card Components
SECTION 6.21
Render everything together
SECTION 6.22
Component For Adding New Items
SECTION 6.23
Styles For The Button
SECTION 6.24
Create AddNewItem Component. Using State
SECTION 6.25
Adding New Lists
SECTION 6.26
Adding New Tasks
SECTION 6.27
NewItemForm component
SECTION 6.28
Styles For The Form
SECTION 6.29
Create NewItemForm component
SECTION 6.30
Automatically focus on input
SECTION 6.31
Create the useFocus hook
SECTION 6.32
Use the useFocus hook
SECTION 6.33
Submit on enter
SECTION 6.34
Add Global State And Business Logic. Using the useReducer
SECTION 6.35
Using the useReducer
SECTION 6.36
Implement Global State
SECTION 6.37
Hardcode the data
SECTION 6.38
Define the Context
SECTION 6.39
Define the Context provider
SECTION 6.40
Define the business logic
SECTION 6.41
Create Actions
SECTION 6.42
Define the appStateReducer
SECTION 6.43
Adding Lists
SECTION 6.44
Adding Tasks
SECTION 6.45
Provide Dispatch Through The Context
SECTION 6.46
Dispatching Actions
SECTION 6.47
Moving Items
SECTION 6.48
Define the moveItem helper function
SECTION 6.49
Handling the MOVE_LIST action
SECTION 6.50
Add Drag and Drop (Install React DnD)
SECTION 6.51
Define The Type For Dragging
SECTION 6.52
Store The Dragged Item In The State
SECTION 6.53
Define The useItemDrag Hook
SECTION 6.54
Drag Column
SECTION 6.55
Hide The Dragged Item
SECTION 6.56
Styles For DragPreviewContainer
SECTION 6.57
Implement The Custom Dragging Preview
SECTION 6.58
Move The Dragged Item Preview
SECTION 6.59
Hide The Default Drag Preview
SECTION 6.60
Drag Cards
SECTION 6.61
Update CustomDragLayer
SECTION 6.62
Update The Reducer
SECTION 6.63
Drag the Card To an Empty Column
SECTION 6.64
Saving State On Backend. How To Make Network Requests
SECTION 6.65
Loading The Data
CHAPTER 7
Using Redux and TypeScript
SECTION 7.1
Introduction
SECTION 7.2
Preview The Final Result
SECTION 7.3
What is Redux?
SECTION 7.4
Why Can't We Use useReducer Instead of Redux?
SECTION 7.5
Initial Setup
SECTION 7.6
Redux Logger
SECTION 7.7
Prepare The Styles
SECTION 7.8
Update the App layout
SECTION 7.9
Working With Canvas
SECTION 7.10
Handling Canvas Events
SECTION 7.11
Define The Store Types
SECTION 7.12
Add Actions
SECTION 7.13
Add The Reducer Logic
SECTION 7.14
Dispatch Actions
SECTION 7.15
Draw The Current Stroke
SECTION 7.16
Define the currentStrokeSelector
SECTION 7.17
Update the App component
SECTION 7.18
Implement Selecting Colors
SECTION 7.19
Implement Undo and Redo
SECTION 7.20
Update the RootState type
SECTION 7.21
Create actions
SECTION 7.22
Update the reducer
SECTION 7.23
Create the EditPanel component
SECTION 7.24
Splitting Root Reducer And Using combineReducers
SECTION 7.25
Update the App component
SECTION 7.26
Join The Reducers Using combineReducers
SECTION 7.27
Exporting An Image
SECTION 7.28
Define the getCanvasImage
SECTION 7.29
Create the FilePanel
SECTION 7.30
Add the FilePanel to the App layout
SECTION 7.31
Using Redux Toolkit
SECTION 7.32
Configuring The Store
SECTION 7.33
Fix Type Errors
SECTION 7.34
Using createAction
SECTION 7.35
Update the App component
SECTION 7.36
Using createReducer
SECTION 7.37
Using Slices
SECTION 7.38
Remake The Imports
SECTION 7.39
Add Modal Windows
SECTION 7.40
Update the types
SECTION 7.41
Add The Modal Manager Component
SECTION 7.42
Define the modal windows
SECTION 7.43
Define the ModalLayercomponent
SECTION 7.44
Render the ModalLayer
SECTION 7.45
Add Save and Load buttons
SECTION 7.46
Prepare The Server
SECTION 7.47
Save The Project Using Thunks
SECTION 7.48
Define the API module
SECTION 7.49
Handle saving the project
SECTION 7.50
Define the getBase64Thumbnail function
SECTION 7.51
Update the ProjectSaveModal
SECTION 7.52
Load The Project
SECTION 7.53
Update the types
SECTION 7.54
Define the API module
SECTION 7.55
Create a projectsList slice
SECTION 7.56
Load the selected project
SECTION 7.57
Show the list of projects
SECTION 7.58
Update the App component
CHAPTER 8
Changelog
SECTION 8.1
Revision r12 (31-12-2021)
SECTION 8.2
Revision r11 (26-03-2021)
SECTION 8.3
Revision r10 (03-03-2021)
SECTION 8.4
Revision r9 (26-02-2021)
SECTION 8.5
Revision r8 (17-02-2021)
SECTION 8.6
Revision r7 (01-12-2020)
SECTION 8.7
Revision r6 (01-12-2020)
SECTION 8.8
Revision r5 (10-11-2020)
SECTION 8.9
Revision r4 (26-08-2020)
SECTION 8.10
Revision 3p (07-30-2020)
SECTION 8.11
Revision 2p (06-08-2020)
SECTION 8.12
Revision 1p (05-20-2020)
Go to Next Chapter
Go to Next Chapter
SECTION 4
Appendix
Go Pro
Log In
Static Site Generation and Server-Side Rendering Using Next.js
Table of Contents
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