React and Typescript: Build a Portfolio Project

React and Typescript: Build a Portfolio Project

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 29.5 Hours | 10.7 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 Be Sure to Watch this Video!
4 Generating TypeScript-Enabled Projects
5 File Extensions and Starting Up React

Types Around Props and State
6 Changes with TypeScript
7 The Big Difference with Props
8 Explicit Component Type Annotations
9 Annotations with Children
10 State with TypeScript
11 Type Inference with State
12 Quick Finish to the Example
13 More on State
14 Type Unions in State

Types Around Events and Refs
15 Inline Event Handlers
16 Typing Standalone Event Handlers
17 Handling Drag Events Too!
18 TypeScript with Class Components
19 Applying Types to Refs
20 More on Refs

Typescript with Redux
21 App Overview
22 Project Setup
23 Redux Store Design
24 Reducer Setup
25 Annotating the Return Type
26 Typing an Action
27 Separate Interfaces for Actions
28 Applying Action Interfaces
29 Adding an Action Type Enum
30 A Better Way to Organize Code
31 Adding Action Creators
32 Adding Request Logic
33 Applying Typings to Dispatch
34 Setting Up Exports
35 Wiring Up to React
36 Oops… Initial State!
37 Reminder on Event Types
38 Calling an Action Creator
39 Binding Action Creators
40 Selecting State
41 Awkward Typings Around React-Redux
42 Creating a Typed Selector
43 Consuming Store State
44 Quick Wrapup

The Big App – Here’s What We’re Building!
45 App Overview
46 Three Big Challenges

Code Transpiling in the Browser
47 Transpiling Options
48 Remote Transpiling
49 Module Systems
50 Behind the Scenes with Webpack
51 Webpack with ES Modules
52 One Small Change
53 Options for Bundling
54 So Which Approach
55 A Webpack Replacement

Implementing In-Browser Bundling
56 A Demo App
57 Project Setup
58 Basic Form Elements
59 Understanding ESBuild
60 Initializing ESBuild
61 Using Refs for Arbitrary Values
62 Transpiling Works!
63 Troubles with Bundling in the Browser
64 Issues with NPM
65 Solution with Unpkg
66 Demo ESBuild Plugin
67 ESBuild Can Bundle!
68 Deep Dive on Bundling
69 Filters and Namespaces
70 Adding a Tiny Test Package

Dynamic Fetching and Loading of NPM Modules
71 Dynamically Fetching Modules
72 Generating the Unpkg URL
73 Issues with Multi-File Packages
74 Solving Relative Paths
75 Using the URL Constructor
76 Failing Nested Requires
77 Resolving Nested Paths
78 It Works!
79 Defines During Bundling
80 Bonus! Package Versioning

Caching For Big Performance Gains
81 Crazy Numbers of Requests
82 Implementing a Caching Layer
83 Caching with Key-Value Pairs
84 Fixing a TypeScript Error
85 Bundling User Input
86 Breaking Up Resolve Logic With Filters
87 Refactoring to Multiple Plugins
88 Loading CSS Files
89 Configuring the Correct Loader
90 Small Shortcoming with ESBuild
91 Tricking ESBuild’s CSS Handling
92 Escaping CSS Snippets
93 Separate Load Filters
94 Extracting Common Caching Logic
95 A Better Way of Loading WASM

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

Displaying a Code Editor In a React App
118 Issues with Eager Bundling
119 Quick Revert
120 Open Source Editor Options
121 Displaying an Editor
122 Configuring the Editor
123 Crazy Monaco Editor Type Defs
124 A Few More Options
125 Setting the Initial Value
126 Handling Editor Change Events
127 Adding a Type Definition
128 Adding Prettier to Our Editor
129 Automatic Code Formatting
130 Adding a CSS Library
131 Floating the Format Button
132 Fixing Syntax Highlighting
133 CSS For Syntax Highlighting

How to Extract Reusable Components
134 Refactoring Out a Preview Component
135 Extracting Bundling Logic
136 Fixing a Few Warnings
137 Multiple Editors and Preview Windows

