React Basics 2

What is JSX and its rule?

JSX is the abbreviation of JavaScript XML. XML is the short form of Extensible Markup Language

XML primary purpose is to store and transport data and it allows developer to use custom tags and also extremely strict -requires closing tags, case-sensitive

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX

Facebook Choose XML Syntax to create JSX for various reasons
XML Syntax is Predictable and Strict : Mandatory Closing Tags: HTML allows unclosed self-closing tags like <img> or <input>. XML requires every tag to be closed strictly (<img /> or <input />), which makes it incredibly simple for automated tools (like compiler preprocessors) to parse without guessing.

Strict Nesting Rules: XML trees map 1:1 onto compiler tree structures (Abstract Syntax Trees), making it highly reliable to translate the code directly into JavaScript function calls like React.createElement()

Rules of JSX

1.Return a single root element:
To return multiple elements from a component, wrap them with a single parent tag

<div>
  <h1>scientists</h1>
  <img
    src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
    alt=""
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

here div is used to wrap the combination of tags to return as a single value because function can only return single value

If you don’t want to add an extra <div> to your markup, you can write <>and </> instead

<> 
<div>
  <h1>scientists</h1>
  <img
    src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
    alt=""
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>
</>

This empty tag <>, </> is called a Fragment.
In React, a Fragment is a special wrapper component that lets you group multiple elements without adding an extra HTML element to the page

2.Close all the tags:

JSX requires tags to be explicitly closed: self-closing tags like <img>must become <img />, and wrapping tags like <li> oranges must be written as <li>oranges</li>

3.camelCase all most of the things:

JSX turns into JavaScript objects, and JavaScript has strict rules for naming properties. Standard HTML attributes are converted into camelCase naming conventions

Write this
return <div onClick={handleClick} tabIndex="0"></div>;
instead of this
return <div onclick={handleClick} tabindex="0"></div>;

Use className Instead of class, Because class is a reserved keyword in JavaScript for defining programming classes, you cannot use it as a layout attribute. Use className instead.

Write this
return <div className="container"></div>;
instead of this
return <div class="container"></div>;

Inline styling cannot be written as a plain string. It must be written as a JavaScript object inside curly braces

Write this
return <div style={{ color: 'red', fontSize: '16px' }}></div>;
instead of this
return <div style="color: red; font-size: 16px;"></div>;

Wrap JavaScript Expressions in Curly Braces
To read variables, run math operations, or execute logic inside your markup, you must wrap the JavaScript code in single curly braces {}.

const name = "Alex";
return <h1>Hello, {name}</h1>;

Explain React Folder Structure?

A React folder structure is the way files and folders are organized inside a React project so the application stays

• clean
• scalable
• maintainable
• easy to understand

node_modules

• Contains all installed npm packages.
• Automatically created when you run npm install
• We normally do not edit this folder

public

Stores static files.

Examples:

• images
• favicon
• static assets

Files here are copied directly to the final build.

src

Main source code folder.
Most React development happens here.

src/assets

Stores project assets.

Examples:

• images
• SVGs
• fonts

App.jsx

• Main React component.
• Usually contains the primary UI.

Example:

function App() {
  return <h1>Hello React</h1>;
}

export default App;

This component is rendered into the browser.

App.css

Styles specific to App.jsx.

Example:

h1 {
  color: blue;
}

Imported inside App.jsx.

index.css

• Global CSS file.
• Applies styles across the whole app.

Example:

body {
  margin: 0;
  font-family: Arial;
}

main.jsx

• Entry point of the React application.
• This is where React starts running.

Example:

import React from "react";(TBD)
import ReactDOM from "react-dom/client";(TBD)
import App from "./App";

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

Important Flow

main.jsx
↓
renders App.jsx
↓
displayed inside index.html

.gitignore

Tells Git which files/folders to ignore.

Example:

• node_modules
• dist

Prevents unnecessary files from being uploaded to GitHub.

eslint.config.js(TBD)

Configuration for ESLint.

ESLint checks:

• coding mistakes
• bad practices
• formatting issues

Helps maintain clean code

index.html

• Main HTML file.
• Contains the root DOM element where React mounts

Example:

<div id="root"></div>

React injects the app into this <div>

package.json(TBD)

Most important configuration file.
Contains:

• project info
• dependencies
• scripts

package-lock.json

• Automatically generated by npm.
• Locks exact package versions for consistency

README.md

Project documentation.
Usually contains:

• setup instructions
• project info
• commands

vite.config.js(TBD)

Configuration file for Vite.
Used to customize:

• server
• plugins
• aliases
• build settings

---

How Everything Works Together

Step-by-Step
Browser opens:
index.html
React starts from:
main.jsx
main.jsx renders:
App.jsx
Styles come from:
App.css + index.css
Assets loaded from:
assets/ or public/

Visual Flow
index.html
↓
main.jsx
↓
App.jsx
↓
Components/UI

---

What is Components in React?

• Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML
• Components come in two types, Class components and Function components
• In older React code bases, you may find Class components primarily used.
• It is now suggested to use Function components along with Hooks, instead of Class components

Example:

function Car() {
  return (
    <h2>Hi, I am a Car!</h2>
  );
}