React components :

◾Components are like functions that return HTML elements.

◾Components are independent and reusable bits of code.
They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Key characteristics :

🔹Reusability: You can write a component once (e.g., a Button or Header) and use it multiple times throughout your application.

🔹Independent Logic: Each component manages its own logic, such as handling clicks or data.

🔹Composable: You can nest components inside other components to build complex interfaces from simple parts.

🔹Naming: component names must start with an uppercase letter to distinguish them from standard HTML tags.

🔹They are two types

1.class components
2.functional components

Class components :

▪️It is the older version and this not recommended for new projects.

functional components :

▪️Simple JavaScript functions that return JSX. They are the modern standard because they are easier to read and use Hooks to manage state.

function Welcome() {
return

Hello, world!

;
}
Jsx rules :
◾JSX (JavaScript XML) is a syntax extension for JavaScript used in React to describe what the UI should look like.

◾It follows specific rules they are,

▪️Return a Single Root Element: A component must return only one top-level element.If you need to return multiple elements use

or a React Fragment (<>...</>)

▪️Close All Tags: Unlike HTML, every tag must be closed. This includes self-closing tags for elements without children, such as ,
, and .

▪️Use camelCase for Attributes.
🔹UseclassNameinstead of class

🔹Use htmlFor instead of for

🔹Use event handlers like onClick instead of onclick
▪️Embed JavaScript with Curly Braces.

▪️Capitalize Component Names: React treats lowercase tags (like

) as built-in HTML elements. Custom components must start with a capital letter (e.g., ) to be recognized as React components.

React folder structure :
When you first create a project with tools like Vite or Create React App, the root directory contains:

🔹public/: Static assets like index.html, favicons, and the manifest.jsonfile.

🔹src/: The main development folder where all your React code lives.

🔹App.js: The root component of your application.

🔹index.js/main.jsx: The entry point that renders the React app into the DOM.

🔹node_modules/: Contains all installed project dependencies.

🔹package.json: Lists your project dependencies and scripts