Setting Up Your Environment page

Learn how to set up a React environment using Vite.

How to follow this course

This course will walk you through building an application with React. Each page of the guide is based on building a new feature, and may have multiple “objectives” to complete. Each objective will be explained and include the requirements and any setup steps needed. Most objectives will also include unit tests to update to verify when you have implemented the solution correctly.

The ✏️ icon will be used to indicate when commands need to be run or when files need to be created or updated.

If you have any issues or suggestions as you move through this training, we’d love for you to submit a GitHub issue for it! 💖

Overview

In this section, we will:

  • Learn about Node.js
  • Recommend tools to use in React development
  • Generate a new React application using Vite
  • Set up testing
  • Verify that the new application can be served to the browser and tested

Objective 1: Install prerequisites

Install a code editor

There are a variety of code editors that support React, the most popular is Microsoft’s Visual Studio Code. VS Code is available for most operating systems and has extensive support for React and JSX including: code completion, code highlighting, and linting. It’s also used by cloud environments like CodeSandbox and StackBlitz, making it easy to switch among different runtime environments.

The following VS Code extensions will help you format your code consistently: ESLint, Prettier - Code formatter

Install Node.js and npm

Our solution requires the Node.js JavaScript runtime environment. Node.js and its included package manager npm will be used to do a variety of tasks including: installing required packages, running the development server, executing tests, and building the application for deployment.

Setup 1

This course requires Node.js version 18 or 20 (we suggest using the long-term support release of version 20).

Download the Node.js installer for your operating system. Any installation of Node.js will also include npm.

Alternatively, you can install Node.js via package manager.

During the installation process you may be prompted to make selections or install prerequisites, use the default selections and proceed with the installation.

The installation process can take 10 to 15 minutes to complete.

Verify 1

✏️ Run the following command in a terminal to verify Node.js is installed correctly.

🔦 If you encounter an error running node --version you may need to restart for node to be completely installed.

node --version

The output of the command will be the current version of Node.js, we expect it to start with either "v18" or "v20".

✏️ Run the following command in a terminal to verify npm is installed correctly:

npm --version

The output of the command will be the current version of npm, we expect it to start with either "9" or "10".

Objective 2: Generate the “Place My Order” application

Create a new React application named “Place My Order” that supports TypeScript and can be served and tested.

Use Vite to generate a new React application

For this course we will use Vite to manage our React project. Vite is a Node.js application that simplifies the creation, development, testing, and building of web application frontends. We will use a Vite "template" to specify that we are creating a React project with support for TypeScript.

After generating the React app the following folders and files will be included in the "place-my-order" folder:

├── public/
├── src/
│   ├── assets/
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   ├── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts

/public contains static assets which will be served up as part of your website. You can include stylesheets, images and other static files.

/src is where all your React components should be stored alongside any logic for your app. This will already be seeded with a small sample app.

index.html will render React by default.

main.tsx is the entry point of the React application. This is where our application is initialized and mounted in the DOM.

App.tsx the contents displayed as the application’s root / web page.

Setup 2

✏️ Open a terminal and move to a location where you want to generate your React application, then execute the following command:

npm create vite@5 place-my-order -- --template react-ts

The command runs npm with vite to create a new application named "place-my-order". Vite will use its "react-ts" template to generate the React application with TypeScript support.

Now cd into the new directory created for the application and install the required packages:

cd place-my-order
npm install

Verify 2

Once you have completed the previous step you will be able to start the development server and see the default welcome page.

The development server is a useful tool. When it starts, it transpiles the TypeScript and JSX code into JavaScript and bundles it for delivery to the browser. It also watches for changes to the source code, and when they occur, it repeats the process, then causes the browser to reload with those changes.

✏️ Run the command:

npm run dev

The server will output the "Local" URL for the dev server, copy and paste it into a browser. The browser will display a welcome page with "Vite + React."

Having issues with your local setup? See the solution in StackBlitz or CodeSandbox.

Objective 3: Add testing infrastructure

Testing code with React Testing Library

We will create unit tests for our application using the React Testing Library. The unit tests for components will be focused on verifying that a component creates the correct DOM output based on the state the component is provided. We also need to create tests for any React custom Hooks we create to ensure they provide the expected results.

Setup 3

Before we can create or execute any tests, run the following command to install the packages related to the React Testing Library:

✏️ Run:

npm install --save-dev @testing-library/jest-dom@6 @testing-library/react@14 @testing-library/user-event@14 jsdom@24 vitest@1

✏️ Update vite.config.ts to be:

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    css: false,
    environment: 'jsdom',
    globals: true,
  },
})

Once the packages are installed and the config file is updated, open the "package.json" file (in the project’s root) and add the "test" line to the scripts object; this simplifies running tests using Vite.

✏️ Update package.json to be:

{
  "name": "place-my-order",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "test": "vitest",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.1",
    "@testing-library/user-event": "^14.5.2",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "jsdom": "^24.0.0",
    "typescript": "^5.2.2",
    "vite": "^5.0.8",
    "vitest": "^1.2.2"
  }
}

Verify 3

After completing the previous steps you will be able to run unit tests. Execute the command:

npm run test

and "No test files found" will be written to the console.

Having issues with your local setup? See the solution in StackBlitz or CodeSandbox.

Objective 4: Update our first page

Now, let’s updated our generated app to include our own header:

A web browser displaying the root page of the newly created application served by the dev server. The page displays a single level 1 heading with the text 'Place My Order App: Coming Soon!'
Screen capture of the completed exercise.

Verify 4

✏️ Create src/App.test.tsx and update it to be:

import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';

import App from './App';

describe('App component', () => {
  it('renders correctly and contains the expected text', () => {
    render(<App />);
    expect(screen.getByText('Place My Order App: Coming Soon!')).toBeInTheDocument();
  });
});

Exercise 4

This exercise will finish the objective of creating a new React application with TypeScript support that can be served and tested. To complete the exercise make code changes to accomplish the following:

  • The root / web page shall display a single heading element with the text "Place My Order App: Coming Soon!"

Solution 4

Click to see the solution

  1. In your code editor open the file src/App.tsx
  2. Delete all the import lines except import "./App.css";.
  3. Delete the line const [count, setCount] = useState(0)
  4. Replace the value of the return statement to be a single <h1> element
  5. The source code of App.tsx should now look like the example below.

✏️ Update src/App.tsx to be:

import './App.css'

function App() {
  return (
    <>
      <h1>Place My Order App: Coming Soon!</h1>
    </>
  )
}

export default App

Having issues with your local setup? See the solution in StackBlitz or CodeSandbox.

Next steps

Next, let’s learn about JSX to understand React’s templating language.