React and Typescript: Build a Portfolio Project

React and Typescript: Build a Portfolio Project

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 413 lectures (29h 25m) | 11.62 GB

Expand your portfolio of projects by building a complex app with the latest web technologies.

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 together
  • Build a complex and interesting app using a package-based architecture
  • Understand the challenges of in-browser code transpiling and and processing
  • Secure your app against potential security exploits
  • Safely execute user-provided code directly in the browser
  • Run 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 speeds
  • Use the internals of Redux to manually test out your business logic
  • Discover dozens of tricks to build a sleek UI
  • Deploy your app to the NPM registry, where others can easily use it

I built this course to help you apply your React skills. Sign up today and build an incredible app that will prove your knowledge.

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
Table of Contents

React with Typescript
1 How to Get Help
2 Join Our Community
3 Course Resources
4 Be Sure to Watch this Video
5 Generating TypeScriptEnabled Projects
6 ReactDOM warning with React v18
7 File Extensions and Starting Up React

Types Around Props and State
8 Changes with TypeScript
9 The Big Difference with Props
10 Explicit Component Type Annotations
11 Property children does not exist
12 Annotations with Children
13 State with TypeScript
14 Type Inference with State
15 Quick Finish to the Example
16 More on State
17 Type Unions in State

Types Around Events and Refs
18 Inline Event Handlers
19 Typing Standalone Event Handlers
20 Handling Drag Events Too
21 TypeScript with Class Components
22 Applying Types to Refs
23 More on Refs

Typescript with Redux
24 App Overview
25 Updated Install Command and Versions for React 18
26 Project Setup
27 Redux Store Design
28 Reducer Setup
29 Annotating the Return Type
30 Typing an Action
31 Separate Interfaces for Actions
32 Applying Action Interfaces
33 Adding an Action Type Enum
34 A Better Way to Organize Code
35 Small Update for Try Catch Block
36 Adding Action Creators
37 Adding Request Logic
38 Applying Typings to Dispatch
39 createStore Strikethrough in Code Editor
40 Setting Up Exports
41 Wiring Up to React
42 Oops Initial State
43 Reminder on Event Types
44 TypeScript Error When Dispatching Action
45 Calling an Action Creator
46 Binding Action Creators
47 Selecting State
48 Awkward Typings Around ReactRedux
49 Creating a Typed Selector
50 Consuming Store State
51 Quick Wrapup

The Big App Heres What Were Building
52 App Overview
53 Three Big Challenges

Code Transpiling in the Browser
54 Transpiling Options
55 Remote Transpiling
56 Module Systems
57 Behind the Scenes with Webpack
58 Webpack with ES Modules
59 One Small Change
60 Options for Bundling
61 So Which Approach
62 A Webpack Replacement

Implementing InBrowser Bundling
63 A Demo App
64 Project Setup
65 Basic Form Elements
66 Understanding ESBuild
67 Initializing ESBuild
68 Using Refs for Arbitrary Values
69 Transpiling Works
70 Troubles with Bundling in the Browser
71 Issues with NPM
72 Solution with Unpkg
73 Demo ESBuild Plugin
74 ESBuild Can Bundle
75 Deep Dive on Bundling
76 Filters and Namespaces
77 Adding a Tiny Test Package

Dynamic Fetching and Loading of NPM Modules
78 Dynamically Fetching Modules
79 Generating the Unpkg URL
80 Issues with MultiFile Packages
81 Solving Relative Paths
82 Using the URL Constructor
83 Failing Nested Requires
84 Resolving Nested Paths
85 It Works
86 Defines During Bundling
87 Bonus Package Versioning

Caching For Big Performance Gains
88 Crazy Numbers of Requests
89 Implementing a Caching Layer
90 Caching with KeyValue Pairs
91 Fixing a TypeScript Error
92 Bundling User Input
93 Breaking Up Resolve Logic With Filters
94 Refactoring to Multiple Plugins
95 Loading CSS Files
96 Configuring the Correct Loader
97 Small Shortcoming with ESBuild
98 Tricking ESBuilds CSS Handling
99 Escaping CSS Snippets
100 Separate Load Filters
101 Extracting Common Caching Logic
102 A Better Way of Loading WASM

Safely Handling Untrusted Code Execution
103 Executing User Code
104 Big Issues with Code Execution
105 How Do Others Solve This
106 Displaying IFrames
107 Different Execution Context
108 Crossing Context
109 Sandboxing an IFrame
110 Breaking Access with Different Domains
111 How Do IFrames Fix Anything
112 The Full Flow How CodePen and CodeSandbox Work
113 Do We Need Separation
114 Middle Ground Approach
115 IFrames with SrcDocs
116 Execution Using SrcDoc
117 Running Unescaped Code
118 Indirect Communication Between Frames
119 Passing Code to the IFrame
120 It Works
121 Highlighting Errors
122 Issues with Repeat Execution
123 Resetting the IFrame Contents
124 Warning Fixup

