Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

Quick React Project Setup with Vite: Step-by-Step Turkish Guide

🧭 What Will You Learn in This Guide?​

In this guide, you'll learn step by step how to build a React app, add custom components and styles, and create a production-optimized package using the much faster Vite tool instead of Create React App.

💻 Prerequisites​

Before you start, make sure you have the following tools installed:

  • Node.js: v12.2.0 or later
  • Yarn Package Manager: v1.22.0 or later
  • Basics: Familiarity with HTML, CSS, modern JavaScript and React concepts
  • Optional: Your mobile device must be connected to the same Wi-Fi to preview on local network

1️⃣ Creating a New Vite Project​

To create a new React project, open terminal and run this command:

yarn create vite

This command downloads the Vite tool and prepares the local development environment.

In the project creation steps:


Proje adı: genixnode-vite-proje

Framework: React

Dil tipi: JavaScript

Then go into the directory and install the dependencies:

cd genixnode-vite-proje
yarn

2️⃣ Starting the Development Server​

Start the project in development mode:


yarn run dev

This command launches your React application at http://localhost:5173/.

You can see the first React page by opening it in the browser.

3️⃣ Preview the App on Mobile (Optional)​

By default, the Vite application is open only to the local computer. To test from a phone on the same network, stop the current server:

CTRL + C

Then run it again with this command:


yarn run dev --host

An address similar to Network: http://192.168.1.xx:5173 will appear in the output. You can see the application by typing this address into your phone browser.

4️⃣ Removing Default Codes​

For a clean start, delete the default files:


rm src/App.css src/App.jsx src/index.css
rm -r src/assets

Then open the src/main.jsx file and delete this line:


import "./index.css";

5️⃣ Adding New Components, Images and CSS​

➤ Creating a new component​

mkdir src/components
nano src/components/Welcome.jsx
jsx


export default function Welcome() {
  return (
    <div className="wrapper">
      <h1>GenixNode’a Hoş Geldiniz</h1>
      <p>Bu, Vite ile oluşturulmuş bir React uygulamasıdır!</p>
    </div>
  );
}
➤ Adding images​

mkdir src/img
wget https://html.sammy-codes.com/images/small-profile.jpeg -O src/img/genixnode-maskot.jpeg

Include the image in the component:


import Maskot from "../img/genixnode-maskot.jpeg";
➤ Adding a style file​

mkdir src/css
nano src/css/ana-stil.css
css

body {
  display: grid;
  place-items: center;
  background-color: #b4a7d6;
  font-family: Arial, sans-serif;
}

.wrapper {
  background-color: #fff9e6;
  padding: 20px;
  border-radius: 10px;
}

h1 {
  color: #8873be;
}

Include CSS in the component:


import "../css/ana-stil.css";

6️⃣ Title Change​

Open the index.html file and edit the <title> tag:

<title>GenixNode’nun Hızlı React Uygulaması</title>

This change updates the app title that appears in the browser tab.

7️⃣ Getting Build​

Finally create the optimized files:


yarn run build

This command extracts minified resources to the dist/ folder.

You can publish this folder by uploading it to your GenixNode server or a web server such as Nginx or Apache.

❓ Frequently Asked Questions (FAQ)​

Why is 1st Gear faster than CRA?

Thanks to native ES modules, Vite only reloads changed files. CRA, on the other hand, recompiles the entire project.

  1. How do .env files work?

Vite recognizes variables with the prefix VITE_. It is accessed in the code as import.meta.env.VITE_API_URL.

  1. Is there TypeScript support?

Yes. You can select “TypeScript” or “TypeScript + SWC” during installation.

  1. How to publish dist folder?

This folder is entirely static files. You can easily host it on GenixNode or any CDN.

  1. What should I do if there is an error after build?

Shut down the server with CTRL+C, then restart it with the yarn run dev command.

🚀 Result​

Congratulations! 🎉 Now you have learned how to set up your React project from scratch with Vite, add components, connect styles and get an optimized build. For a fast development experience, you can immediately build and test your own application on the GenixNode Platform.