Lab 1: Creating a New Project
Objectives
- Create a new React project (app) that uses TypeScript
- Open the new project
- Review the default project structure
Steps
Create a new React project
As part of the course setup, you created a
code
directory for the course (somewhere on your computer that you would easily remember). If you haven't created acode
directory yet please do that now.Open a
command prompt
(Windows) orterminal
(Mac).Change the current directory to your
code
directory.Run ONE of the following commands:
If you want to use
npm
as your package manager.npm
npm create vite@latest projectpilot -- --template react-ts
npm 7+, extra double-dash is needed:
If you want to use
Yarn
as your package manager.Yarn
yarn create vite projectpilot --template react-ts
yarn create
is available in Yarn 0.25+
Open the new project
Change the current directory (
cd
) to the directory you created in the last step.cd projectpilot
Install dependencies
npm install
Open the
projectpilot
directory in your editor of choice.If you are using
Visual Studio Code
you can run the following command in your terminal:code .
...
code
refers to Visual Studio Code and.
means current directoryMacOS
if
code
is not in yourterminal
(Mac)PATH
you will receive the message:command not found: code
- in
Visual Studio Code
chooseView>Command Palette> Shell Command: Install 'code' command in PATH
Windows
if
code
is not in yourcommand-prompt
(Windows)PATH
you will receive the message:command not found: code
- You will need to add
code
to the environment variable path manually or rerun the Visual Studio code installer and choose the option to addcode
to the path.
- in
Review the default project structure
Take a few minutes to go over the default project structure. Below are some files to look at:
package.json
/index.html
is the page templatesrc/main.tsx
is the JavaScript entry point