Udemy

Platform

English

Language

Web Development

Category

React and Typescript: Build a Portfolio Project

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

4.81 (836 reviews)

8249

Students

29.5 hours

Content

Mar 2021

Last Update
$94.99
Regular Price


What you will 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


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 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.


Screenshots

React and Typescript: Build a Portfolio Project
React and Typescript: Build a Portfolio Project
React and Typescript: Build a Portfolio Project
React and Typescript: Build a Portfolio Project

Content

React with Typescript

How to Get Help

Be Sure to Watch this Video!

Generating TypeScript-Enabled Projects

File Extensions and Starting Up React

Types Around Props and State

Changes with TypeScript

The Big Difference with Props

Explicit Component Type Annotations

Annotations with Children

State with TypeScript

Type Inference with State

Quick Finish to the Example

More on State

Type Unions in State

Types Around Events and Refs

Inline Event Handlers

Typing Standalone Event Handlers

Handling Drag Events Too!

TypeScript with Class Components

Applying Types to Refs

More on Refs

Typescript with Redux

App Overview

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

Adding Action Creators

Adding Request Logic

Applying Typings to Dispatch

Setting Up Exports

Wiring Up to React

Oops... Initial State!

Reminder on Event Types

Calling an Action Creator

Binding Action Creators

Selecting State

Awkward Typings Around React-Redux

Creating a Typed Selector

Consuming Store State

Quick Wrapup

The Big App - Here's What We're Building!

App Overview

Three Big Challenges

Code Transpiling in the Browser

Transpiling Options

Remote Transpiling

Module Systems

Behind the Scenes with Webpack

Webpack with ES Modules

One Small Change

Options for Bundling

So Which Approach?

A Webpack Replacement

Implementing In-Browser Bundling

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

ESBuild Can Bundle!

Deep Dive on Bundling

Filters and Namespaces

Adding a Tiny Test Package

Dynamic Fetching and Loading of NPM Modules

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

Caching For Big Performance Gains

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

Safely Handling Untrusted Code Execution

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

Displaying a Code Editor In a React App

Issues with Eager Bundling

Quick Revert

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

Adding Prettier to Our Editor

Automatic Code Formatting

Adding a CSS Library

Floating the Format Button

Fixing Syntax Highlighting

CSS For Syntax Highlighting

How to Extract Reusable Components

Refactoring Out a Preview Component

Extracting Bundling Logic

Fixing a Few Warnings

Multiple Editors and Preview Windows

Draggable Resizing Components

Adding Resizable Panes

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

Quick Dependency Array Fix

Adding Debouncing Logic

Clearing the Timeout

Adding an Execution Timeout

Techniques for Error Handling in React Apps

Error Handling

Extracting Reusable Error Handling Logic

Handling Async Errors

Capturing Bundling Errors

Printing the Captured Error

Creating a Markdown Editor in a React App

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

Design Patterns for Redux with Typescript

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

Simplify State Updates with Immer

Simple Updates with Immer

Removing a Cell

Swapping Cell Placement

Inserting New Cells

Small Gotcha with Immer

Manual Testing of a Redux Store

Binding React with Redux

Back to React

Creating a Typed Selector

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

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

Appendix: TypeScript

Quick Note

TypeScript Overview

Environment Setup

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

App Overview

Parcel in Action

Project Structure

Generating Random Data

Type Definition Files

Using Type Definition Files

Export Statements in TypeScript

Defining a Company

Adding Google Maps Support

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



Reviews

D
Doug21 February 2021

Great course and very challenging project! It was my first introduction to Typescript and I look forward to implementing it on my projects. I learned a lot. Stephen is a great teacher. I have taken a few of his courses, and they are very detailed, showing the 'why' and the 'how' of what you are doing for a deep understanding. Highly recommended.

J
Jonathan8 February 2021

one of the better & all inclusive courses I've taken. It's allways a blast with Stephen, you know he's bound to put in those extra miles on the course. and who knows ? you might be at a level to appreciate the stuff !

G
Gabor6 February 2021

The content is amazing and the instructor really goes the extra mile explaining all the tools involved.