Displaying a Code Editor In a React App
125 Issues with Eager Bundling
126 Quick Revert
127 Legacy Peer Deps Flag to Avoid Errors
128 Open Source Editor Options
129 Displaying an Editor
130 Configuring the Editor
131 Crazy Monaco Editor Type Defs
132 A Few More Options
133 Setting the Initial Value
134 Handling Editor Change Events
135 Adding a Type Definition
136 Adding Prettier to Our Editor
137 Automatic Code Formatting
138 Adding a CSS Library
139 Floating the Format Button
140 Downgrading CRA to Support Dependencies
141 Fixing Syntax Highlighting
142 CSS For Syntax Highlighting

How to Extract Reusable Components
143 Refactoring Out a Preview Component
144 Extracting Bundling Logic
145 Fixing a Few Warnings
146 Multiple Editors and Preview Windows

Draggable Resizing Components
147 New Versions of React Resizable to Support React 18
148 Adding Resizable Panes
149 Adding children to Interface for React 18
150 Setting Up ReactResizable
151 Setting a Resize Handle
152 Resizer CSS
153 Adding a Bunch of CSS
154 Expanding the Resizer Horizontally
155 Expanding the Code Editor
156 Fixing the Resize Issue
157 Constraining Vertical Resizes
158 Resizing Horizontally
159 Strategies for Prop Definitions
160 Applying Horizontal Resize Props
161 Getting Preview to Expand
162 A Small Workaround
163 Updating the After Selector
164 An Oddity Around the Resizer
165 On Resize Events
166 Updating Resizer Props
167 Improving Resize Performance
168 Why Width Jumps
169 Synchronizing Width State
170 Quick Dependency Array Fix
171 Adding Debouncing Logic
172 Clearing the Timeout
173 Adding an Execution Timeout

Techniques for Error Handling in React Apps
174 Error Handling
175 Extracting Reusable Error Handling Logic
176 Handling Async Errors
177 Small Update for Try Catch Block
178 Capturing Bundling Errors
179 Printing the Captured Error

Creating a Markdown Editor in a React App
180 Plan for the Text Cell
181 A Few Issues with the Markdown Editor
182 Toggling the Markdown Editor Mode
183 Conditional Toggling
184 Why the Broken Cursor
185 Solving Class Name Conflicts
186 Fixing the Divider Height
187 Restyling the Resizer Bar
188 Additional Markdown Styling
189 Applying the Dark Theme
190 Adding State to the Editor
191 Last Touch of Styling

Design Patterns for Redux with Typescript
192 Updated Install Command and Versions for React 18
193 Redux Design
194 Initial Scaffolding
195 Action Interface Definitions
196 Defining What a Cell Is
197 Cells Reducer Setup
198 Adding a Few Reducer Cases
199 Creating and Exporting the Store
200 React to Redux Connection
201 Action Creator Return Type Annotations
202 Easy Action Creator Implementations
203 Handling Cyclical Imports
204 Defining Direction
205 Update Cell Logic

Simplify State Updates with Immer
206 Simple Updates with Immer
207 Removing a Cell
208 Swapping Cell Placement
209 Inserting New Cells
210 Small Gotcha with Immer
211 Manual Testing of a Redux Store

Binding React with Redux
212 Back to React
213 Creating a Typed Selector
214 Property order does not exist on type CellsState undefined
215 Selecting an Ordered List
216 Rendering the List of Cells
217 Cell Type Rendering
218 Reminder on the Action Creator Helper
219 Extracting Local State
220 Extracting State from Text Cell
221 The Action Bar Component
222 Installing a Specific Version of FontAwesome
223 Adding Icon Buttons
224 Applying Custom CSS
225 Last Touch of Styling
226 Adding New Cells
227 Displaying Add Cell
228 Resolving the Key Warning
229 Styling Add Cell
230 A Touch More Styling
231 Forcing Add Cell Visibility
232 Understanding CSS Transition Curves
233 Adding Vertical Spacing
234 Why is Add Cell Weird
235 Three Possible Solutions
236 Refactoring the Redux Side
237 Refactoring the React Side

Connecting Bundles in Redux
238 Should There Be a Bundles Reducer
239 Heres the Plan
240 Defining Bundling Action Types
241 Initial Reducer Implementation
242 Small Required Update for bundlesReducer
243 Finishing Up the Reducer
244 Adding the Action Creator
245 React Wire Up
246 Adjusting the Reducer State
247 Solving a Small Warning with useMemo
248 Adding Eager Bundling
249 Getting an Initial Bundle
250 Showing a Loading Message
251 Styling the Progress Bar
252 Can We Estimate Bundle Duration
253 Fading In the Progress Bar
254 Fixing the Background

