\newline Logo
Left arrow icon.
Go to Previous Chapter
Go to Previous Chapter
SECTION 6Your First React and TypeScript Application: Building Trello with Drag and Drop
Course Thumbnail of Fullstack React with TypeScript.Fullstack React with TypeScript
  • CHAPTER 1
    Patterns in React TypeScript Applications: Making Music with React
    • SECTION 1.1Introduction
    • SECTION 1.2What We're Going to Build
    • SECTION 1.3What We're Going to Use
    • SECTION 1.4First Steps and Basic Application Layout
    • SECTION 1.5Logo component
    • SECTION 1.6Combining Components
    • SECTION 1.7A Bit of a Music Theory
    • SECTION 1.8Third Party API and Browser API
    • SECTION 1.9Patterns
    • SECTION 1.10Adapter or Provider Pattern
    • SECTION 1.11Creating a Keyboard
    • SECTION 1.12Single Key on a Keyboard
    • SECTION 1.13Styles for the Key
    • SECTION 1.14Define the Key component
    • SECTION 1.15Create the Keyboard component
    • SECTION 1.16Update the Main component
    • SECTION 1.17Adapter Hook
    • SECTION 1.18Soundfont Adapter
    • SECTION 1.19Connecting to a Keyboard
    • SECTION 1.20Mapping Real Keys to Virtual
    • SECTION 1.21Instruments List
    • SECTION 1.22Instrument Selector
    • SECTION 1.23Render Props
    • SECTION 1.24What is a render prop
    • SECTION 1.25Pros and Cons
    • SECTION 1.26Creating Render Props With Functional Components
    • SECTION 1.27Creating Render Props With Classes
    • SECTION 1.28Higher-Order Components
    • SECTION 1.29Higher-Order Functions
    • SECTION 1.30Define a HOC
    • SECTION 1.31When to Use
    • SECTION 1.32Pros and Cons
    • SECTION 1.33Caveats
    • SECTION 1.34Instrument adapter as a Higher-Order Component
    • SECTION 1.35Using HOC with Keyboard
    • SECTION 1.36Passing Refs Through
    • SECTION 1.37Static Composition
    • SECTION 1.38Using Hooks with HOCs
    • SECTION 1.39Conclusion
  • CHAPTER 2
    GraphQL, React, and TypeScript
    • SECTION 2.1Introduction
    • SECTION 2.2Is GraphQL better than REST?
    • SECTION 2.3What are we building?
    • SECTION 2.4Authenticate in GitHub and Preview The Final Result
    • SECTION 2.5Authenticating in GitHub
    • SECTION 2.6Previewing the final result
    • SECTION 2.7Setting up the project
    • SECTION 2.8Running TypeScript in the console
    • SECTION 2.9Add the .env file
    • SECTION 2.10Running the application
    • SECTION 2.11Get the auth code
    • SECTION 2.12Define the HTML page
    • SECTION 2.13Define the getCode
    • SECTION 2.14Auth Flow Link
    • SECTION 2.15Authentication context
    • SECTION 2.16GraphQL queries. Getting user data
    • SECTION 2.17Adding helper components
    • SECTION 2.18Define the Button component
    • SECTION 2.19Define the List component
    • SECTION 2.20Define the Text component
    • SECTION 2.21Define the TextBox component
    • SECTION 2.22Define the Panel component
    • SECTION 2.23Form helper components
    • SECTION 2.24Informationbal message components
    • SECTION 2.25Defining the WelcomeWindow layout
    • SECTION 2.26Getting GitHub GraphQL schema
    • SECTION 2.27Generating types
    • SECTION 2.28Adding routing
    • SECTION 2.29Define the resource screens
    • SECTION 2.30Define the routing scheme
    • SECTION 2.31Implement navigation
    • SECTION 2.32Define the debounce function
    • SECTION 2.33Define the Header
    • SECTION 2.34Render the Header
    • SECTION 2.35Repositories main component
    • SECTION 2.36Getting the list of repositories
    • SECTION 2.37GraphQL mutations. Creating repositories
    • SECTION 2.38Getting the repository ID
    • SECTION 2.39Working with GitHub issues
    • SECTION 2.40Getting the list of issues
    • SECTION 2.41Creating an issue
    • SECTION 2.42Generate the types for the mutation
    • SECTION 2.43Define the component
    • SECTION 2.44Define the layout
    • SECTION 2.45Create a new issue on form submit
    • SECTION 2.46Render the success and error results
    • SECTION 2.47Render the NewIssue component
    • SECTION 2.48Working with GitHub pull requests
    • SECTION 2.49Define the routing
    • SECTION 2.50Getting the list of pull requests
    • SECTION 2.51Update the root pull requests component
    • SECTION 2.52Creating a new pull request
    • SECTION 2.53Define the form
    • SECTION 2.54Add the navigation instructions
    • SECTION 2.55Use the component
    • SECTION 2.56Summary
  • CHAPTER 3
    Static Site Generation and Server-Side Rendering Using Next.js
    • SECTION 3.1Introduction
    • SECTION 3.2What We're Going to Build
    • SECTION 3.3Pre-Rendering
    • SECTION 3.4Next.js
    • SECTION 3.5Setting Up a Project
    • SECTION 3.6Creating A First Page
    • SECTION 3.7Basic Application Layout
    • SECTION 3.8Footer Component
    • SECTION 3.9Custom Document Component
    • SECTION 3.10Application Theme
    • SECTION 3.11Custom App Component
    • SECTION 3.12Front Page
    • SECTION 3.13Update the Front component
    • SECTION 3.14Page 404
    • SECTION 3.15Post Page Template
    • SECTION 3.16Backend API Server
    • SECTION 3.17Frontend API Client
    • SECTION 3.18Updating The Main Page
    • SECTION 3.19Pre-Render Post Page
    • SECTION 3.20Post API
    • SECTION 3.21Category Page
    • SECTION 3.22Category API
    • SECTION 3.23Adding Breadcrumbs
    • SECTION 3.24Comments and Server-Side Rendering
    • SECTION 3.25Components to render comments
    • SECTION 3.26API for Adding Comments
    • SECTION 3.27Adding comments to a page
    • SECTION 3.28Updating a statically generated page to use server-side rendering
    • SECTION 3.29Connecting Redux
    • SECTION 3.30Optimizing Images
    • SECTION 3.31Building Project
    • SECTION 3.32Deploying Project
    • SECTION 3.33Remaking API
    • SECTION 3.34Creating Client Requests
    • SECTION 3.35Updating Pages
    • SECTION 3.36Deployment with Serverless Functions
    • SECTION 3.37Summary
  • CHAPTER 4
    Appendix
    • CHAPTER 5
      Introduction
      • SECTION 5.1How To Get The Most Out Of This Book
      • SECTION 5.2What is TypeScript
      • SECTION 5.3Why Use TypeScript With React
      • SECTION 5.4A Necessary Word Of Caution
    • CHAPTER 6
      Your First React and TypeScript Application: Building Trello with Drag and Drop
      • SECTION 6.1Introduction
      • SECTION 6.2What Are We Building?
      • SECTION 6.3Prerequisites
      • SECTION 6.4Preview The Final Result
      • SECTION 6.5How to Bootstrap React + TypeScript App Automatically
      • SECTION 6.6App Layout. React + TypeScript Basics
      • SECTION 6.7Remove The Clutter
      • SECTION 6.8Add Global Styles
      • SECTION 6.9How To Style React Elements
      • SECTION 6.10Using Separate CSS Files
      • SECTION 6.11Passing CSS Rules Through Style Property
      • SECTION 6.12Using External Styling Libraries
      • SECTION 6.13Prepare Styled Components
      • SECTION 6.14Install styled-components. Working with @types packages
      • SECTION 6.15Break the UI into components
      • SECTION 6.16Render Everything Together
      • SECTION 6.17Create Column Components
      • SECTION 6.18How to define props
      • SECTION 6.19How to accept children prop
      • SECTION 6.20Create Card Components
      • SECTION 6.21Render everything together
      • SECTION 6.22Component For Adding New Items
      • SECTION 6.23Styles For The Button
      • SECTION 6.24Create AddNewItem Component. Using State
      • SECTION 6.25Adding New Lists
      • SECTION 6.26Adding New Tasks
      • SECTION 6.27NewItemForm component
      • SECTION 6.28Styles For The Form
      • SECTION 6.29Create NewItemForm component
      • SECTION 6.30Automatically focus on input
      • SECTION 6.31Create the useFocus hook
      • SECTION 6.32Use the useFocus hook
      • SECTION 6.33Submit on enter
      • SECTION 6.34Add Global State And Business Logic. Using the useReducer
      • SECTION 6.35Using the useReducer
      • SECTION 6.36Implement Global State
      • SECTION 6.37Hardcode the data
      • SECTION 6.38Define the Context
      • SECTION 6.39Define the Context provider
      • SECTION 6.40Define the business logic
      • SECTION 6.41Create Actions
      • SECTION 6.42Define the appStateReducer
      • SECTION 6.43Adding Lists
      • SECTION 6.44Adding Tasks
      • SECTION 6.45Provide Dispatch Through The Context
      • SECTION 6.46Dispatching Actions
      • SECTION 6.47Moving Items
      • SECTION 6.48Define the moveItem helper function
      • SECTION 6.49Handling the MOVE_LIST action
      • SECTION 6.50Add Drag and Drop (Install React DnD)
      • SECTION 6.51Define The Type For Dragging
      • SECTION 6.52Store The Dragged Item In The State
      • SECTION 6.53Define The useItemDrag Hook
      • SECTION 6.54Drag Column
      • SECTION 6.55Hide The Dragged Item
      • SECTION 6.56Styles For DragPreviewContainer
      • SECTION 6.57Implement The Custom Dragging Preview
      • SECTION 6.58Move The Dragged Item Preview
      • SECTION 6.59Hide The Default Drag Preview
      • SECTION 6.60Drag Cards
      • SECTION 6.61Update CustomDragLayer
      • SECTION 6.62Update The Reducer
      • SECTION 6.63Drag the Card To an Empty Column
      • SECTION 6.64Saving State On Backend. How To Make Network Requests
      • SECTION 6.65Loading The Data
    • CHAPTER 7
      Using Redux and TypeScript
      • SECTION 7.1Introduction
      • SECTION 7.2Preview The Final Result
      • SECTION 7.3What is Redux?
      • SECTION 7.4Why Can't We Use useReducer Instead of Redux?
      • SECTION 7.5Initial Setup
      • SECTION 7.6Redux Logger
      • SECTION 7.7Prepare The Styles
      • SECTION 7.8Update the App layout
      • SECTION 7.9Working With Canvas
      • SECTION 7.10Handling Canvas Events
      • SECTION 7.11Define The Store Types
      • SECTION 7.12Add Actions
      • SECTION 7.13Add The Reducer Logic
      • SECTION 7.14Dispatch Actions
      • SECTION 7.15Draw The Current Stroke
      • SECTION 7.16Define the currentStrokeSelector
      • SECTION 7.17Update the App component
      • SECTION 7.18Implement Selecting Colors
      • SECTION 7.19Implement Undo and Redo
      • SECTION 7.20Update the RootState type
      • SECTION 7.21Create actions
      • SECTION 7.22Update the reducer
      • SECTION 7.23Create the EditPanel component
      • SECTION 7.24Splitting Root Reducer And Using combineReducers
      • SECTION 7.25Update the App component
      • SECTION 7.26Join The Reducers Using combineReducers
      • SECTION 7.27Exporting An Image
      • SECTION 7.28Define the getCanvasImage
      • SECTION 7.29Create the FilePanel
      • SECTION 7.30Add the FilePanel to the App layout
      • SECTION 7.31Using Redux Toolkit
      • SECTION 7.32Configuring The Store
      • SECTION 7.33Fix Type Errors
      • SECTION 7.34Using createAction
      • SECTION 7.35Update the App component
      • SECTION 7.36Using createReducer
      • SECTION 7.37Using Slices
      • SECTION 7.38Remake The Imports
      • SECTION 7.39Add Modal Windows
      • SECTION 7.40Update the types
      • SECTION 7.41Add The Modal Manager Component
      • SECTION 7.42Define the modal windows
      • SECTION 7.43Define the ModalLayercomponent
      • SECTION 7.44Render the ModalLayer
      • SECTION 7.45Add Save and Load buttons
      • SECTION 7.46Prepare The Server
      • SECTION 7.47Save The Project Using Thunks
      • SECTION 7.48Define the API module
      • SECTION 7.49Handle saving the project
      • SECTION 7.50Define the getBase64Thumbnail function
      • SECTION 7.51Update the ProjectSaveModal
      • SECTION 7.52Load The Project
      • SECTION 7.53Update the types
      • SECTION 7.54Define the API module
      • SECTION 7.55Create a projectsList slice
      • SECTION 7.56Load the selected project
      • SECTION 7.57Show the list of projects
      • SECTION 7.58Update the App component
    • CHAPTER 8
      Changelog
      • SECTION 8.1Revision r12 (31-12-2021)
      • SECTION 8.2Revision r11 (26-03-2021)
      • SECTION 8.3Revision r10 (03-03-2021)
      • SECTION 8.4Revision r9 (26-02-2021)
      • SECTION 8.5Revision r8 (17-02-2021)
      • SECTION 8.6Revision r7 (01-12-2020)
      • SECTION 8.7Revision r6 (01-12-2020)
      • SECTION 8.8Revision r5 (10-11-2020)
      • SECTION 8.9Revision r4 (26-08-2020)
      • SECTION 8.10Revision 3p (07-30-2020)
      • SECTION 8.11Revision 2p (06-08-2020)
      • SECTION 8.12Revision 1p (05-20-2020)
    Right arrow icon.
    Go to Next Chapter
    Go to Next Chapter
    SECTION 8Changelog
    • Go Pro
    • Log In

    Using Redux and TypeScript

    Table of Contents
    • Section 7.1Introduction
    • Section 7.2Preview The Final Result
    • Section 7.3What is Redux?
    • Section 7.4Why Can't We Use useReducer Instead of Redux?
    • Section 7.5Initial Setup
    • Section 7.6Redux Logger
    • Section 7.7Prepare The Styles
    • Section 7.8Update the App layout
    • Section 7.9Working With Canvas
    • Books
    • Fullstack React with TypeScript
    • Using Redux and TypeScript
    • Go To Previous Lesson
      Your First React and TypeScript Application: Building Trello with Drag and Drop
      Your First React and TypeScript Application: Building Trello with Drag and Drop
    • Go To Next Lesson
      Changelog
      Changelog