React Mastery / Introduction to React

Folder Structure & JSX Syntax

📁 Folder Structure (React + Vite)

When you create a new React app (especially with Vite), this is what your folder typically looks like:

🔧 Basic Folder Layout:

1️⃣ node_modules/

  • Purpose: Contains all the packages your project depends on.

  • Do Not Touch Directly — This is managed by npm or yarn.

2️⃣ public/

  • Main File: index.html

  • What it does:

    • This is the base HTML file.

    • React mounts your app into the <div id="root"></div> inside index.html.

  • Can include favicon, images, etc., accessible via /public/filename.

3️⃣ src/ (Main Working Area)

index.js or main.jsx

  • Purpose: Entry point of the app.

  • What it contains:

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

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

App.js

  • Purpose: Main component that holds your entire app layout.

  • What it contains:

    • Other components are imported here.

    • Routes (if using React Router).

    function App() {
  return (
    <div>
      <Navbar />
      <Home />
      <Footer />
    </div>
  );
}

export default App;

components/

  • Purpose: Reusable UI pieces (buttons, navbars, cards, etc.)

  • Examples:

    components
├── Navbar.js
├── Footer.js
└── Button.js

pages/

  • Purpose: Full pages/views like Home, About, Contact.

  • These usually contain multiple components.

  • Example:

    pages/
├── Home.js
├── About.js
└── Contact.js

assets/

  • Purpose: Store images, videos, fonts, or other static resources used in the app.

  • Example:

    assets/
├── logo.png
└── bg-video.mp4

App.css or styles/

  • Purpose: Styling the App.js or shared styles.

  • You can create a full styles/ folder if you want to keep modular CSS files.

4️⃣ package.json

  • Purpose: Describes the project and its dependencies.

  • Shows which packages are installed, and which scripts are available (npm start, npm run build, etc.).

5️⃣ .gitignore

  • Purpose: Lists files/folders to ignore in Git (e.g., node_modules/, .env)

6️⃣ README.md

  • Purpose: A markdown file to describe your project, installation steps, usage instructions, etc.

7️⃣ vite.config.js / webpack.config.js

  • If you're using Vite or Webpack, these files define the bundling, plugins, alias paths, etc.

✨ JSX Syntax (JavaScript XML)

JSX allows you to write HTML-like code inside JavaScript — it's what makes React easy and intuitive.

✅ Example:

function Welcome() {
  return <h1>Hello, React!</h1>;
}

🧠 JSX Basics:

  • JSX looks like HTML but is not exactly HTML.

  • You must return only one parent element.

    return (
  <div>
    <h1>Hello</h1>
    <p>Welcome to React</p>
  </div>
);

  • Use className instead of class (JSX uses JavaScript conventions).

  • All tags must be properly closed:

    ✅ <img src="logo.png" />

    ❌ <img src="logo.png">

  • You can embed JavaScript using curly braces:

    const name = "xyz";
return <h2>Welcome, {name}!</h2>;