Setting up the project - React.js Tutorial

- [Instructor] We'll be using Vite, a build tool that focuses on speed and performance on modern web projects. It aims to do this by focusing on two major parts. One, a development server that provides a rich feature enhancement over native ES modules. Fast hot module replacement, HMR, pre-bundling, support for TypeScript, JSX and dynamic imports. And two, a build command that bundles your code with Rollup, pre-configured to output optimize static assets for your production. I have Visual Studio Code installed as my default IDE, but you can use whatever you want. I also have NodeJS installed as of recording of this video version 20.14.0 is recommended with npm version 10.2.4. Let's set up our application by writing in our terminal. Let's just open first or terminal, new terminal and then we'll write npm. So let's CD to the desktop, then CD to LinkedIn learning. Then we'll do npm create vite@latest. This will help us scaffold the latest version of Vite. We'll give our upper name. So the following packages need to be installed. Is it okay? Yes. After this we'll give our project a name. Let's call it testing in react with vitest. So which framework are we using? We'll be using React. We'll be using TypeScript and now we can see our application is already scaffold. And if we follow the instructions on our terminal shown here so we can just CD into our application. Let's just copy this, let's paste it. And now if we run npm install, all our application dependencies will be installed. Now in VS Code, let's navigate to this folder. Let's open the folder called Desktop, LinkedIn Learning, and let's open this file. Now if you do a simple npm install, all application dependencies will be installed. Now as we are waiting for that installation to complete, let's go ahead and create another bash. As the Vite dependencies are being installed, let's install our global modules. So in this application we are going to need a couple of things. So number one, let me just paste them and I'll explain as we go. So here on number one, our first install, we can see here we have vitest coverage v8, which is our unit test framework and our test runner. We'll install testing library React, which builds on top of dom testing library by adding APIs for working with React components. We'll add testing library just dom, which extends just with a set of custom matches it provides out of the box. We'll add ESLint to help us find problems in our code. It statically analyzes our code to quickly help us find problems. I'll show you how we'll initialize it. We'll install TypeScript ESLint parser which is an ESLint parser. I used to parse TypeScript code into ESLint compatible nodes. We'll install ESLint config Airbnb, which is a style guide I enjoy using. ESLint config Airbnb TypeScript for TypeScript support. Prettier, our code formatter. ESLint config prettier, which lets us use our favorite shareable config without letting its stylistic choices get in the way of using prettier. We'll also add the following plugins, TypeScript ESLint plugin, an ESLint plugin which provides Lint rules for TypeScript code bases. ESLint plugin import to bring sanity to our import and exports. We'll also add ES plugin jsx a11y to statically assess our accessibility issues. ESLint plugin prettier, which runs prettier as an ESLint rule and reports differences as individual ESLint issues. ESLint plugin React with React specific linting rules for ESLint. ESLint plugin React Hooks is a plugin with ESLint rules for React Hooks. ESLint plugin React Refresh will help us validate that our components can be safely updated with fast refresh. And lastly, JS dom, which is a library that pauses and interacts with assembled HTML just like our browser. Remember all these dependencies are needed when creating an application where you collaborate with teammates and create various rules that work best for your team, helping you and your team focus on doing the important stuff. Let's go ahead and press enter and let that install and I'll see you in the next one.