React and Typescript: Build a Portfolio Project from Udemy

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's inside

Learning objectives

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

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

Syllabus

React with Typescript

How to Get Help

Join Our Community!

Course Resources

Be Sure to Watch this Video!

Generating TypeScript-Enabled Projects

ReactDOM warning with React v18

File Extensions and Starting Up React

Types Around Props and State

Changes with TypeScript

The Big Difference with Props

Explicit Component Type Annotations

Property 'children' does not exist

Annotations with Children

State with TypeScript

Type Inference with State

Quick Finish to the Example

More on Refs

Typescript with Redux

App Overview

Updated Install Command and Versions for React 18

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

Small Update for Try / Catch Block

Adding Action Creators

Adding Request Logic

Applying Typings to Dispatch

createStore Strikethrough in Code Editor

Setting Up Exports

Wiring Up to React

Oops... Initial State!

Reminder on Event Types

TypeScript Error When Dispatching Action

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!

Three Big Challenges

Code Transpiling in the Browser

Transpiling Options

Remote Transpiling

Module Systems

Updated Install Command and Versions for Webpack

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

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

Demo ESBuild Plugin

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

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Developers with knowledge of React and Redux who want to apply their skills to advance their career

Teaches skills and knowledge uses current industry practices and tools

Delves into advanced techniques not covered in basic React training

Requires prior knowledge of React, Redux, and Typescript

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React and Typescript: Build a Portfolio Project with these activities:

Read about 'The Road Less Traveled' by M. Scott Peck

Show steps

Provides insights into personal growth and self-improvement, which can be beneficial for students navigating the challenges of learning a new programming language

View The Road Less Traveled, Timeless Edition: A New... on Amazon

Show steps

Read the book
Reflect on the key ideas and concepts
Apply the principles to your own life and learning journey

Organize your notes and materials

Show steps

Helps you stay organized and easily review key concepts throughout the course

Show steps

Gather all your notes, assignments, and materials for the course
Organize them into a logical structure
Create a system for easily referencing your materials

Follow Along with TypeScript Tutorial

Show steps

Supplement your React learning by exploring TypeScript tutorials to gain a deeper understanding of its syntax and features.

Show steps

Find an introductory TypeScript tutorial.
Follow along with the tutorial, practicing the concepts and syntax.
Apply what you've learned to your React project.

Six other activities

Expand to see all activities and additional details

Show all nine activities

Refresh React knowledge

Show steps

Helps you refresh your knowledge on React before delving into TypeScript and advanced concepts

Browse courses on React

Show steps

Review the official React documentation
Go through a quick React tutorial
Try building a simple React app from scratch

Practice Implementing React Components

Show steps

Practice applying the fundamentals of React component creation to strengthen your understanding and proficiency.

Browse courses on React Components

Show steps

Create a simple React component with state and props.
Build a more complex component hierarchy with nesting.
Implement lifecycle methods to manage component behavior.

Attend a React and Typescript Meetup

Show steps

Provides an opportunity to meet other professionals in the field and learn from their experiences

Browse courses on React

Show steps

Research and find a local React and Typescript Meetup
Attend the Meetup
Network with other attendees

Build a Personal Projects with React and Typescript

Show steps

Builds upon your React knowledge by applying it to a personal project, reinforcing your understanding

Browse courses on React

Show steps

Identify and choose a personal project idea
Create a project structure and set up React and Typescript
Develop the core features and functionality of the app
完善 the UI/UX of the app
Deploy and share the finished project

Practice React and Typescript coding problems

Show steps

Strengthens your problem-solving skills and reinforces your understanding of React and Typescript concepts

Browse courses on React

Show steps

Find a set of React and Typescript coding problems
Attempt to solve the problems on your own
Review your solutions and identify areas for improvement
Repeat the process to further enhance your skills

Contribute to an open-source React or Typescript project

Show steps

Provides hands-on experience working on real-world projects and contributing to the community

Browse courses on React

Show steps

Find an open-source React or Typescript project to contribute to
Learn about the project and its codebase
Identify an issue or feature to work on
Create a pull request with your changes
Collaborate with the project maintainers to get your pull request merged

Career center

Learners who complete React and Typescript: Build a Portfolio Project will develop knowledge and skills that may be useful to these careers:

React Developer

React Developers are developers who specialize in using the React JavaScript library to build user interfaces. They work closely with designers and other developers to implement the look, feel, and functionality of web applications. This course provides in-depth training on how to use React, which may be useful for landing a position as a React Developer.

See salaries and explore the career path for React Developer

Front-End Developer

