No history yet

Setting Up Vite

Setting Up with Vite

To build a modern React application, you need a build tool. Think of it as the engine and assembly line for your code. It takes your developer-friendly files (like JSX) and transforms them into optimized HTML, CSS, and JavaScript that browsers can understand efficiently. For a long time, create-react-app was the standard choice, but newer tools are much faster and simpler.

We'll be using Vite. It’s a build tool that focuses on speed and a great developer experience. It starts a development server almost instantly and updates your application in a flash whenever you save a file.

Vite is a modern build tool known for its speed and simplicity.

Let's create a new project. Open your terminal and run the following command. This kicks off an interactive setup process.

npm create vite@latest

Vite will then ask you a few questions:

  1. Project name: Give your project a name, like react-redux-app.
  2. Select a framework: Use the arrow keys to choose React.
  3. Select a variant: Choose JavaScript.

Once the process is complete, the terminal will give you the final commands needed to get started.

# Move into your new project directory
cd react-redux-app

# Install the necessary packages
npm install

# Start the development server
npm run dev

After running npm run dev, you'll see a local URL in your terminal (usually http://localhost:5173). Open it in your browser, and you should see the default React starter page.

Understanding the Project Structure

Vite creates a clean and straightforward project structure. Let's look at the most important files and folders.

Here's a breakdown:

  • package.json: This file manages your project's dependencies (like React) and defines helpful scripts, such as npm run dev.
  • src/: This is where you'll spend most of your time. It contains all your application's source code.
  • src/main.jsx: The entry point for your app. It finds the <div> with the id root in index.html and injects your React application into it.
  • src/App.jsx: This is your main, top-level React component. It's the first component that gets rendered.
  • index.html: The main HTML file. Unlike older setups, Vite keeps this file in the project's root directory, not hidden in a public folder. During the build process, Vite automatically injects your JavaScript into this file.

With the project set up and running, you have a solid foundation to start building on.