Create a ReactJs Vite project manually without create-react-app

#react #vite #javascript #beginners

Step:01 Create project folder
terminal: mkdir React19
terminal: cd React19

Step:02 Initialize package.json
terminal: npm init -y

Step:03 Install required Dependencies
terminal: npm install react react-dom
terminal: npm install --save-dev vite @vitejs/plugin-react

Step:04 Update Scripts in package.json

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

Step:05 Create index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Vite React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Step:06 Create vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()]
});

Step:07 Create src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

Step:08 Create src/App.jsx

import React from 'react';

function App() {
  return <h1>Hello from Vite + React!</h1>;
}

export default App;

Step:09 Run
terminal: npm run dev

That's it. Enjoy!!

DEV Community

Create a ReactJs Vite project manually without create-react-app

Top comments (0)