React and Typescript Build a Portfolio Project

React and Typescript Build a Portfolio Project

What you’ll learn

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

Requirements

Basic knowledge of React and Redux
No prior knowledge of Typescript required – an introduction is provided

Description

You’ve learned React, but what now? Time to build an awesome project for your portfolio!Prove your React knowledge to employers.There are hundreds of resources online for teaching you the basics of React, but few of them go beyond the basics. You need more – something to teach you how to build a large, interesting app. Something unique, something more than another to-do list.This course is your answer.Kick off your learning experience with an introduction on how to use React and Typescript together. Not familiar with Typescript? No problem! A lightning fast – but comprehensive – tutorial is included!Once you’re ready with React and Typescript, you’ll dive into our big project. You are going to build an interactive browser-based coding environment. It’s like a Jupyter Notebook, but for Javascript, with many additional features added in. Yes, this is what you are going to build in this course! You will solve incredible challenges around bundling and transpiling code directly in the browser. This is a task normally done by running Webpack and Babel at your terminal! You will execute users’ code safely in the browser just like how famous services like CodeSandBox and CodePen do. Finally, you’ll deploy this project using a multi-package architecture to NPM, where your friends and employers can easily download and run your project.During this entire project, I will show you a variety of different solutions to an incredible number of problems. I will show you step-by-step how to solve each problem. You will also see many concerns around performance and security addressed.At the end of the course, you will have an amazing portfolio project with excellent looks and functionality. You will understand every line of code, and be able to explain every bit to potential employers.Here’s a partial list of the topics that will be covered in this course:Master the use of React, Redux, and Typescript togetherBuild a complex and interesting app using a package-based architectureUnderstand the challenges of in-browser code transpiling and and processingSecure your app against potential security exploitsSafely execute user-provided code directly in the browserRun a code editor directly in the browser – the same editor used by VSCode!Leverage Web Assembly to run a code bundler directly in the browser at lightning-fast speedsUse the internals of Redux to manually test out your business logicDiscover dozens of tricks to build a sleek UIDeploy your app to the NPM registry, where others can easily use itI built this course to help you apply your React skills. Sign up today and build an incredible app that will prove your knowledge.

Overview

Section 1: React with Typescript

Lecture 1 How to Get Help

Lecture 2 Join Our Community!

Lecture 3 Course Resources

Lecture 4 Be Sure to Watch this Video!

Lecture 5 Generating TypeScript-Enabled Projects

Lecture 6 ReactDOM warning with React v18

Lecture 7 File Extensions and Starting Up React

Section 2: Types Around Props and State

Lecture 8 Changes with TypeScript

Lecture 9 The Big Difference with Props

Lecture 10 Explicit Component Type Annotations

Lecture 11 Property ‘children’ does not exist

Lecture 12 Annotations with Children

Lecture 13 State with TypeScript

Lecture 14 Type Inference with State

Lecture 15 Quick Finish to the Example

Lecture 16 More on State

Lecture 17 Type Unions in State

Section 3: Types Around Events and Refs

Lecture 18 Inline Event Handlers

Lecture 19 Typing Standalone Event Handlers

Lecture 20 Handling Drag Events Too!

Lecture 21 TypeScript with Class Components

Lecture 22 Applying Types to Refs

Lecture 23 More on Refs

Section 4: Typescript with Redux

Lecture 24 App Overview

Lecture 25 Updated Install Command and Versions for React 18

Lecture 26 Project Setup

Lecture 27 Redux Store Design

Lecture 28 Reducer Setup

Lecture 29 Annotating the Return Type

Lecture 30 Typing an Action

Lecture 31 Separate Interfaces for Actions

Lecture 32 Applying Action Interfaces

Lecture 33 Adding an Action Type Enum

Lecture 34 A Better Way to Organize Code

Lecture 35 Small Update for Try / Catch Block

Lecture 36 Adding Action Creators

Lecture 37 Adding Request Logic

Lecture 38 Applying Typings to Dispatch

Lecture 39 createStore Strikethrough in Code Editor

Lecture 40 Setting Up Exports

Lecture 41 Wiring Up to React

Lecture 42 Oops… Initial State!

Lecture 43 Reminder on Event Types

Lecture 44 TypeScript Error When Dispatching Action

Lecture 45 Calling an Action Creator

Lecture 46 Binding Action Creators

Lecture 47 Selecting State

Lecture 48 Awkward Typings Around React-Redux