Draggable Resizing Components
138 Adding Resizable Panes
139 Setting Up React-Resizable
140 Setting a Resize Handle
141 Resizer CSS
142 Adding a Bunch of CSS
143 Expanding the Resizer Horizontally
144 Expanding the Code Editor
145 Fixing the Resize Issue
146 Constraining Vertical Resizes
147 Resizing Horizontally
148 Strategies for Prop Definitions
149 Applying Horizontal Resize Props
150 Getting Preview to Expand
151 A Small Workaround
152 Updating the After Selector
153 An Oddity Around the Resizer
154 On Resize Events
155 Updating Resizer Props
156 Improving Resize Performance
157 Why Width Jumps
158 Synchronizing Width State
159 Quick Dependency Array Fix
160 Adding Debouncing Logic
161 Clearing the Timeout
162 Adding an Execution Timeout

Techniques for Error Handling in React Apps
163 Error Handling
164 Extracting Reusable Error Handling Logic
165 Handling Async Errors
166 Capturing Bundling Errors
167 Printing the Captured Error

Creating a Markdown Editor in a React App
168 Plan for the Text Cell
169 A Few Issues with the Markdown Editor
170 Toggling the Markdown Editor Mode
171 Conditional Toggling
172 Why the Broken Cursor
173 Solving Class Name Conflicts
174 Fixing the Divider Height
175 Restyling the Resizer Bar
176 Additional Markdown Styling
177 Applying the Dark Theme
178 Adding State to the Editor
179 Last Touch of Styling

Design Patterns for Redux with Typescript
180 Redux Design
181 Initial Scaffolding
182 Action Interface Definitions
183 Defining What a Cell Is
184 Cells Reducer Setup
185 Adding a Few Reducer Cases
186 Creating and Exporting the Store
187 React to Redux Connection
188 Action Creator Return Type Annotations
189 Easy Action Creator Implementations
190 Handling Cyclical Imports
191 Defining Direction
192 Update Cell Logic

Simplify State Updates with Immer
193 Simple Updates with Immer
194 Removing a Cell
195 Swapping Cell Placement
196 Inserting New Cells
197 Small Gotcha with Immer
198 Manual Testing of a Redux Store

Binding React with Redux
199 Back to React
200 Creating a Typed Selector
201 Selecting an Ordered List
202 Rendering the List of Cells
203 Cell Type Rendering
204 Reminder on the Action Creator Helper
205 Extracting Local State
206 Extracting State from Text Cell
207 The Action Bar Component
208 Adding Icon Buttons
209 Applying Custom CSS
210 Last Touch of Styling
211 Adding New Cells
212 Displaying Add Cell
213 Resolving the Key Warning
214 Styling Add Cell
215 A Touch More Styling
216 Forcing Add Cell Visibility
217 Understanding CSS Transition Curves
218 Adding Vertical Spacing
219 Why is Add Cell Weird
220 Refactoring the Redux Side
221 Three Possible Solutions
222 Refactoring the React Side

Connecting Bundles in Redux
223 Should There Be a Bundles Reducer
224 Here’s the Plan
225 Defining Bundling Action Types
226 Initial Reducer Implementation
227 Finishing Up the Reducer
228 Adding the Action Creator
229 React Wire Up
230 Adjusting the Reducer State
231 Solving a Small Warning with useMemo
232 Adding Eager Bundling
233 Getting an Initial Bundle
234 Showing a Loading Message
235 Styling the Progress Bar
236 Can We Estimate Bundle Duration
237 Fading In the Progress Bar
238 Fixing the Background

Adding a ‘Cumulative Code Execution’ Feature
239 Referencing Code from Previous Cells
240 Method of Implementation
241 Calculating Cumulative Code
242 Executing the Cumulative Code
243 Adding a Show Function
244 Showing Complex Values
245 Showing a JSX Element
246 Import Name Collisions
247 Avoiding Naming Collisions
248 Showing a React Component
249 Selective Calls to Show
250 Implementing a Show Function No-Op
251 Extracting a Hook
252 A Touch of CSS
253 Fixing Edge Snaps

