Mastering React.js Fundamentals

ReactJS is a component-based JavaScript library used for building dynamic and interactive user interfaces. It enables developers to create reusable UI components and develop fast, scalable single-page applications (SPAs) with efficient rendering and updates. It Uses reusable components for better code organization.It Improves performance with a virtual DOM.

import React from "react";

function App()
{
    return (<div><h1>Hello, World!</h1>
    </div>);
}
export default App;

• import React from 'react': Imports React to create components and use JSX.
• function App() { ... }: Defines a functional component called App.
• return ( ... ): Returns JSX that represents the UI (a div with an h1 tag displaying "Hello, World!").
• export default App: Exports the App component so it can be used elsewhere. Working of React React operates by creating an in-memory Virtual DOM rather than directly manipulating the browser’s DOM. It processes and compares changes within this virtual representation before updating the actual browser DOM.

Actual DOM and Virtual DOM: Initially, there is an Actual DOM(Real DOM) containing a div with two child elements: h1 and h2. React maintains a previous Virtual DOM to track the UI state before any updates.

Detecting Changes: When a change occurs (e.g., adding a new h3 element), React generates a New Virtual DOM. React compares the previous Virtual DOM with the New Virtual DOM using a process called reconciliation.
React.JS History
Latest version of React.JS is 19.2.Initial release to the Public (version 0.3.0) was in July 2013.React.JS was first used in 2011 for Facebook's Newsfeed feature.Facebook Software Engineer, Jordan Walke, created it.

React JSX
JSX stands for JavaScript XML.JSX allows us to write HTML in React.JSX makes it easier to write and add HTML in React.JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.JSX converts HTML tags into react elements.

main.jsx

const myElement = <h1>I Love JSX!</h1>;

createRoot(document.getElementById('root')).render(
  myElement
);
//localhost:5173
I Love JSX!

Expressions in JSX
With JSX you can write expressions inside curly braces { }.The expression can be a React variable, or property, or any other valid JavaScript expression.

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;
//React is 10 times better with JSX

Elements Must be Closed
JSX follows XML rules, and therefore HTML elements must be properly closed.JSX will throw an error if the HTML is not properly closed.

const myElement = <input type="text" />;

Attribute class = className
The class attribute is a much used attribute in HTML, but since JSX is rendered as JavaScript, and the class keyword is a reserved word in JavaScript, you are not allowed to use it in JSX.Use attribute className instead.

const myElement = <h1 className="myclass">Hello World</h1>;

Comments in JSX are written with {/* */}.

JSX in React Components
React uses components to build UIs. Components are independent and reusable bits of code.React components are like JavaScript functions, and return HTML.JSX works perfect inside React components.
Props
Arguments can be passed into a component as props, which stands for properties.You send the arguments into the component as HTML attributes.

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

function Car(props) {
  return (
    <h2>I am a {props.color} Car!</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car color="red"/>
);
//I am a red Car!

React Hooks
Hooks allow functions to have access to state and other React features without using classes.
React useState Hook
The React useState Hook allows us to track state in a function component.State generally refers to data or properties that need to be tracking in an application.
Reference
https://www.geeksforgeeks.org/reactjs/reactjs-introduction/
https://www.w3schools.com/react/react_jsx.asp