Introduction to react.js

$npx create-react-app my-app

$npm start

The React framework, which is defined as a Javascript library by its creator, Facebook, focuses on building user interfaces (UI), especially Single Page Applications (SPA). Its operational core is defined by several fundamental concepts that dictate how interfaces are built and managed: components, the Virtual DOM, and a dedicated system for state and data flow (Props and Hooks).

Components

The core concept of React is its architecture based on reusable components.

• A component represents a part of the visual interface, which can be an element like a button or a form.

• It is an encapsulated unit that contains all the necessary logic for its function, combining structure (HTML), format (CSS), and behavior (JavaScript).

• This approach makes code easy to reuse across different parts of a project or even in separate applications.

• A React component must return JSX code or null.

Virtual DOM (VDOM)

The Virtual DOM is a key feature that allows React to manage the application state separately from direct manipulation of the browser's Document Object Model (DOM).

• The VDOM acts as an abstraction layer above the native DOM.

• React maintains a virtual version of the DOM in memory.

• When a component’s data (state or properties) changes, React compares the previous VDOM representation to the new representation to calculate the minimal updates required.

• This calculated difference is then efficiently applied to the actual DOM, optimizing performance compared to manual DOM manipulation.

JSX and Data Flow

The content and appearance of React components are heavily reliant on JSX and React's internal data mechanisms:

• JSX (JavaScript XML) is a required syntax extension that enables developers to write HTML-like markup directly within Javascript code.

• This JSX code is automatically transformed (transpiled) into equivalent Javascript calls to React.createElement.

• Any Javascript expression, variable, or data must be enclosed in curly braces {} when used within JSX markup.

• React strictly discourages directly accessing or modifying the DOM using traditional Javascript methods like document.getElementById or document.querySelector.

State Management (Hooks and Props)

React provides specific tools, often referred to as Hooks, to manage the mutable and immutable data within components:

• State: A state is a variable whose changes are tracked by React. When a state value is updated, React is notified and triggers a re-render of the component to update the user interface automatically. The Hook used for local state management is useState.

• Props: Props (properties) are used to transfer information from a parent component down to a child component. Props are generally immutable, meaning the component receiving them should not modify them directly.

• Hooks for Side Effects and References: React utilizes Hooks, such as useRef and useEffect, to manage internal component features and interact with external systems.

Let’s break this down step by step so it’s crystal clear. You’re looking at three different ways of exporting and importing modules in JavaScript/React.

🔹 Default Export & Import

• What it means: A file can export one main thing (function, class, object).
• How to import: You can give it any name when importing.

// src/App.js

export default function App() {  

    return <h1>Hello World</h1>;

}

// src/index.js

import App from './App'; // name can be anything, e.g. MyApp

👉 Key point: With default export, the import name is flexible. You could write import MyApp from './App' and it would still work.

🔹 Named Export & Import

• What it means: A file can export multiple things (functions, constants, etc.).
• How to import: You must use the exact names inside { }.

// src/Button.js
export function Button({ label }) {
return {label};
}

export const VARIABLE = '123';

// src/App.js
import { Button, VARIABLE } from './Button.js';

export default function App() {
return (
<>

Variable value: {VARIABLE}
</>
);
}

 

👉 Key point: With named exports, you can export many things, but you must import them by their exact names.

🔹 Named Exports with Aliases

• What it means: You can rename imports using as.
• Why useful: Avoid name conflicts or make names shorter.

// src/utils.js
export function multiply(a, b) {
return a * b;
}

export function divide(a, b) {
return a / b;
}

// src/App.js
import { multiply as mul, divide as div } from './utils.js';

export default function App() {
const a = 2, b = 5;
return (
<>

{a} * {b} = {mul(a, b)}

{a} / {b} = {div(a, b)}
</>
);
}

👉 Key point: Aliases let you import with a different name (multiply → mul).

📝 Summary Table

🔹 JSX → JavaScript Objects

• JSX looks like HTML, but under the hood it’s syntactic sugar for React.createElement.
• Every JSX tag is converted into a JavaScript object that describes the element: its type, props, and children.
• Example:const element = <h1 className="title">Hello</h1>; becomes:const element = React.createElement(  "h1",  { className: "title" },  "Hello" );

🔹 Attributes become object keys

• In JSX, attributes like className, id, onClick are turned into keys of the props object.
• That’s why React enforces camelCase naming:
  • class → className
  • onclick → onClick
  • tabindex → tabIndex

This ensures consistency with JavaScript’s property naming conventions.

🔹 Why camelCase matters

• React needs to distinguish between HTML attributes and DOM properties.
• CamelCase avoids conflicts and makes event handling predictable.
• Example:<button onClick={handleClick}>Click</button> → React knows onClick is an event listener, not just a string attribute.

📝 Summary

• JSX is not HTML — it’s a declarative way to describe UI using JavaScript objects.
• Attributes become keys in props objects.
• CamelCase ensures React can process events and properties consistently.

Let me expand it with a clear breakdown and examples so you can see why those double curly braces are required in JSX:

🔹 Why double curly braces?

• Outer braces {}: In JSX, anything inside {} is treated as a JavaScript expression.
• Inner braces { key: value }: Inline styles in React are defined as a JavaScript object.

So when you write style={{ color: 'red' }}, the outer braces tell React “this is JavaScript,” and the inner braces are the actual object with CSS properties.

🔹 Example

function App() {  return (    <div style={{ color: 'blue', fontSize: '20px' }}>      Hello World    </div>  ); }

This is equivalent to:

React.createElement(  "div",  { style: { color: "blue", fontSize: "20px" } },  "Hello World" );

🔹 CamelCase property names

Because styles are JavaScript object keys:

• background-color → backgroundColor
• text-align → textAlign
• font-size → fontSize

<div style={{ backgroundColor: 'yellow', textAlign: 'center' }}>  Styled text </div>

🔹 Dynamic values

Since it’s JavaScript, you can use variables:

const size = 24; const color = 'green'; <div style={{ fontSize: size, color }}>  Dynamic styles </div>

📝 Summary

• JSX inline styles = JavaScript object.
• Double curly braces = expression + object.
• Properties use camelCase.
• Values can be strings, numbers, or variables.

🔹 JavaScript object destructuring

It’s called parameter destructuring (or more specifically, object destructuring in function parameters).
React props are just a plain JavaScript object, so you can use destructuring to pull out the properties you need directly in the function signature.

🔹 How it works

Normally you’d write:

export function ProductCard(props) {  return <h2>{props.title}</h2>; }

With destructuring:

export function ProductCard({ title }) {  return <h2>{title}</h2>; }

Here:

• props is an object like { title: "iPhone 15 Pro", price: 999 }.
• { title } in the parameter list means “take the title property out of the props object and assign it to a local variable called title.”

🔹 Purpose

• Cleaner code: avoids repeating props. everywhere.
• Explicitness: makes it clear which props the component expects.
• Flexibility: you can destructure multiple props, rename them, or set default values.

Example with defaults:

export function ProductCard({ title, price = 0 }) {  return <h2>{title} – ${price}</h2>; }

✅ In summary:

• It’s called object destructuring in function parameters.
• The purpose is to make props easier to access and more explicit.