The Path – Lerna
254 The Path Moving Forward
255 Planning Local Architecture
256 An Easy Solution
257 What’s the App Look Like in the Future
258 Package Based Development
259 Introducing Lerna
260 Disclaimer on Lerna
261 Lerna Setup
262 Adding Modules with Lerna
263 Linking Packages
264 Adding TypeScript Support
265 Adding TypeScript to the CLI
266 Finishing TS Support
267 Parallel Start Scripts

CLI
268 Reading Command Line Arguments
269 Using Commander to Build a CLI
270 Specifying Command Line Options
271 Communication from the CLI to the API
272 What’s that Directory Argument
273 Calculating File Paths

Local API
274 The Local API
275 Adding Dependencies and Running Express
276 Error Handling Where
277 Wrapping Express Listen with a Promise
278 Error Handling Solution
279 Accessing the React App
280 Connecting the Proxy
281 Building a Production Bundle
282 Understanding Package Links
283 What’s the Path
284 Which Method Do We Use
285 Determining Our Execution Environment
286 A Quick Test
287 Creating the Cells Router
288 Writing Cells to a File
289 Reading File Contents
290 Default Cell Values
291 Adding a JSON Parser

Fetching Cells
292 Adding Fetch Cell Logic to Redux
293 The Fetch Cells Action Creator
294 Handling Fetch Cell Types
295 Saving a List of Cells
296 When to Call Fetch
297 Saving a List of Cells
298 Adding a Persist Middleware
299 Detecting When to Save
300 Debouncing Save Logic

Publishing
301 The Path to NPM Publishing
302 Bootstrapping the Project
303 A Touch More Setup
304 Getting Ready to Publish
305 Configuring the CLI
306 Publishing to NPM
307 NPM Organizations
308 Declaring Scoped Packages
309 Refactoring Package Names
310 Auditing Dev Dependencies
311 Adding Build Scripts
312 The Case for Bundling
313 Running ESBuild
314 Creating a Repository
315 Publishing with Lerna
316 Does it Work
317 Next Steps

Appendix TypeScript
318 Quick Note
319 TypeScript Overview
320 Environment Setup
321 A First App
322 Executing TypeScript Code
323 One Quick Change
324 Catching Errors with TypeScript
325 Catching More Errors!
326 Course Overview
327 Types
328 More on Types
329 Examples of Types
330 Where Do We Use Types
331 Type Annotations and Inference
332 Annotations with Variables
333 Object Literal Annotations
334 Annotations Around Functions
335 Understanding Inference
336 The Any Type
337 Fixing the Any Type
338 Delayed Initialization
339 When Inference Doesn’t Work
340 More on Annotations Around Functions
341 Inference Around Functions
342 Annotations for Anonymous Functions
343 Void and Never
344 Destructuring with Annotations
345 Annotations Around Objects
346 Arrays in TypeScript
347 Why Typed Arrays
348 Multiple Types in Arrays
349 When to Use Typed Arrays
350 Tuples in TypeScript
351 Tuples in Action
352 Why Tuples
353 Interfaces
354 Long Type Annotations
355 Fixing Annotations with Interfaces
356 Syntax Around Interfaces
357 Functions In Interfaces
358 Code Reuse with Interfaces
359 General Plan with Interfaces
360 Classes
361 Basic Inheritance
362 Class Method Modifiers
363 Fields in Classes
364 Fields with Inheritance
365 Where to Use Classes
366 App Overview
367 Parcel in Action
368 Project Structure
369 Generating Random Data
370 Type Definition Files
371 Using Type Definition Files
372 Export Statements in TypeScript
373 Defining a Company
374 Adding Google Maps Support
375 Google Maps Integration with TypeScript
376 Exploring Type Definition Files
377 Hiding Functionality
378 Why Use Private Modifiers Here’s Why
379 Adding Markers
380 Duplicate Code
381 One Possible Solution
382 Restricting Access with Interfaces
383 Implicit Type Checks
384 Showing Popup Windows
385 Updating Interface Definitions
386 Optional Implements Clauses
387 App Wrapup