Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

How to Set Up a React App

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Installing and Using Vite

6:38 with Laura Coronel

Vite is a lightning-fast build tool for modern web applications. We explore what Vite is then walk you through the process of creating a new React project with Vite. You'll learn how to set up your project, install dependencies, and understand the file structure of a new Vite project.

Update

Since version 4.3, Vite now includes ESLint by default. ESLint is an open-source JavaScript linter that can help identify and report errors, potential problems, and code style issues in your code. When you create a new React app using Vite, you'll notice a new .eslintrc.cjs file, which is the configuration file for ESLint.

If you are following our Learn React Track or Full Stack Techdegree, we recommend adding an additional rule, so that you won't encounter prop-type errors before we cover them in React Components:

'react/prop-types': 0,

Additionally, Vite version 4.3 also added a new script called lint to the package.json file that helps you quickly and easily check your project for any warnings that ESLint has identified. By running this command, any warnings ESLint has identified will be logged to the console.

Resources

Treehouse Courses and Workshops

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    In this video, we're going to explore Vite, a lightning fast build tool for 0:00
    modern web development, and show you how to use it to set up a React app. 0:05
    Whether you're starting out with React or 0:11
    looking to build a client-side only React app, Vite is the perfect tool for you. 0:13
    Its simplicity and speed make it a developer friendly option with 0:18
    features like an instant development server, hot module replacement, and 0:23
    lightning fast builds. 0:28
    To create a new React project using Vite, open your terminal or 0:31
    console and run npm create vite@latest. 0:36
    It will first prompt us for a project name. 0:42
    I'll use the default project name Vite project by pressing Enter. 0:45
    Vite can be used with many different frameworks. 0:51
    Since we want to build a React app, 0:55
    we'll use the arrow keys to navigate down to react and press Enter to submit. 0:57
    Finally, we're prompted to select a variant from the options of JavaScript, 1:04
    TypeScript, JavaScript with SWC, or TypeScript with SWC. 1:10
    The difference between the JavaScript and 1:16
    JavaScript with SWC variants is the compiler used to compile the code. 1:19
    The former uses Babel while the latter uses SWC. 1:24
    For this video, I'll select JavaScript. 1:29
    Instead of having to answer these prompts every time you 1:33
    want to create a new React app, you can use Vite's React template. 1:37
    By using Vite's React template, 1:42
    you can set up a new project with just one command in your terminal. 1:44
    Simply start by entering npm create-vite@latest and 1:49
    then specify your project name, such as my-react-app. 1:54
    Then to use the React template, 2:00
    add -- space -- template react to the command. 2:03
    With this approach, you can quickly and easily create a new client side 2:09
    React app without the hassle of manually configuring your project each time. 2:13
    Vite suggests that we navigate to our new vite-project folder, 2:20
    install the dependencies and run npm run dev to start the development server. 2:25
    Let's do that now I'll navigate inside the vite-project folder 2:31
    Install the dependencies, And 2:39
    once this is done I'll start the development server with npm run dev. 2:44
    To see our app in the browser, we can either copy over the URL, or 2:51
    you can hover over the link in Visual Studio code and 2:55
    follow the instructions to open your app in the browser. 2:58
    For me, it says the hold down Command and click. 3:03
    In the browser you can see the template Vite provides to help you get started. 3:07
    The app lets us know that to get started building out the app, 3:13
    edit the app.jsx file in the source directory, and 3:18
    save to test the HMR or hot module replacement. 3:22
    Vite uses HMR to allow developers to see the changes they make in 3:27
    their code instantly without having to rebuild the entire app. 3:32
    Now open the project in your text editor. 3:38
    Let's explore the project structure and files. 3:42
    Vite generates only the files you need to start your React project. 3:46
    Most of the files you're going to be working with are located in the source 3:50
    folder. 3:55
    For example, App.JSX is currently the main wrapper component of the app. 3:56
    It's importing App.CSS, which contains style specific to the app component. 4:03
    And the logo svg's you see at the top of the page. 4:09
    Main.jsx is the entry point for our React components. 4:13
    It imports index.css, the app's base style sheet. 4:19
    And it imports and renders the app component into the DOM via the root 4:25
    div which is located in the index.html file inside our project folder. 4:31
    This is the entry point for our app. 4:38
    Vite.config.js is the configuration file for Vite, 4:41
    where we can configure various settings and plugins for our app. 4:46
    For example, we can change the default port number of our development server. 4:53
    To do this, we'll add a server property and pass it an object. 4:58
    Inside the object, we'll add the property port and set it to 3000. 5:04
    Once we save, we can see in the terminal that the port was updated. 5:10
    The package.json file contains important information about 5:15
    the project including its dependencies, scripts and other meta data. 5:20
    By default you are given three scripts dev, build, and preview. 5:26
    Earlier in this video we ran the dev script when 5:32
    we typed npm run dev in the terminal. 5:37
    This started the Vite development server. 5:41
    To stop the development server press Ctrl+C. 5:44
    Running npm run build in the terminal builds our app for 5:49
    production and creates a dist folder containing the optimize and 5:53
    minimized JavaScript files, ready for deployment. 5:58
    Running npm run preview in the terminal will boot up a local static web 6:04
    server that serves the files from dist at local host 4173. 6:10
    It's an easy way to check if the production looks okay in your local 6:15
    environment. 6:19
    And that's it. 6:21
    We successfully installed and used Vite to set up a React app and 6:22
    explore the file structure of a Vite created React project. 6:27
    We hope this video has been helpful and we encourage you to give Vite a try for 6:32
    your next React project. 6:36

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up