- How To Get The Most Out Of This Book
- Prerequisites
- Running Code Examples
- Windows
- Mac
- Linux
- Code Blocks And Context
- Code Block Numbering
- Reporting Issues
- Getting Help
- What is TypeScript
- Using Types In Your Code
- Defining Custom Types
- Benefits Of Using TypeScript
- Why Use TypeScript With React
- A Necessary Word Of Caution
- Introduction
- What Are We Building?
- Prerequisites
- Preview The Final Result
- How to Bootstrap React + TypeScript App Automatically
- Why Use Automatic App Generators?
- How to Use create-react-app With TypeScript
- Project Structure Generated By create-react-app
- Files In The Root
- public Folder
- src Folder
- index.tsx
- App.tsx
- react-app-env.d.ts
- App Layout. React + TypeScript Basics
- Remove The Clutter
- Add Global Styles
- How To Style React Elements
- Using Separate CSS Files
- Passing CSS Rules Through Style Property
- Using External Styling Libraries
- Prepare Styled Components
- Install styled-components. Working with @types packages
- Break the UI into components
- Styles For AppContainer
- Styles For Columns
- Styles For Cards
- Render Everything Together
- Create Column Components
- How to define props
- How to accept children prop
- Use the FC type for the component
- Use PropsWithChildren
- Define the children prop manually
- Create Card Components
- Render everything together
- Component For Adding New Items
- Styles For The Button
- Create AddNewItem Component. Using State
- Adding New Lists
- Adding New Tasks
- NewItemForm component
- Styles For The Form
- Create NewItemForm component
- Update AddNewItem Component
- Automatically focus on input
- Create the useFocus hook
- Use the useFocus hook
- Submit on enter
- Add Global State And Business Logic. Using the useReducer
- Using the useReducer
- What Is a Reducer?
- How to Call useReducer
- What Are Actions?
- Counter Example
- Implement Global State
- Hardcode the data
- Define the Context
- Define the Context provider
- Using Data From Global Context. Implement Custom Hook
- Get The Data From AppStateContext
- Define the business logic
- Create Actions
- Define the appStateReducer
- Adding Lists
- Adding Tasks
- Provide Dispatch Through The Context
- Dispatching Actions
- Moving Items
- Define the moveItem helper function
- Handling the MOVE_LIST action
- Add Drag and Drop (Install React DnD)
- Define The Type For Dragging
- Store The Dragged Item In The State
- Define The useItemDrag Hook
- Drag Column
- Hide The Dragged Item
- Styles For DragPreviewContainer
- Calculate The isHidden Flag
- Implement The Custom Dragging Preview
- Prevent The Column Preview From Hiding
- Move The Dragged Item Preview
- Hide The Default Drag Preview
- Drag Cards
- Update CustomDragLayer
- Update The Reducer
- Drag the Card To an Empty Column
- Saving State On Backend. How To Make Network Requests
- Sample Backend
- The Final Result
- The Starting Point
- Using Fetch With TypeScript
- Create API Module
- Saving The State
- Loading The Data
- What is HOC?
- Creating your first HOC
- Load The Data Inside The HOC
- Use The HOC
- Launch The App
- Introduction
- What We're Going to Build
- What We're Going to Use
- First Steps and Basic Application Layout
- Footer component
- Using CSS Modules and CSS Variables
- Logo component
- Combining Components
- Global Styles
- A Bit of a Music Theory
- Coding Music Rules
- Custom Note Type
- Application Constraints
- Generics and Utility Types
- Generating Notes
- Third Party API and Browser API
- Web Audio API
- Soundfont
- Patterns
- Adapter or Provider Pattern
- React-Specific Patterns
- Main App Screen
- Custom Hook for Accessing Audio
- Handling Missing Audio Context
- Creating a Keyboard
- Single Key on a Keyboard
- Styles for the Key
- Define the Key component
- Create the Keyboard component
- Update the Main component
- Adapter Hook
- Soundfont Adapter
- Loading Sound Set
- Connecting to a Keyboard
- Mapping Real Keys to Virtual
- Instruments List
- Context
- Instrument Selector
- Dynamically Loading Instruments
- Render Props
- What is a render prop
- Pros and Cons
- Creating Render Props With Functional Components
- Creating Render Props With Classes
- Higher-Order Components
- Higher-Order Functions
- Define a HOC
- When to Use
- Pros and Cons
- Caveats
- Instrument adapter as a Higher-Order Component
- Using HOC with Keyboard
- Passing Refs Through
- Static Composition
- Using Hooks with HOCs
- Conclusion
- Introduction
- Preview The Final Result
- What is Redux?
- Why Can't We Use useReducer Instead of Redux?
- Initial Setup
- Create The Project
- Redux Logger
- Prepare The Styles
- Update the App layout
- Working With Canvas
- Handling Canvas Events
- Define The Store Types
- Add Actions
- Add The Reducer Logic
- Dispatch Actions
- Draw The Current Stroke
- Define the currentStrokeSelector
- Update the App component
- Implement Selecting Colors
- Implement Undo and Redo
- Update the RootState type
- Create actions
- Update the reducer
- Create the EditPanel component
- Splitting Root Reducer And Using combineReducers
- Separate The History Index
- Separate The Current Stroke
- Separate The Strokes List
- Update the App component
- Join The Reducers Using combineReducers
- Exporting An Image
- Define the getCanvasImage
- Create the FilePanel
- Add the FilePanel to the App layout
- Using Redux Toolkit
- Configuring The Store
- Fix Type Errors
- Using createAction
- Update the App component
- Using createReducer
- CurrentStroke Reducer
- Strokes Reducer
- HistoryIndex Reducer
- Using Slices
- HistoryIndex Slice
- Strokes Slice
- CurrentStroke Slice
- Remake The Imports
- Add Modal Windows
- Update the types
- Add The Modal Manager Component
- Define the modal windows
- Define the ModalLayercomponent
- Render the ModalLayer
- Add Save and Load buttons
- Prepare The Server
- Save The Project Using Thunks
- Define the API module
- Handle saving the project
- Define the getBase64Thumbnail function
- Update the ProjectSaveModal
- Load The Project
- Update the types
- Define the API module
- Create a projectsList slice
- Load the selected project
- Show the list of projects
- Update the App component
- Introduction
- What We're Going to Build
- Pre-Rendering
- Server-side rendering
- Static site generation
- Next.js
- Setting Up a Project
- Adding TypeScript
- Creating A First Page
- Basic Application Layout
- Header component
- Next's Link component
- Footer Component
- Custom Document Component
- Application Theme
- Custom App Component
- Front Page
- Single post
- News section
- News feed
- Update the Front component
- Page 404
- Post Page Template
- Backend API Server
- Server setup
- Post data and type
- API endpoints
- Frontend API Client
- Updating The Main Page
- Fetching data
- Updating Feed
- Updating Section
- Updating Post card
- Pre-Render Post Page
- Post API
- Static props and static paths on the post page
- Static paths
- Loader component
- PostBody component
- Category Page
- Category API
- Category page component
- Updating Section
- Adding Breadcrumbs
- Comments and Server-Side Rendering
- Updates on each request
- Comments backend API
- Comment type
- Components to render comments
- Component for a single comment
- Comment form
- API for Adding Comments
- Adding comments to a page
- Updating a statically generated page to use server-side rendering
- Connecting Redux
- Configuring a store
- Actions for comments
- Reducer for comments
- Reducer for posts
- Changing the custom application component
- Updating the post page
- Making the comment form work without reloads
- Optimizing Images
- Telling Browser What Images to Load
- Building Project
- Deploying Project
- Remaking API
- Remaking Posts
- Remaking Categories
- Remaking Comments
- Creating Client Requests
- Updating Pages
- Updating Main Page
- Updating Category Page
- Updating Post Page
- Cleaning Up
- Deployment with Serverless Functions
- Pushing to GitHub
- Deploying to Vercel
- Deploying Stages
- Summary
- Introduction
- Is GraphQL better than REST?
- What are we building?
- Authenticate in GitHub and Preview The Final Result
- Authenticating in GitHub
- Previewing the final result
- Setting up the project
- Running TypeScript in the console
- Add the .env file
- Running the application
- Get the auth code
- Define the HTML page
- Define the getCode
- Auth Flow Link
- Authentication context
- GraphQL queries. Getting user data
- Adding helper components
- Define the Button component
- Define the List component
- Define the Text component
- Define the TextBox component
- Define the Panel component
- Form helper components
- Informationbal message components
- Entity error component
- Entity success component
- Defining the WelcomeWindow layout
- Getting GitHub GraphQL schema
- Generating types
- Adding routing
- Define the resource screens
- Define the routing scheme
- Implement navigation
- Define the debounce function
- Define the Header
- Render the Header
- Repositories main component
- Getting the list of repositories
- GraphQL mutations. Creating repositories
- Getting the repository ID
- Working with GitHub issues
- Getting the list of issues
- Creating an issue
- Generate the types for the mutation
- Define the component
- Define the layout
- Create a new issue on form submit
- Render the success and error results
- Render the NewIssue component
- Working with GitHub pull requests
- Define the routing
- Getting the list of pull requests
- Update the root pull requests component
- Creating a new pull request
- Define the form
- Add the navigation instructions
- Use the component
- Summary
Fullstack React with TypeScript
Chapter 1:
Introduction
Chapter 2:
Your First React and TypeScript Application: Building Trello with Drag and Drop
Chapter 3:
Patterns in React TypeScript Applications: Making Music with React
Chapter 4:
Using Redux and TypeScript
Chapter 5:
Static Site Generation and Server-Side Rendering Using Next.js
Chapter 6:
GraphQL, React, and TypeScript
Your First React and TypeScript Application: Building Trello with Drag and Drop
This page is a preview of Fullstack React with TypeScript
- Your First React and TypeScript Application: Building Trello with Drag and Drop
- Introduction
- What Are We Building?
- Prerequisites
- Preview The Final Result
- How to Bootstrap React + TypeScript App Automatically
- Why Use Automatic App Generators?
- How to Use create-react-app With TypeScript
- Project Structure Generated By create-react-app
- Files In The Root
- public Folder
- src Folder
- index.tsx
- App.tsx
- react-app-env.d.ts
Contents