Front End Developers build the user-facing interfaces of web applications. They implement designs provided by User Experience (UX) Designers. Front End Developers often work closely with their Back End Development counterparts who manage the servers and databases that store and manage data. Front End Developers typically need to be familiar with HTML, CSS, and JavaScript. This course teaches React and Typescript, two powerful tools used by Front End Developers. Learning how to use these tools, which are rising in popularity among developers, may help qualify you for an entry-level position as a Front End Developer.

See salaries and explore the career path for Front-End Developer

Full-Stack Developer

Full Stack Developers are responsible for both the front end and back end of web applications. They work with both the user interface and the server. This course provides training on React and Typescript, which are used by both Front End and Back End Developers. Taking this course may help you qualify for a position as a Full Stack Developer.

See salaries and explore the career path for Full-Stack Developer

Web Developer

Web Developers are responsible for the design and development of websites. Usually, this involves managing the user interface, application programming, and server configuration. Web Developers may work with both Front End and Back End Developers, though that is not always the case. To work as a Web Developer, a strong understanding of HTML, CSS, and JavaScript is crucial. This course focuses on React and Typescript, two important tools used by many Web Developers. Taking this course may help you to become a full-stack web developer who can work with both the front and back end of websites.

See salaries and explore the career path for Web Developer

Software Developer

Software Developers build and maintain computer programs. They work in a variety of industries, including finance, healthcare, and education. Software Developers with a background in React and Typescript may be highly sought after by employers.

See salaries and explore the career path for Software Developer

Back-End Developer

Back End Developers are responsible for the server-side of web applications. They work with databases and other technologies to store and manage data. This course focuses on React and Typescript, which are used by Front End Developers. While not directly applicable to a Back End Developer role, taking this course may help you build a foundation of knowledge that could be useful for working with Front End Developers.

See salaries and explore the career path for Back-End Developer

UX Designer

UX Designers are responsible for the user experience of web applications. They work with Front End Developers to ensure that applications are easy to use and navigate. This course focuses on React and Typescript, which are used by Front End Developers. While not directly applicable to a UX Designer role, taking this course may help you build a foundation of knowledge that could be useful for working with Front End Developers.

See salaries and explore the career path for UX Designer

Product Manager

Product Managers are responsible for the planning and development of products. They work with a variety of stakeholders, including engineers, designers, and marketers. This course focuses on React and Typescript, which are not directly used by Product Managers. However, this course may provide you with skills that could be used in conjunction with the skills required for a role as a Product Manager.

See salaries and explore the career path for Product Manager

Data Scientist

Data Scientists use data to solve business problems. They work with a variety of technologies, including machine learning and artificial intelligence. This course focuses on React and Typescript, which are not directly used by Data Scientists. However, this course may provide you with skills that could be used in conjunction with the skills required for a role as a Data Scientist.

See salaries and explore the career path for Data Scientist

Machine Learning Engineer

Machine Learning Engineers build and maintain machine learning models. They work with a variety of technologies, including data science and artificial intelligence. This course focuses on React and Typescript, which are not directly used by Machine Learning Engineers. However, this course may provide you with skills that could be used in conjunction with the skills required for a role as a Machine Learning Engineer.

See salaries and explore the career path for Machine Learning Engineer

Business Analyst

Business Analysts use data to help businesses make better decisions. They work with a variety of stakeholders, including executives and managers. This course focuses on React and Typescript, which are not directly used by Business Analysts. However, this course may provide you with skills that could be used in conjunction with the skills required for a role as a Business Analyst.

See salaries and explore the career path for Business Analyst

Data Analyst

Data Analysts use data to solve business problems. They work with a variety of technologies, including statistics and data mining. This course focuses on React and Typescript, which are not directly used by Data Analysts. However, this course may provide you with skills that could be used in conjunction with the skills required for a role as a Data Analyst.

See salaries and explore the career path for Data Analyst

Project Manager

Project Managers are responsible for planning and executing projects. They work with a variety of stakeholders, including engineers, designers, and marketers. This course focuses on React and Typescript, which are not directly used by Project Managers. However, this course may provide you with skills that could be used in conjunction with the skills required for a role as a Project Manager.

See salaries and explore the career path for Project Manager

Artificial Intelligence Engineer

Artificial Intelligence Engineers build and maintain artificial intelligence systems. They work with a variety of technologies, including machine learning and data science. This course focuses on React and Typescript, which are not directly used by Artificial Intelligence Engineers. However, this course may provide you with skills that could be used in conjunction with the skills required for a role as an Artificial Intelligence Engineer.

See salaries and explore the career path for Artificial Intelligence Engineer

Technical Writer

Technical Writers create documentation for software and other technical products. They work with a variety of stakeholders, including engineers, designers, and marketers. This course may be of interest to Technical Writers who want to learn more about React and Typescript. However, it is important to note that React and Typescript are not commonly used by Technical Writers.

See salaries and explore the career path for Technical Writer