Lecture 49 Creating a Typed Selector

Lecture 50 Consuming Store State

Lecture 51 Quick Wrapup

Section 5: The Big App – Here’s What We’re Building!

Lecture 52 App Overview

Lecture 53 Three Big Challenges

Section 6: Code Transpiling in the Browser

Lecture 54 Transpiling Options

Lecture 55 Remote Transpiling

Lecture 56 Module Systems

Lecture 57 Behind the Scenes with Webpack

Lecture 58 Webpack with ES Modules

Lecture 59 One Small Change

Lecture 60 Options for Bundling

Lecture 61 So Which Approach?

Lecture 62 A Webpack Replacement

Section 7: Implementing In-Browser Bundling

Lecture 63 A Demo App

Lecture 64 Project Setup

Lecture 65 Basic Form Elements

Lecture 66 Understanding ESBuild

Lecture 67 Initializing ESBuild

Lecture 68 Using Refs for Arbitrary Values

Lecture 69 Transpiling Works!

Lecture 70 Troubles with Bundling in the Browser

Lecture 71 Issues with NPM

Lecture 72 Solution with Unpkg

Lecture 73 Demo ESBuild Plugin

Lecture 74 ESBuild Can Bundle!

Lecture 75 Deep Dive on Bundling

Lecture 76 Filters and Namespaces

Lecture 77 Adding a Tiny Test Package

Section 8: Dynamic Fetching and Loading of NPM Modules

Lecture 78 Dynamically Fetching Modules

Lecture 79 Generating the Unpkg URL

Lecture 80 Issues with Multi-File Packages

Lecture 81 Solving Relative Paths

Lecture 82 Using the URL Constructor

Lecture 83 Failing Nested Requires

Lecture 84 Resolving Nested Paths

Lecture 85 It Works!

Lecture 86 Defines During Bundling

Lecture 87 Bonus! Package Versioning

Section 9: Caching For Big Performance Gains

Lecture 88 Crazy Numbers of Requests

Lecture 89 Implementing a Caching Layer

Lecture 90 Caching with Key-Value Pairs

Lecture 91 Fixing a TypeScript Error

Lecture 92 Bundling User Input

Lecture 93 Breaking Up Resolve Logic With Filters

Lecture 94 Refactoring to Multiple Plugins

Lecture 95 Loading CSS Files

Lecture 96 Configuring the Correct Loader

Lecture 97 Small Shortcoming with ESBuild

Lecture 98 Tricking ESBuild’s CSS Handling

Lecture 99 Escaping CSS Snippets

Lecture 100 Separate Load Filters

Lecture 101 Extracting Common Caching Logic

Lecture 102 A Better Way of Loading WASM

Section 10: Safely Handling Untrusted Code Execution

Lecture 103 Executing User Code

Lecture 104 Big Issues with Code Execution

Lecture 105 How Do Others Solve This?

Lecture 106 Displaying IFrames

Lecture 107 Different Execution Context

Lecture 108 Crossing Context

Lecture 109 Sandboxing an IFrame

Lecture 110 Breaking Access with Different Domains

Lecture 111 How Do IFrames Fix Anything?

Lecture 112 The Full Flow – How CodePen and CodeSandbox Work

Lecture 113 Do We Need Separation?

Lecture 114 Middle Ground Approach

Lecture 115 IFrames with SrcDocs

Lecture 116 Execution Using SrcDoc

Lecture 117 Running Unescaped Code

Lecture 118 Indirect Communication Between Frames

Lecture 119 Passing Code to the IFrame

Lecture 120 It Works!

Lecture 121 Highlighting Errors

Lecture 122 Issues with Repeat Execution

Lecture 123 Resetting the IFrame Contents

Lecture 124 Warning Fixup

Section 11: Displaying a Code Editor In a React App

Lecture 125 Issues with Eager Bundling

Lecture 126 Quick Revert

Lecture 127 Legacy Peer Deps Flag to Avoid Errors

Lecture 128 Open Source Editor Options

Lecture 129 Displaying an Editor

Lecture 130 Configuring the Editor

Lecture 131 Crazy Monaco Editor Type Defs

Lecture 132 A Few More Options

Lecture 133 Setting the Initial Value

Lecture 134 Handling Editor Change Events

Lecture 135 Adding a Type Definition

Lecture 136 Adding Prettier to Our Editor

Lecture 137 Automatic Code Formatting

