Creating a React Application with Vite

Introduction

React is a powerful JavaScript library for building modern front-end applications for the web. It is created and maintained by Meta (Facebook), and promotes a component-based architecture that "reacts" to changes in data, state, and user input.

Prerequisites

• An new Github repository with only a README file (basic new repo process).
• A default Codespaces instance running on the repository above.
• A Netlify account.

Codespaces and Vite

1. Create a new Codespaces instance on your newly-created Github repository.
2. Launch your Codespaces instance in the browser or via dev containers on your local VS Code instance.

Create a new React application using Vite

1. When Codespaces is initialized, enter the following command into your Terminal prompt:

npm create vite@latest . -- --template react

Using the dot operator above, we're telling the command that we want the output to go into the current directory. Because our current directory already has a README file, Vite is going to ask us what we want to do:

2. Use your arrow keys to select "Ignore files and continue" and press Enter/Return. Vite will continue with the setup of the project.
3. At this point, Vite should install the Node modules and start the server automatically (and you should be able to visit the dev site). If not, continue on to #4 and run npm install manually.
4. Install the required Node libraries (this will create the node_modules directory in your project):

npm install

5. Finally, start the Vite server and check that your React application is up and running:

npm run dev

If everything goes right, your Codespaces project should look something like this:

Deploying to Netlify

There are no special steps for deploying a Vite/React site to Netlify. Create a new site from your Github repo (as we've been doing all semester) and Netlify will automatically recognize it as a React application.