CreateApp - himanshimahankal/React-Study GitHub Wiki

Pre-requisites

  1. Download Node.js
  2. pnpm Installation

Install package

npm init -y
pnpm install react react-dom
pnpm install -D vite

Edit ./package.json

...
-  "main": "index.js",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+	"dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
  },
...
-  "type": "commonjs",
+  "type": "module",
...

Entry files

Edit: ./index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/appLogo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Edit: ./src/main.jsx

import React, { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import Home from './pages/home.jsx' /* import Page */
import './index.css' /* import global style here */


createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Home /> {/* use Page here */}
  </StrictMode>,
)

Edit: ./src/index.css

* {
    background-color: black;
    color:white;
}

Create Pages

Edit: ./src/pages/home.jsx

import React from 'react'


export default function Home() {
  return (
      <h1 align="center">Welcome to React App</h1>
  )
}

Start Development server

pnpm run dev

Now visit http://localhost:5173 in your favorite browser.

⚠️ **GitHub.com Fallback** ⚠️