Welcome to the React with Vite tutorial! In this lesson, we'll dive into building modern React applications using Vite, a lightning-fast and feature-rich development environment. By the end of this tutorial, you'll have a solid understanding of how to set up, develop, and deploy React projects with Vite.
Vite is a next-generation development tool for modern web projects, including React applications. Unlike traditional build tools like Webpack, Vite offers faster cold starts, smaller bundle sizes, and a more streamlined configuration.
Vite is designed to make the development process faster and more efficient. Its built-in features, such as Hot Module Replacement (HMR) and optimized build process, help developers save time and reduce frustration when working on projects.
To get started with Vite, you'll first need to install Node.js on your computer. Once that's done, you can create a new React project using Vite by running the following command in your terminal:
npm create vite-react-app my-react-app
Replace my-react-app with the name you'd like for your project.
Once the project is created, navigate into the project folder and take a look at the default project structure:
my-react-app/
āāā node_modules/
āāā src/
ā āāā App.js
ā āāā App.css
ā āāā App.test.js
ā āāā index.js
ā āāā index.css
ā āāā logo.svg
āāā vite.config.js
āāā package.json
We'll be working primarily in the src folder, where your React components will live.
To create a new React component, create a new JavaScript file inside the src folder. For example, let's create a Counter component:
src/Counter.js
Add the following code to the file:
// src/Counter.js
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
</div>
);
}
export default Counter;In this code, we're importing React and the useState hook, creating a Counter component, and defining a simple state variable count and a increment function to update the state.
To use the Counter component in your app, import it in the App.js file and add it to the App component's JSX:
// src/App.js
import React from 'react';
import Counter from './Counter';
function App() {
return (
<div className="App">
<Counter />
</div>
);
}
export default App;Now, when you run the project using npm run dev, you should see the Counter component in action!
Vite supports CSS out of the box. To style your components, create a .css file next to your JavaScript file and import it at the top of your JavaScript file:
src/Counter.css
// src/Counter.js
import React from 'react';
import styles from './Counter.css';
// ...
export default Counter;Add some styles to the Counter.css file:
/* src/Counter.css */
.App {
text-align: center;
}
button {
padding: 10px;
font-size: 16px;
}With these simple steps, you've styled your first React component using Vite.
Once you've built and tested your application, you may want to deploy it to the web. Vite offers easy deployment options, including GitHub Pages. Follow the deployment guide in the Vite documentation to learn more.
What is the purpose of the `useState` hook in the given code?