File Structure in React

Deep dive into the basic react file structure

• node_modules: stores all React dependencies and packages, including core React modules (e.g., react, react-dom) and their associated dependencies (e.g., webpack, babel, ESLint), essential for building and running the React application.

• package-lock.json: it is automatically generated by npm when packages are installed, ensuring a stable version of dependencies is locked.

• gitignore: a text file that instructs Git on which files or folders to ignore within a project.

• public folder:

  • The crucial file is index.html. You only need to understand two main things:

    1. <noscript> tag: which is used to provide alternative content or instructions that will be displayed when JavaScript is disabled or not supported in the user's browser.

    2. An empty div with an id is "root"

• src folder:

  Most of the time we work on the src folder. Let's break down the files one by one.

  1. index.js file:

     • react: is a core fundamental library (which takes all the references)

     • react-dom: is the implementation for the web.

     • ReactDOM: creates a virtual DOM.

     • createRoot: expect to get an element from the .html file.

     • render: run/execute.

     • <React.StrictMode>: is a wrapper component in React that enables additional development checks and warnings to catch potential issues early during development, including identifying unsafe lifecycles, deprecated APIs, unexpected side effects, and legacy context usage.

     • <App />: is a custom tag. (JSX)

  2. app.js: is a function that returns HTML code. Export the function.

  3. react-scripts: is a package that loads a javascript file inside index.html.

React File Structure in Vite

• script file: is directly loaded inside the index.html without installing a react-script package.

Creating another component in Vite

• Rules:

  • The file convention should be .jsx.

  • The component name should be Capitalized.

  • Use fragments (denoted as <> </>) to wrap the JSX elements.

Good Practice: The file name should also be Capitalized.

Creating another component in basic react

• Rules:

  • File convention should be .jsx if it returns HTML code, while .js if there is only js code. But both conventions are working.

  • The component name should be Capitalized.

Components are simply a javascript function.

Example of creating component

File Name: Chai.jsx

function Chai() {
  const username = "Mark"

  return (
    <h2>Chai is ready | {username}</h2>
  )
}

export default Chai

File Name: App.jsx

import Chai from './Chai';

function App() {
  return (
    <>
      <h1>Chai aur React with Vite | Mark </h1>
      <Chai />
    </>
  )
}

export default App

File Name: main.jsx

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

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

Add-on:

Crtl + Shift + p: to reload page.

Watch ReactJS series by Hitesh Choudhary