Lecture 138 Adding a CSS Library

Lecture 139 Floating the Format Button

Lecture 140 Downgrading CRA to Support Dependencies

Lecture 141 Fixing Syntax Highlighting

Lecture 142 CSS For Syntax Highlighting

Section 12: How to Extract Reusable Components

Lecture 143 Refactoring Out a Preview Component

Lecture 144 Extracting Bundling Logic

Lecture 145 Fixing a Few Warnings

Lecture 146 Multiple Editors and Preview Windows

Section 13: Draggable Resizing Components

Lecture 147 New Versions of React Resizable to Support React 18

Lecture 148 Adding Resizable Panes

Lecture 149 Adding children to Interface for React 18

Lecture 150 Setting Up React-Resizable

Lecture 151 Setting a Resize Handle

Lecture 152 Resizer CSS

Lecture 153 Adding a Bunch of CSS

Lecture 154 Expanding the Resizer Horizontally

Lecture 155 Expanding the Code Editor

Lecture 156 Fixing the Resize Issue

Lecture 157 Constraining Vertical Resizes

Lecture 158 Resizing Horizontally

Lecture 159 Strategies for Prop Definitions

Lecture 160 Applying Horizontal Resize Props

Lecture 161 Getting Preview to Expand

Lecture 162 A Small Workaround

Lecture 163 Updating the After Selector

Lecture 164 An Oddity Around the Resizer

Lecture 165 On Resize Events

Lecture 166 Updating Resizer Props

Lecture 167 Improving Resize Performance

Lecture 168 Why Width Jumps?

Lecture 169 Synchronizing Width State

Lecture 170 Quick Dependency Array Fix

Lecture 171 Adding Debouncing Logic

Lecture 172 Clearing the Timeout

Lecture 173 Adding an Execution Timeout

Section 14: Techniques for Error Handling in React Apps

Lecture 174 Error Handling

Lecture 175 Extracting Reusable Error Handling Logic

Lecture 176 Handling Async Errors

Lecture 177 Small Update for Try / Catch Block

Lecture 178 Capturing Bundling Errors

Lecture 179 Printing the Captured Error

Section 15: Creating a Markdown Editor in a React App

Lecture 180 Plan for the Text Cell

Lecture 181 A Few Issues with the Markdown Editor

Lecture 182 Toggling the Markdown Editor Mode

Lecture 183 Conditional Toggling

Lecture 184 Why the Broken Cursor?

Lecture 185 Solving Class Name Conflicts

Lecture 186 Fixing the Divider Height

Lecture 187 Restyling the Resizer Bar

Lecture 188 Additional Markdown Styling

Lecture 189 Applying the Dark Theme

Lecture 190 Adding State to the Editor

Lecture 191 Last Touch of Styling

Section 16: Design Patterns for Redux with Typescript

Lecture 192 Updated Install Command and Versions for React 18

Lecture 193 Redux Design

Lecture 194 Initial Scaffolding

Lecture 195 Action Interface Definitions

Lecture 196 Defining What a Cell Is

Lecture 197 Cells Reducer Setup

Lecture 198 Adding a Few Reducer Cases

Lecture 199 Creating and Exporting the Store

Lecture 200 React to Redux Connection

Lecture 201 Action Creator Return Type Annotations

Lecture 202 Easy Action Creator Implementations

Lecture 203 Handling Cyclical Imports

Lecture 204 Defining Direction

Lecture 205 Update Cell Logic

Section 17: Simplify State Updates with Immer

Lecture 206 Simple Updates with Immer

Lecture 207 Removing a Cell

Lecture 208 Swapping Cell Placement

Lecture 209 Inserting New Cells

Lecture 210 Small Gotcha with Immer

Lecture 211 Manual Testing of a Redux Store

Section 18: Binding React with Redux

Lecture 212 Back to React

Lecture 213 Creating a Typed Selector

Lecture 214 Property ‘order’ does not exist on type ‘CellsState | undefined’.

Lecture 215 Selecting an Ordered List

Lecture 216 Rendering the List of Cells

Lecture 217 Cell Type Rendering

Lecture 218 Reminder on the Action Creator Helper

Lecture 219 Extracting Local State

Lecture 220 Extracting State from Text Cell

Lecture 221 The Action Bar Component

Lecture 222 Installing a Specific Version of FontAwesome

Lecture 223 Adding Icon Buttons

Lecture 224 Applying Custom CSS

