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.
Types Around Props and State
Types Around Events and Refs
Typescript with Redux
The Big App - Here's What We're Building!
-
24App Overview
-
25Updated Install Command and Versions for React 18
-
26Project Setup
-
27Redux Store Design
-
28Reducer Setup
-
29Annotating the Return Type
-
30Typing an Action
-
31Separate Interfaces for Actions
-
32Applying Action Interfaces
-
33Adding an Action Type Enum
-
34A Better Way to Organize Code
-
35Small Update for Try / Catch Block
-
36Adding Action Creators
-
37Adding Request Logic
-
38Applying Typings to Dispatch
-
39createStore Strikethrough in Code Editor
-
40Setting Up Exports
-
41Wiring Up to React
-
42Oops... Initial State!
-
43Reminder on Event Types
-
44TypeScript Error When Dispatching Action
-
45Calling an Action Creator
-
46Binding Action Creators
-
47Selecting State
-
48Awkward Typings Around React-Redux
-
49Creating a Typed Selector
-
50Consuming Store State
-
51Quick Wrapup
Code Transpiling in the Browser
Implementing In-Browser Bundling
Dynamic Fetching and Loading of NPM Modules
-
63A Demo App
-
64Project Setup
-
65Basic Form Elements
-
66Understanding ESBuild
-
67Initializing ESBuild
-
68Using Refs for Arbitrary Values
-
69Transpiling Works!
-
70Troubles with Bundling in the Browser
-
71Issues with NPM
-
72Solution with Unpkg
-
73Demo ESBuild Plugin
-
74ESBuild Can Bundle!
-
75Deep Dive on Bundling
-
76Filters and Namespaces
-
77Adding a Tiny Test Package