🔄 Git Repository updates
- Switched to Bun Toolkit
- Updated all dependencies
Introduction
Have you ever needed to prepare ASAP(as usual) a quick demonstration to be shown or just wanted to develop an idea that hit you out of the blue?
In this tutorial, we will be constructing a React application utilizing Vite as our primary development server. It would be the most minimal setup to create quick Proof Of Concepts ASAP.
Vite is a next-generation front-end build tool and development server, created by Evan You, the creator of Vue.js, that offers a fast and efficient development experience, is built on top of esbuild, a JavaScript bundler written in Go, which bundles dependencies 10 to 100 times faster than JavaScript-based bundlers. It doesn't require bundling the entire app or transpiling modules and code. In Vite, transpiling occurs on-demand, resulting in a significantly faster process compared to Create React App (CRA).
Our application will feature a simple yet interactive counter that can be both incremented and decremented through the use of dedicated buttons.
Prerequisites
Before we get started, make sure you have Node.js and npm installed on your computer. You can download them from nodejs.org/en/download.
Initializing a new project
First, we need to initialize a new npm package. Open your terminal and navigate to the directory where you want to create your project. Then run the following command:
npm init -y
This will create a new package.json file in your project directory with default values.
Installing dependencies
Next, we need to install Vite and the necessary React dependencies. Run the following command in your terminal:
npm install vite react react-dom
This will install Vite as a development dependency and React and React DOM as regular dependencies.
Setting up the development server
Now that we have our dependencies installed, we can create a new directory called src in the project root and create the following files inside it:
// App.jsx
import React from 'react';
import Counter from './Counter';
function App() {
return (
<div>
<h1>My React App</h1>
<Counter />
</div>
);
}
export default App;
// Counter.jsx
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function handleIncrement() {
setCount(count + 1);
}
function handleDecrement() {
setCount(count - 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
}
export default Counter;
// main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Finally, create a new file called index.html in the project root with the following contents:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My new POC</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
This file will be used by Vite to serve our React app.
Starting the development server
To start the development server, run the following command in your terminal:
vite
This will start the development server on http://127.0.0.1:5173/. You should be able to see your React app by navigating to that URL in your browser.
Additionally, you can specify the desired port for serving your app by using the --host flag.
vite --host 3003
Final thoughts
I have encountered numerous situations where I don't want to create an app using CRA or Next just to experiment with a proof of concept, an example, or for demonstration purposes.
With this streamlined, minimal setup, I've successfully achieved my goals, and I wanna you to achieve them too.
Bonus
I've also created a template that you can use for this purpose, which you can find at this link.
Also, if you find it useful Star this repository on GitHub!
Thank you for reading! Any constructive feedback is greatly appreciated!