DEV Community

Cover image for Create a ReactJs Vite project manually without create-react-app
Sabareeswaran Chandrasekar
Sabareeswaran Chandrasekar

Posted on

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

#react #javascript #vite #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" }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Step:06 Create vite.config.js

import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()] });
Enter fullscreen mode Exit fullscreen mode

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 />);
Enter fullscreen mode Exit fullscreen mode

Step:08 Create src/App.jsx

import React from 'react'; function App() { return <h1>Hello from Vite + React!</h1>; } export default App;
Enter fullscreen mode Exit fullscreen mode

Step:09 Run
terminal: npm run dev

That's it. Enjoy!!

Top comments (0)