Lecture 225 Last Touch of Styling

Lecture 226 Adding New Cells

Lecture 227 Displaying Add Cell

Lecture 228 Resolving the Key Warning

Lecture 229 Styling Add Cell

Lecture 230 A Touch More Styling

Lecture 231 Forcing Add Cell Visibility

Lecture 232 Understanding CSS Transition Curves

Lecture 233 Adding Vertical Spacing

Lecture 234 Why is Add Cell Weird

Lecture 235 Three Possible Solutions

Lecture 236 Refactoring the Redux Side

Lecture 237 Refactoring the React Side

Section 19: Connecting Bundles in Redux

Lecture 238 Should There Be a Bundles Reducer?

Lecture 239 Here’s the Plan

Lecture 240 Defining Bundling Action Types

Lecture 241 Initial Reducer Implementation

Lecture 242 Small Required Update for bundlesReducer

Lecture 243 Finishing Up the Reducer

Lecture 244 Adding the Action Creator

Lecture 245 React Wire Up

Lecture 246 Adjusting the Reducer State

Lecture 247 Solving a Small Warning with useMemo

Lecture 248 Adding Eager Bundling

Lecture 249 Getting an Initial Bundle

Lecture 250 Showing a Loading Message

Lecture 251 Styling the Progress Bar

Lecture 252 Can We Estimate Bundle Duration?

Lecture 253 Fading In the Progress Bar

Lecture 254 Fixing the Background

Section 20: Adding a ‘Cumulative Code Execution’ Feature

Lecture 255 Referencing Code from Previous Cells

Lecture 256 Method of Implementation

Lecture 257 Calculating Cumulative Code

Lecture 258 Executing the Cumulative Code

Lecture 259 Adding a Show Function

Lecture 260 Showing Complex Values

Lecture 261 Showing a JSX Element

Lecture 262 Import Name Collisions

Lecture 263 Avoiding Naming Collisions

Lecture 264 Showing a React Component

Lecture 265 Selective Calls to Show

Lecture 266 Implementing a Show Function No-Op

Lecture 267 Extracting a Hook

Lecture 268 A Touch of CSS

Lecture 269 Fixing Edge Snaps

Section 21: The Path – Lerna

Lecture 270 The Path Moving Forward

Lecture 271 Planning Local Architecture

Lecture 272 An Easy Solution

Lecture 273 What’s the App Look Like in the Future?

Lecture 274 Package Based Development

Lecture 275 Introducing Lerna

Lecture 276 Disclaimer on Lerna

Lecture 277 Lerna Setup

Lecture 278 Adding Modules with Lerna

Lecture 279 Linking Packages

Lecture 280 Updated npx Command for TypeScript Support

Lecture 281 Adding TypeScript Support

Lecture 282 Adding TypeScript to the CLI

Lecture 283 Finishing TS Support

Lecture 284 Parallel Start Scripts

Section 22: Creating the CLI

Lecture 285 Reading Command Line Arguments

Lecture 286 Using Commander to Build a CLI

Lecture 287 Specifying Command Line Options

Lecture 288 Communication from the CLI to the API

Lecture 289 What’s that Directory Argument?

Lecture 290 Calculating File Paths

Section 23: Adding a Local-Only API

Lecture 291 The Local API

Lecture 292 Adding Dependencies and Running Express

Lecture 293 Error Handling Where?

Lecture 294 Wrapping Express Listen with a Promise

Lecture 295 TypeScript Errors in Catch Block

Lecture 296 Error Handling Solution

Lecture 297 Accessing the React App

Lecture 298 Connecting the Proxy

Lecture 299 Building a Production Bundle

Lecture 300 Understanding Package Links

Lecture 301 What’s the Path

Lecture 302 Which Method Do We Use?

Lecture 303 Determining Our Execution Environment

Lecture 304 A Quick Test

Lecture 305 Creating the Cells Router

Lecture 306 Writing Cells to a File

Lecture 307 Resolving Another TS Catch Error

Lecture 308 Reading File Contents

Lecture 309 Default Cell Values

Lecture 310 Adding a JSON Parser

Section 24: Data Persistence

Lecture 311 Adding Fetch Cell Logic to Redux

Lecture 312 Small Update for Try / Catch Blocks

Lecture 313 The Fetch Cells Action Creator

Lecture 314 Handling Fetch Cell Types

Lecture 315 Saving a List of Cells

Lecture 316 When to Call Fetch?