A
Alan4 February 2021

The explanations are quite clear and pretty easy to follow through. It's not over bloated like other tutorials with too many videos and complex explanations, more direct to the point stuff. I also like how the course explains typescript and hooks. The narrator has an understanding demeanor, very clear speaking, communication which is a definite plus for me and a must on any tutorial. He's not too easy going and not too robotic like other tutorials like if they are reading the stuff off a book. Has a pretty good balanced narrative. The code is clear, easy to read, well separated components, easy to understand. I would recommend.

D
Dawid4 February 2021

WAY too many not-react not-redux not-typescript material. I mean, it's cool and all, but not a purpouse of this i guess

B
Bruce30 January 2021

Great course! Great example and good practice using Typescript with React. Well done Stephen and thank you for your real world insight and application

H
Hoang27 January 2021

Great course with great contents that I would definitely recommend to anyone who wants to quickly learn how to use TypeScript, React and Redux all together.

S
Shameek26 January 2021

the course is very good. the redux part is amazing. however, its a bit too specific. it solves some very specific challenges. courses should have a bit more broad topics, like how to use apollo, gatsby, etc..

Y
Yogesh23 January 2021

Sir it is the amazing course , I wanted the same . How you know what student wants. A great fan of you sir. Expecting a same for a backend application. Now I edited the review , after seeing the course The application we are going to built is very complex , the things are explained by sir , I think it is so tough that I can not understand so I am seeing it lazily , but the explanation power of sir is so good that I anyhow get what is happening. Thankyou sir.

C
Christopher19 January 2021

Stephen's courses just keep getting better; He was born to teach software engineering. His teaching style is brilliant. He doesn't just jump to the solution, he guides you step by step, revealing how you actually go from an idea, through design, proof of concept, then iterating through the development process and finishing with a beautifully elegant solution. He will take you through all the errors and mistakes you WILL make on your own in development, shows you how to diagnose, debug and fix each one so you do not experience it yourself in real life. He will take optional deep dives and completely geeks out on things and you walk away feeling smarter, like it was you that made the revelation. I don't know what else to say. If you're on Udemy and do not buy ALL of Stephen's courses, you are wasting your time and money.

K
Kamil18 January 2021

Stephen Grider has consistently delivered the ultimate learning experience in each of his courses I have subscribed to ,and is rightfully regarded as one of the best instructors at Udemy. For me , personally, he is the "go-to" course creator when modern JS ecosystem is involved. This course presents somewhat unorthodox project per Udemy standards - thankfully ! We get the opportunity to craft a live code book/editor ,similar to CODEPEN, for instance. Every code line is clear ,every architectural decision is eloquently discussed and explained , and is accompanied by insightful visual diagrams to enhance the overall learning experience. Precision and coherency of those architectural discussions reveals in-depth knowledge and first-hand experience that Stephen has accumulated in the industry over the years. To that end, a set of unique challenges awaits in this course , which presents an incredible value for money.

S
ShreeHari15 January 2021

Stephan Sir way of teaching lectures using flow diagrams and writing every line of code show how dedicated he his while teaching. One of the best instructors here on udemy.

D
Dylan14 January 2021

I am only a few videos in, but I can already give this 5 stars after buying many other of Stephen's courses. As someone who currently works as a React developer and did not go to school for computer science, Stephen's courses were instrumental in getting me to where I am today.

M
MIlan14 January 2021

A really badass project, definitely one of the best courses if not the best out there that combines typescript with react. Not just that, besides ts and react you get to learn to tink and deal with complex projects This course is worth much more than 10dollars

S
Sorabh14 January 2021

Well I was looking for a course which do have react with typescript, but there isn’t much content available on internet. This course definitely serves the purpose of learning react in typescript. So far I have completed just one section, but seems like a good one. Will update this review later after completing this course.



Coupons

StatusDateDiscount
Expired1/15/202195% OFF
Expired1/20/202195% OFF
Expired3/2/202194% OFF

3749464

Udemy ID

1/4/2021

Course created date

1/14/2021

Course Indexed date
Bot
Course Submitted by