React and Typescript: Build a Portfolio Project

React and Typescript: Build a Portfolio Project, available at $109.99, has an average rating of 4.48, with 422 lectures, based on 4738 reviews, and has 42072 subscribers.

You will learn about 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 This course is ideal for individuals who are Engineers looking to expand their project portfolio It is particularly useful for Engineers looking to expand their project portfolio.

Enroll now: React and Typescript: Build a Portfolio Project

Summary

Title: React and Typescript: Build a Portfolio Project

Price: $109.99

Average Rating: 4.48

Number of Lectures: 422

Number of Published Lectures: 415

Number of Curriculum Items: 422

Number of Published Curriculum Objects: 415

Original Price: $199.99

Quality Status: approved

Status: Live

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

Who Should Attend

Engineers looking to expand their project portfolio

Target Audiences

Engineers looking to expand their project portfolio

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.

Course Curriculum

Chapter 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

Chapter 2: Types Around Props and State

Lecture 1: Changes with TypeScript

Lecture 2: The Big Difference with Props

Lecture 3: Explicit Component Type Annotations

Lecture 4: Property 'children' does not exist

Lecture 5: Annotations with Children

Lecture 6: State with TypeScript

Lecture 7: Type Inference with State

Lecture 8: Quick Finish to the Example

Lecture 9: More on State

Lecture 10: Type Unions in State

Chapter 3: Types Around Events and Refs

Lecture 1: Inline Event Handlers

Lecture 2: Typing Standalone Event Handlers

Lecture 3: Handling Drag Events Too!

Lecture 4: TypeScript with Class Components

Lecture 5: Applying Types to Refs

Lecture 6: More on Refs

Chapter 4: Typescript with Redux

Lecture 1: App Overview

Lecture 2: Updated Install Command and Versions for React 18

Lecture 3: Project Setup

Lecture 4: Redux Store Design

Lecture 5: Reducer Setup

Lecture 6: Annotating the Return Type

Lecture 7: Typing an Action

Lecture 8: Separate Interfaces for Actions

Lecture 9: Applying Action Interfaces

Lecture 10: Adding an Action Type Enum

Lecture 11: A Better Way to Organize Code

Lecture 12: Small Update for Try / Catch Block

Lecture 13: Adding Action Creators

Lecture 14: Adding Request Logic

Lecture 15: Applying Typings to Dispatch

Lecture 16: createStore Strikethrough in Code Editor

Lecture 17: Setting Up Exports

Lecture 18: Wiring Up to React

Lecture 19: Oops… Initial State!

Lecture 20: Reminder on Event Types

Lecture 21: TypeScript Error When Dispatching Action

Lecture 22: Calling an Action Creator

Lecture 23: Binding Action Creators

Lecture 24: Selecting State

Lecture 25: Awkward Typings Around React-Redux

Lecture 26: Creating a Typed Selector

Lecture 27: Consuming Store State

Lecture 28: Quick Wrapup

Chapter 5: The Big App – Here's What We're Building!

Lecture 1: App Overview

Lecture 2: Three Big Challenges

Chapter 6: Code Transpiling in the Browser

Lecture 1: Transpiling Options

Lecture 2: Remote Transpiling

Lecture 3: Module Systems

Lecture 4: Updated Install Command and Versions for Webpack

Lecture 5: Behind the Scenes with Webpack

Lecture 6: Webpack with ES Modules

Lecture 7: One Small Change

Lecture 8: Options for Bundling

Lecture 9: So Which Approach?

Lecture 10: A Webpack Replacement

Chapter 7: Implementing In-Browser Bundling

Lecture 1: A Demo App

Lecture 2: Project Setup

Lecture 3: Basic Form Elements

Lecture 4: Understanding ESBuild

Lecture 5: Initializing ESBuild

Lecture 6: Using Refs for Arbitrary Values

Lecture 7: Transpiling Works!

Lecture 8: Troubles with Bundling in the Browser

Lecture 9: Issues with NPM

Lecture 10: Solution with Unpkg

Lecture 11: Demo ESBuild Plugin

Lecture 12: ESBuild Can Bundle!

Lecture 13: Deep Dive on Bundling

Lecture 14: Filters and Namespaces

Lecture 15: Adding a Tiny Test Package

Chapter 8: Dynamic Fetching and Loading of NPM Modules

Lecture 1: Dynamically Fetching Modules

Lecture 2: Generating the Unpkg URL

Lecture 3: Issues with Multi-File Packages

Lecture 4: Solving Relative Paths

Lecture 5: Using the URL Constructor

Lecture 6: Failing Nested Requires

Lecture 7: Resolving Nested Paths

Lecture 8: It Works!

Lecture 9: Defines During Bundling

Lecture 10: Bonus! Package Versioning

Chapter 9: Caching For Big Performance Gains

Lecture 1: Crazy Numbers of Requests

Lecture 2: Implementing a Caching Layer

Lecture 3: Caching with Key-Value Pairs

Instructors

Stephen Grider
Engineering Architect

Rating Distribution

1 stars: 38 votes
2 stars: 48 votes
3 stars: 181 votes
4 stars: 1019 votes
5 stars: 3452 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu