My First Two Days with ReactJS: A Beginner's Look at Project Structure, Components, and Vite.

Hello , i am Umesh. In this article i am talking about how i am start learning ReactJs. Why ReactJs. How to setup project.

Now days react is so popular library of Javascript also some said it a framwork. React is so popular for SPA(Single Page Application) it was developed by facebook (Meta). React is come with two paradigm first one is react-dom and second is react-native .React-dom is used for web development and native is for mobile development. Both are based on core react library. So many company are using it world wide this techonology like meta, google, instagram, airbnb, dropbox. Also the demand in market of react so every one is aware about it.

This article documents the foundational concepts I explored during my first two days. We'll be looking at.

Setting up a new React project.

Before create react project first check node is install in our system because for creating react project we need JS for run js we need an environment where can our JS run so we need to install node. For installing node visit this site - https://nodejs.org/en/download

After download you can check via this command

node -v

Create ReactJs project in classic style -

npx create-react-app 01basic_react

npx - here npx is node package executer if we use here npm so it install in our system but npx use and execute here not install in our system.

create-react-app - create-react-app is a kind of utility service or software for helping to create project.

01basic_react - it is our project name . now we can not use character in uppercase it does not allow.

after successfully setup we can run our project using it -

npm run start

and we can see it on our browser successfully running.

Now we create it using vite , for creating with vite we use this command -

npm create vite@latest 01vite_reactapp
cd 01vite_reactapp
npm install

for run this we use it -

npm run dev

now with both style project are successfully but what the difference? the difference is here.

Difference with vite and traditional method

Vite vs create-react-app →

first see there folder structure by created create-react-app vs Vite

The main things we noticed here index.html file is created in inside public folder in
create-react-app 01basic_react
but with vite 01vite_react index.html file is outside of the the public directory.

In src directory file extension with .js with create-react-app but
in vite extension is .jsx

The main difference we see in package.json file
this via create-react-app

{
  "name": "01basic_react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/dom": "^10.4.1",
    "@testing-library/jest-dom": "^6.7.0",
    "@testing-library/react": "^16.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

and this via vite

{
  "name": "01vite_react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.1.1",
    "react-dom": "^19.1.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.33.0",
    "@types/react": "^19.1.10",
    "@types/react-dom": "^19.1.7",
    "@vitejs/plugin-react": "^5.0.0",
    "eslint": "^9.33.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.3.0",
    "vite": "^7.1.2"
  }
}

The difference is you can easily see number of dependencies is less in vite as compare to create-react-app .So the reason is most of the time developer use vite because it come with lite bundeler similer to parcel. When create your project also that time traditional way it take more time because it downaload all the resources while we no need of it. So using vite we not waste of memory only needed we download.

Now compare index.html file

This by created create-react-app

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.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>

and this was created by vite.
index.js ,it is the main file we all do activity and creativity do with it .
Means react is a SPA we just chaning element and ui and urls so user can feel it moving on a different pages but in reality react he was only on index.html file we can achived it by dom manipulations.

We do all activity in reactjs javascript but how it load in index.html file or how can it find where it have and we do changed. So in first one create-react-app → <div id="root"></div> we target it by getElementById
same with vite but additionaly it direct add script one step above <script type="module" src="/src/main.jsx"></script> we can see here.

How react can find and manipulating dom?

this is index.js file it is main entry point of our application it was created by create-react-app

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

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

this is main.jsx file similer also this entry point and it by vite

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

import App from './App.jsx'

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

So we are here to target the element in index.html by there ‘root‘ we can also changed it also we can both file name can be changed.All manuplation was done by these files.
App is called here component we can render it in index.html via root element.
We can add multiple component .

Some Naming Convention

In vite we must use component or file name extension is .jsx
In both componenet use capitalize naming for function name

function App() {
  return (
   <h1>Hello World | By Umesh</h1>
  )
}

export default App

Here App name is capitalize.

What was your biggest takeaway when you first started learning React? Let me know in the comments below!