Adding a Cumulative Code Execution Feature
255 Referencing Code from Previous Cells
256 Method of Implementation
257 Calculating Cumulative Code
258 Executing the Cumulative Code
259 Adding a Show Function
260 Showing Complex Values
261 Showing a JSX Element
262 Import Name Collisions
263 Avoiding Naming Collisions
264 Showing a React Component
265 Selective Calls to Show
266 Implementing a Show Function NoOp
267 Extracting a Hook
268 A Touch of CSS
269 Fixing Edge Snaps

The Path Lerna
270 The Path Moving Forward
271 Planning Local Architecture
272 An Easy Solution
273 Whats the App Look Like in the Future
274 Package Based Development
275 Introducing Lerna
276 Disclaimer on Lerna
277 Lerna Setup
278 Adding Modules with Lerna
279 Linking Packages
280 Updated npx Command for TypeScript Support
281 Adding TypeScript Support
282 Adding TypeScript to the CLI
283 Finishing TS Support
284 Parallel Start Scripts

Creating the CLI
285 Reading Command Line Arguments
286 Using Commander to Build a CLI
287 Specifying Command Line Options
288 Communication from the CLI to the API
289 Whats that Directory Argument
290 Calculating File Paths

Adding a LocalOnly API
291 The Local API
292 Adding Dependencies and Running Express
293 Error Handling Where
294 Wrapping Express Listen with a Promise
295 TypeScript Errors in Catch Block
296 Error Handling Solution
297 Accessing the React App
298 Connecting the Proxy
299 Building a Production Bundle
300 Understanding Package Links
301 Whats the Path
302 Which Method Do We Use
303 Determining Our Execution Environment
304 A Quick Test
305 Creating the Cells Router
306 Writing Cells to a File
307 Resolving Another TS Catch Error
308 Reading File Contents
309 Default Cell Values
310 Adding a JSON Parser

Data Persistence
311 Adding Fetch Cell Logic to Redux
312 Small Update for Try Catch Blocks
313 The Fetch Cells Action Creator
314 Handling Fetch Cell Types
315 Saving a List of Cells
316 When to Call Fetch
317 Saving a List of Cells
318 Adding a Persist Middleware
319 Detecting When to Save
320 Debouncing Save Logic

Publishing to NPM
321 The Path to NPM Publishing
322 Bootstrapping the Project
323 A Touch More Setup
324 Getting Ready to Publish
325 Configuring the CLI
326 Publishing to NPM
327 NPM Organizations
328 Declaring Scoped Packages
329 Refactoring Package Names
330 Auditing Dev Dependencies
331 Adding Build Scripts
332 The Case for Bundling
333 Running ESBuild
334 Creating a Repository
335 Publishing with Lerna
336 Does it Work
337 Next Steps

Appendix TypeScript
338 Quick Note
339 TypeScript Overview
340 Environment Setup
341 Important Axios Version Information
342 A First App
343 Executing TypeScript Code
344 One Quick Change
345 Catching Errors with TypeScript
346 Catching More Errors
347 Course Overview
348 Types
349 More on Types
350 Examples of Types
351 Where Do We Use Types
352 Type Annotations and Inference
353 Annotations with Variables
354 Object Literal Annotations
355 Annotations Around Functions
356 Understanding Inference
357 The Any Type
358 Fixing the Any Type
359 Delayed Initialization
360 When Inference Doesnt Work
361 More on Annotations Around Functions
362 Inference Around Functions
363 Annotations for Anonymous Functions
364 Void and Never
365 Destructuring with Annotations
366 Annotations Around Objects
367 Arrays in TypeScript
368 Why Typed Arrays
369 Multiple Types in Arrays
370 When to Use Typed Arrays
371 Tuples in TypeScript
372 Tuples in Action
373 Why Tuples
374 Interfaces
375 Long Type Annotations
376 Fixing Annotations with Interfaces
377 Syntax Around Interfaces
378 Functions In Interfaces
379 Code Reuse with Interfaces
380 General Plan with Interfaces
381 Classes
382 Basic Inheritance
383 Class Method Modifiers
384 Fields in Classes
385 Fields with Inheritance
386 Where to Use Classes
387 Updated Parcel Instructions
388 App Overview
389 Bundling with Parcel
390 Project Structure
391 IMPORTANT Info About Faker Installation
392 Generating Random Data
393 Type Definition Files
394 Using Type Definition Files
395 Export Statements in TypeScript
396 Defining a Company
397 Important Note About Google Maps Key
398 Adding Google Maps Support
399 Required Update for New types Library
400 Google Maps Integration with TypeScript
401 Exploring Type Definition Files
402 Hiding Functionality
403 Why Use Private Modifiers Heres Why
404 Adding Markers
405 Duplicate Code
406 One Possible Solution
407 Restricting Access with Interfaces
408 Implicit Type Checks
409 Showing Popup Windows
410 Updating Interface Definitions
411 Optional Implements Clauses
412 App Wrapup

413 Bonus