Shopping Cart - Setup - Base Project with Create React App | React & TypeScript
In this video, we set up the base project for our Shopping Cart Application using Create React App with the TypeScript template. This is the second video in the series, where we’ll lay the foundation for our app by setting up the environment and preparing it for development.
Here’s what we’ll cover in this 10-minute video:
Important VS Code Plugins: I’ll introduce some essential tools for a smoother development experience, including Spellchecker, React Snippets, Prettier, and ESLint.
Project Cleanup: We’ll remove unnecessary CSS files as we plan to use Bootstrap for all our styling.
Dependency Installation: I’ll show you how to install Bootstrap, React-Bootstrap, Bootstrap Icons, and clsx as dependencies.
App Update: We’ll integrate Bootstrap by adding the container component from React-Bootstrap and importing bootstrap.min.css into the project.
First Run: We’ll run the application and see our initial output with a title rendered inside the App component.
By the end of this video, you’ll have your project environment set up and ready to start building out the core features of the shopping cart app.
In the next video, we’ll dive into setting up the folder structure and begin defining the components that we’ll use throughout the application.
Stay tuned for more!
0:00 Introduction
0:22 Setup using create-react-app
1:36 Important Extensions to Install in VSCode
3:40 Project Cleanup
5:20 Fixing build warning
6:42 Installing bootstrap, react-bootstrap and other deps
8:00 Include bootstrap in index
9:37 Application Wrap-up - What's next