Contents
React - Setup a React Application with Vite
In March 2023, the React team launched a new documentation website that removed all references to Create React App. This Lesson will teach you how to set up a React application using Vite.
Learning Objectives
- Learn what Vite is
- Learn how to set up a React app with Vite
- Learn the purpose of the Vite scripts in the package.json file
Intended Audience
- Anyone who wants to learn about React
Prerequisites
- A basic understanding of JavaScript
React: Setup a React Application With Vite. And I am Farish Kashefinejad, the Software Development Domain Lead at Cloud Academy. If you have any questions or concerns about the content in this video, feel free to reach out to support@cloudacademy.com. In March 2023, the React documentation website had a major revision, and as part of this revision, all mentions of Create React App was removed. The last major release for Create React App was in April 2022, so there was signs that this project would be deprecated or no longer supported. So, what's the recommended way to start working with React?
The documentation now pushes using third-party React frameworks such as Next.js, and this leads to a problem. What if you want to use React without the extra overhead that these frameworks may have? The documentation now recommends using a bundler such as Vite or Parcel. So, what is Vite? Vite is a frontend development tool with the goal of building frontend applications faster.
Vite eliminates the need for a bundler during development by using native ES modules through the browser. This allows for fast build times and instant updates. Vite offers a web development server with built-in hot module replacement. Transitioning to the Cloud Academy Lab environment. To begin, in the terminal, I will type npm create vite@latest. Now there's a message asking to install the latest version of Create Vite. I will hit 'Y' for yes. Next, I'm asked to name the project. The default is viteproject and I will change this to calabs.
There's a drop-down menu now and I will select React. After selecting React, a new drop-down appears and I have four options; TypeScript or JavaScript with the choice of SWC. SWC stands for Speedy Web Compiler, which is written in Rust. The SWC website states that it compiles JavaScript about 20 times faster than Babel. But because this is a relatively new feature, I will just select JavaScript. The terminal now has a message to cd into the calabs directory, run npm install, then execute the npm run dev command. I will clear the terminal and cd into the calabs directory, then run npm install.
Before running the development server, I want to do a quick tour of two files. The first file is v.config.js. This is the configuration file that allows for the customization of options when it comes to processing the React code, folder outputs, development server port, file pathing, plugin usage, and much more. Now going to the second file which is the package.json file, I want to focus on three script commands. The dev script just executes the Vite command and this turns on hot module replacement while running a local web server. Hot module replacement is used to run your code changes in real-time through the development server without having to reload your browser. Next is the build script.
This script will get your application ready for production by optimizing the code so it's ready to be deployed. This script will place your code in a distribution folder. Next is the preview script. This script will use the files generated by the build script to run a local web server to preview how your application will behave in production. Now in the terminal, I'm going to execute the dev command by typing npm run dev and in the browser is the local development server for this React application. And that's it, thanks for watching at Cloud Academy.
Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.
Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.
Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.
Farish is an avid powerlifter, sushi lover, and occasional Funko collector.