IIRF Online > Development > Web Development > React JS > React and Typescript: Build a Portfolio Project
React and Typescript: Build a Portfolio Project by Udemy
Expand your portfolio of projects by building a complex app with the latest web technologies.
Course Highlights
- Build a portfolio-ready project with React and Typescript
- Integrate React and Redux together with Typescript
- Simplify state updates with the fabulous Immer library
- See the step-by-step process of designing and assembling an advanced project
- Manage a project using a package-based architecture
- Automate your deployment with the popular Lerna CLI
- Build an in-browser transpiler + bundler
- Assemble incredibly reusable React components
- Use Redux middlewares to handle complicated business logic flows
- Use Web Assembly to increase the performance of your app
Skills you will learn!
Curriculum
7 Topics
How to Get Help
Join Our Community!
Course Resources
Be Sure to Watch this Video!
Generating TypeScript-Enabled Projects
ReactDOM warning with React v18
File Extensions and Starting Up React
10 Topics
Changes with TypeScript
The Big Difference with Props
Explicit Component Type Annotations
Property 'children' does not exist
Annotations with Children
State with TypeScript
Type Inference with State
Quick Finish to the Example
More on State
Type Unions in State
6 Topics
Inline Event Handlers
Typing Standalone Event Handlers
Handling Drag Events Too!
TypeScript with Class Components
Applying Types to Refs
More on Refs
28 Topics
App Overview
Updated Install Command and Versions for React 18
Project Setup
Redux Store Design
Reducer Setup
Annotating the Return Type
Typing an Action
Separate Interfaces for Actions
Applying Action Interfaces
Adding an Action Type Enum
A Better Way to Organize Code
Small Update for Try / Catch Block
Adding Action Creators
Adding Request Logic
Applying Typings to Dispatch
createStore Strikethrough in Code Editor
Setting Up Exports
Wiring Up to React
Oops... Initial State!
Reminder on Event Types
TypeScript Error When Dispatching Action
Calling an Action Creator
Binding Action Creators
Selecting State
Awkward Typings Around React-Redux
Creating a Typed Selector
Consuming Store State
Quick Wrapup
2 Topics
App Overview
Three Big Challenges
10 Topics
Transpiling Options
Remote Transpiling
Module Systems
Updated Install Command and Versions for Webpack
Behind the Scenes with Webpack
Webpack with ES Modules
One Small Change
Options for Bundling
So Which Approach?
A Webpack Replacement
15 Topics
A Demo App
Project Setup
Basic Form Elements
Understanding ESBuild
Initializing ESBuild
Using Refs for Arbitrary Values
Transpiling Works!
Troubles with Bundling in the Browser
Issues with NPM
Solution with Unpkg
Demo ESBuild Plugin
ESBuild Can Bundle!
Deep Dive on Bundling
Filters and Namespaces
Adding a Tiny Test Package
10 Topics
Dynamically Fetching Modules
Generating the Unpkg URL
Issues with Multi-File Packages
Solving Relative Paths
Using the URL Constructor
Failing Nested Requires
Resolving Nested Paths
It Works!
Defines During Bundling
Bonus! Package Versioning
15 Topics
Crazy Numbers of Requests
Implementing a Caching Layer
Caching with Key-Value Pairs
Fixing a TypeScript Error
Bundling User Input
Breaking Up Resolve Logic With Filters
Refactoring to Multiple Plugins
Loading CSS Files
Configuring the Correct Loader
Small Shortcoming with ESBuild
Tricking ESBuild's CSS Handling
Escaping CSS Snippets
Separate Load Filters
Extracting Common Caching Logic
A Better Way of Loading WASM
22 Topics
Executing User Code
Big Issues with Code Execution
How Do Others Solve This?
Displaying IFrames
Different Execution Context
Crossing Context
Sandboxing an IFrame
Breaking Access with Different Domains
How Do IFrames Fix Anything?
The Full Flow - How CodePen and CodeSandbox Work
Do We Need Separation?
Middle Ground Approach
IFrames with SrcDocs
Execution Using SrcDoc
Running Unescaped Code
Indirect Communication Between Frames
Passing Code to the IFrame
It Works!
Highlighting Errors
Issues with Repeat Execution
Resetting the IFrame Contents
Warning Fixup
19 Topics
Issues with Eager Bundling
Quick Revert
Legacy Peer Deps Flag to Avoid Errors
Open Source Editor Options
Displaying an Editor
Configuring the Editor
Crazy Monaco Editor Type Defs
A Few More Options
Setting the Initial Value
Handling Editor Change Events
Adding a Type Definition
Prettier Installation Required Update
Adding Prettier to Our Editor
Automatic Code Formatting
Adding a CSS Library
Floating the Format Button
Required Webpack v5 Polyfill Fixes
Fixing Syntax Highlighting
CSS For Syntax Highlighting
4 Topics
Refactoring Out a Preview Component
Extracting Bundling Logic
Fixing a Few Warnings
Multiple Editors and Preview Windows
26 Topics
New Versions of React Resizable to Support React 18
Adding Resizable Panes
Adding children to Interface for React 18
Setting Up React-Resizable
Setting a Resize Handle
Resizer CSS
Adding a Bunch of CSS
Expanding the Resizer Horizontally
Expanding the Code Editor
Fixing the Resize Issue
Constraining Vertical Resizes
Resizing Horizontally
Strategies for Prop Definitions
Applying Horizontal Resize Props
Getting Preview to Expand
A Small Workaround
Updating the After Selector
An Oddity Around the Resizer
On Resize Events
Updating Resizer Props
Improving Resize Performance
Why Width Jumps?
Synchronizing Width State
Adding Debouncing Logic
Clearing the Timeout
Adding an Execution Timeout
6 Topics
Error Handling
Extracting Reusable Error Handling Logic
Handling Async Errors
Small Update for Try / Catch Block
Capturing Bundling Errors
Printing the Captured Error
12 Topics
Plan for the Text Cell
A Few Issues with the Markdown Editor
Toggling the Markdown Editor Mode
Conditional Toggling
Why the Broken Cursor?
Solving Class Name Conflicts
Fixing the Divider Height
Restyling the Resizer Bar
Additional Markdown Styling
Applying the Dark Theme
Adding State to the Editor
Last Touch of Styling
14 Topics
Updated Install Command and Versions for React 18
Redux Design
Initial Scaffolding
Action Interface Definitions
Defining What a Cell Is
Cells Reducer Setup
Adding a Few Reducer Cases
Creating and Exporting the Store
React to Redux Connection
Action Creator Return Type Annotations
Easy Action Creator Implementations
Handling Cyclical Imports
Defining Direction
Update Cell Logic
6 Topics
Simple Updates with Immer
Removing a Cell
Swapping Cell Placement
Inserting New Cells
Small Gotcha with Immer
Manual Testing of a Redux Store
26 Topics
Back to React
Creating a Typed Selector
Property 'order' does not exist on type 'CellsState | undefined'.
Selecting an Ordered List
Rendering the List of Cells
Cell Type Rendering
Reminder on the Action Creator Helper
Extracting Local State
Extracting State from Text Cell
The Action Bar Component
Installing a Specific Version of FontAwesome
Adding Icon Buttons
Applying Custom CSS
Last Touch of Styling
Adding New Cells
Displaying Add Cell
Resolving the Key Warning
Styling Add Cell
A Touch More Styling
Forcing Add Cell Visibility
Understanding CSS Transition Curves
Adding Vertical Spacing
Why is Add Cell Weird
Three Possible Solutions
Refactoring the Redux Side
Refactoring the React Side
17 Topics
Should There Be a Bundles Reducer?
Here's the Plan
Defining Bundling Action Types
Initial Reducer Implementation
Small Required Update for bundlesReducer
Finishing Up the Reducer
Adding the Action Creator
React Wire Up
Adjusting the Reducer State
Solving a Small Warning with useMemo
Adding Eager Bundling
Getting an Initial Bundle
Showing a Loading Message
Styling the Progress Bar
Can We Estimate Bundle Duration?
Fading In the Progress Bar
Fixing the Background
15 Topics
Referencing Code from Previous Cells
Method of Implementation
Calculating Cumulative Code
Executing the Cumulative Code
Adding a Show Function
Showing Complex Values
Showing a JSX Element
Import Name Collisions
Avoiding Naming Collisions
Showing a React Component
Selective Calls to Show
Implementing a Show Function No-Op
Extracting a Hook
A Touch of CSS
Fixing Edge Snaps
15 Topics
The Path Moving Forward
Planning Local Architecture
An Easy Solution
What's the App Look Like in the Future?
Package Based Development
Introducing Lerna
Disclaimer on Lerna
Lerna Setup
Adding Modules with Lerna
Linking Packages
Updated npx Command for TypeScript Support
Adding TypeScript Support
Adding TypeScript to the CLI
Finishing TS Support
Parallel Start Scripts
6 Topics
Reading Command Line Arguments
Using Commander to Build a CLI
Specifying Command Line Options
Communication from the CLI to the API
What's that Directory Argument?
Calculating File Paths
21 Topics
The Local API
Adding Dependencies and Running Express
Error Handling Where?
Wrapping Express Listen with a Promise
TypeScript Errors in Catch Block
Error Handling Solution
Accessing the React App
Error occurred while trying to proxy
Connecting the Proxy
Building a Production Bundle
Understanding Package Links
What's the Path
Which Method Do We Use?
Determining Our Execution Environment
A Quick Test
Creating the Cells Router
Writing Cells to a File
Resolving Another TS Catch Error
Reading File Contents
Default Cell Values
Adding a JSON Parser
10 Topics
Adding Fetch Cell Logic to Redux
Small Update for Try / Catch Blocks
The Fetch Cells Action Creator
Handling Fetch Cell Types
Saving a List of Cells
When to Call Fetch?
Saving a List of Cells
Adding a Persist Middleware
Detecting When to Save
Debouncing Save Logic
17 Topics
The Path to NPM Publishing
Bootstrapping the Project
A Touch More Setup
Getting Ready to Publish
Configuring the CLI
Publishing to NPM
NPM Organizations
Declaring Scoped Packages
Refactoring Package Names
Auditing Dev Dependencies
Adding Build Scripts
The Case for Bundling
Running ESBuild
Creating a Repository
Publishing with Lerna
Does it Work?
Next Steps
75 Topics
Quick Note
TypeScript Overview
Environment Setup
Important Axios Version Information
A First App
Executing TypeScript Code
One Quick Change
Catching Errors with TypeScript
Catching More Errors!
Course Overview
Types
More on Types
Examples of Types
Where Do We Use Types?
Type Annotations and Inference
Annotations with Variables
Object Literal Annotations
Annotations Around Functions
Understanding Inference
The Any Type
Fixing the "Any" Type
Delayed Initialization
When Inference Doesn't Work
More on Annotations Around Functions
Inference Around Functions
Annotations for Anonymous Functions
Void and Never
Destructuring with Annotations
Annotations Around Objects
Arrays in TypeScript
Why Typed Arrays?
Multiple Types in Arrays
When to Use Typed Arrays
Tuples in TypeScript
Tuples in Action
Why Tuples?
Interfaces
Long Type Annotations
Fixing Annotations with Interfaces
Syntax Around Interfaces
Functions In Interfaces
Code Reuse with Interfaces
General Plan with Interfaces
Classes
Basic Inheritance
Class Method Modifiers
Fields in Classes
Fields with Inheritance
Where to Use Classes
Updated Parcel Instructions
App Overview
Bundling with Parcel
Project Structure
IMPORTANT Info About Faker Installation
Generating Random Data
Type Definition Files
Using Type Definition Files
Export Statements in TypeScript
Defining a Company
Important Note About Google Maps Key
Adding Google Maps Support
Required Update for New @types Library
Google Maps Integration with TypeScript
Exploring Type Definition Files
Hiding Functionality
Why Use Private Modifiers? Here's Why
Adding Markers
Duplicate Code
One Possible Solution
Restricting Access with Interfaces
Implicit Type Checks
Showing Popup Windows
Updating Interface Definitions
Optional Implements Clauses
App Wrapup
1 Topic
Bonus!
React and Typescript: Build a Portfolio Project
Related React JS Courses
Thank You!
Your review has been submitted successfully.