Lecture 317 Saving a List of Cells

Lecture 318 Adding a Persist Middleware

Lecture 319 Detecting When to Save

Lecture 320 Debouncing Save Logic

Section 25: Publishing to NPM

Lecture 321 The Path to NPM Publishing

Lecture 322 Bootstrapping the Project

Lecture 323 A Touch More Setup

Lecture 324 Getting Ready to Publish

Lecture 325 Configuring the CLI

Lecture 326 Publishing to NPM

Lecture 327 NPM Organizations

Lecture 328 Declaring Scoped Packages

Lecture 329 Refactoring Package Names

Lecture 330 Auditing Dev Dependencies

Lecture 331 Adding Build Scripts

Lecture 332 The Case for Bundling

Lecture 333 Running ESBuild

Lecture 334 Creating a Repository

Lecture 335 Publishing with Lerna

Lecture 336 Does it Work?

Lecture 337 Next Steps

Section 26: Appendix: TypeScript

Lecture 338 Quick Note

Lecture 339 TypeScript Overview

Lecture 340 Environment Setup

Lecture 341 Important Axios Version Information

Lecture 342 A First App

Lecture 343 Executing TypeScript Code

Lecture 344 One Quick Change

Lecture 345 Catching Errors with TypeScript

Lecture 346 Catching More Errors!

Lecture 347 Course Overview

Lecture 348 Types

Lecture 349 More on Types

Lecture 350 Examples of Types

Lecture 351 Where Do We Use Types?

Lecture 352 Type Annotations and Inference

Lecture 353 Annotations with Variables

Lecture 354 Object Literal Annotations

Lecture 355 Annotations Around Functions

Lecture 356 Understanding Inference

Lecture 357 The Any Type

Lecture 358 Fixing the “Any” Type

Lecture 359 Delayed Initialization

Lecture 360 When Inference Doesn’t Work

Lecture 361 More on Annotations Around Functions

Lecture 362 Inference Around Functions

Lecture 363 Annotations for Anonymous Functions

Lecture 364 Void and Never

Lecture 365 Destructuring with Annotations

Lecture 366 Annotations Around Objects

Lecture 367 Arrays in TypeScript

Lecture 368 Why Typed Arrays?

Lecture 369 Multiple Types in Arrays

Lecture 370 When to Use Typed Arrays

Lecture 371 Tuples in TypeScript

Lecture 372 Tuples in Action

Lecture 373 Why Tuples?

Lecture 374 Interfaces

Lecture 375 Long Type Annotations

Lecture 376 Fixing Annotations with Interfaces

Lecture 377 Syntax Around Interfaces

Lecture 378 Functions In Interfaces

Lecture 379 Code Reuse with Interfaces

Lecture 380 General Plan with Interfaces

Lecture 381 Classes

Lecture 382 Basic Inheritance

Lecture 383 Class Method Modifiers

Lecture 384 Fields in Classes

Lecture 385 Fields with Inheritance

Lecture 386 Where to Use Classes

Lecture 387 Updated Parcel Instructions

Lecture 388 App Overview

Lecture 389 Bundling with Parcel

Lecture 390 Project Structure

Lecture 391 IMPORTANT Info About Faker Installation

Lecture 392 Generating Random Data

Lecture 393 Type Definition Files

Lecture 394 Using Type Definition Files

Lecture 395 Export Statements in TypeScript

Lecture 396 Defining a Company

Lecture 397 Important Note About Google Maps Key

Lecture 398 Adding Google Maps Support

Lecture 399 Required Update for New @types Library

Lecture 400 Google Maps Integration with TypeScript

Lecture 401 Exploring Type Definition Files

Lecture 402 Hiding Functionality

Lecture 403 Why Use Private Modifiers? Here’s Why

Lecture 404 Adding Markers

Lecture 405 Duplicate Code

Lecture 406 One Possible Solution

Lecture 407 Restricting Access with Interfaces

Lecture 408 Implicit Type Checks

Lecture 409 Showing Popup Windows

Lecture 410 Updating Interface Definitions

Lecture 411 Optional Implements Clauses

Lecture 412 App Wrapup

Section 27: Bonus!

Lecture 413 Bonus!

Engineers looking to expand their project portfolio

Course Information:

Udemy | English | 29h 25m | 11.61 GB
Created by: Stephen Grider

You Can See More Courses in the Developer >> Greetings from CourseDown.com