Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Meditation Life Purpose Coaching Emotional Intelligence
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Cleaning
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-01-14 06:25:23
30-Day Money-Back Guarantee

This course includes:

  • 28 hours on-demand video
  • 7 articles
  • 196 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development React

React and Typescript: Build a Portfolio Project

Expand your portfolio of projects by building a complex app with the latest web technologies.
Highest Rated
Rating: 4.9 out of 54.9 (230 ratings)
4,071 students
Created by Stephen Grider
Last updated 1/2021
English
English [Auto]
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

Course content

25 sections • 373 lectures • 28h 2m total length

  • Preview00:55
  • Join Our Community!
    00:07
  • Be Sure to Watch this Video!
    01:38
  • Generating TypeScript-Enabled Projects
    01:34
  • File Extensions and Starting Up React
    04:34

  • Preview02:33
  • Preview03:53
  • Explicit Component Type Annotations
    05:50
  • Annotations with Children
    05:47
  • State with TypeScript
    04:41
  • Type Inference with State
    05:41
  • Quick Finish to the Example
    00:55
  • More on State
    04:19
  • Type Unions in State
    05:41

  • Inline Event Handlers
    03:18
  • Typing Standalone Event Handlers
    02:39
  • Handling Drag Events Too!
    03:44
  • TypeScript with Class Components
    09:03
  • Applying Types to Refs
    05:35
  • More on Refs
    04:29

  • App Overview
    02:04
  • Project Setup
    01:49
  • Redux Store Design
    08:53
  • Reducer Setup
    08:16
  • Annotating the Return Type
    01:26
  • Typing an Action
    01:54
  • Separate Interfaces for Actions
    04:21
  • Applying Action Interfaces
    04:22
  • Adding an Action Type Enum
    05:41
  • A Better Way to Organize Code
    03:36
  • Adding Action Creators
    04:27
  • Adding Request Logic
    03:14
  • Applying Typings to Dispatch
    02:46
  • Setting Up Exports
    04:19
  • Wiring Up to React
    03:24
  • Oops... Initial State!
    01:03
  • Reminder on Event Types
    02:59
  • Calling an Action Creator
    03:05
  • Binding Action Creators
    04:21
  • Selecting State
    04:16
  • Awkward Typings Around React-Redux
    04:46
  • Creating a Typed Selector
    04:00
  • Consuming Store State
    03:02
  • Quick Wrapup
    03:24

  • Preview06:15
  • Three Big Challenges
    06:02

  • Transpiling Options
    06:08
  • Remote Transpiling
    02:57
  • Module Systems
    04:30
  • Behind the Scenes with Webpack
    07:09
  • Webpack with ES Modules
    02:40
  • One Small Change
    02:41
  • Options for Bundling
    06:49
  • So Which Approach?
    04:01
  • A Webpack Replacement
    02:48

  • A Demo App
    01:06
  • Project Setup
    02:54
  • Basic Form Elements
    04:54
  • Understanding ESBuild
    06:07
  • Initializing ESBuild
    03:40
  • Using Refs for Arbitrary Values
    03:10
  • Transpiling Works!
    04:42
  • Troubles with Bundling in the Browser
    05:56
  • Issues with NPM
    04:55
  • Solution with Unpkg
    04:32
  • Demo ESBuild Plugin
    00:21
  • ESBuild Can Bundle!
    05:21
  • Deep Dive on Bundling
    10:49
  • Filters and Namespaces
    03:00
  • Adding a Tiny Test Package
    02:30

  • Dynamically Fetching Modules
    08:23
  • Generating the Unpkg URL
    01:59
  • Issues with Multi-File Packages
    04:19
  • Solving Relative Paths
    06:42
  • Using the URL Constructor
    03:57
  • Failing Nested Requires
    10:40
  • Resolving Nested Paths
    07:49
  • It Works!
    05:46
  • Defines During Bundling
    05:58
  • Bonus! Package Versioning
    02:46

  • Crazy Numbers of Requests
    03:10
  • Implementing a Caching Layer
    03:55
  • Caching with Key-Value Pairs
    06:30
  • Fixing a TypeScript Error
    06:04
  • Bundling User Input
    04:35
  • Breaking Up Resolve Logic With Filters
    06:25
  • Refactoring to Multiple Plugins
    05:44
  • Loading CSS Files
    01:50
  • Configuring the Correct Loader
    04:16
  • Small Shortcoming with ESBuild
    02:39
  • Tricking ESBuild's CSS Handling
    05:58
  • Escaping CSS Snippets
    05:10
  • Separate Load Filters
    05:34
  • Extracting Common Caching Logic
    04:18
  • A Better Way of Loading WASM
    03:25

  • Executing User Code
    06:07
  • Big Issues with Code Execution
    06:46
  • How Do Others Solve This?
    01:43
  • Displaying IFrames
    02:53
  • Different Execution Context
    02:49
  • Crossing Context
    03:18
  • Sandboxing an IFrame
    03:40
  • Breaking Access with Different Domains
    04:11
  • How Do IFrames Fix Anything?
    03:24
  • The Full Flow - How CodePen and CodeSandbox Work
    04:36
  • Do We Need Separation?
    04:29
  • Middle Ground Approach
    07:20
  • IFrames with SrcDocs
    07:49
  • Execution Using SrcDoc
    04:25
  • Running Unescaped Code
    09:45
  • Indirect Communication Between Frames
    05:39
  • Passing Code to the IFrame
    07:03
  • It Works!
    02:59
  • Highlighting Errors
    06:28
  • Issues with Repeat Execution
    03:08
  • Resetting the IFrame Contents
    03:49
  • Warning Fixup
    00:51

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

Who this course is for:

  • Engineers looking to expand their project portfolio

Instructor

Stephen Grider
Engineering Architect
Stephen Grider
  • 4.7 Instructor Rating
  • 279,289 Reviews
  • 734,801 Students
  • 29 Courses

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area.  With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers.  Invest in yourself by learning from Stephen's published courses.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.