What Are React Components?
A component in React is a reusable piece of UI that you can think of as a building block of your application.
Just like functions in JavaScript, components let you split the UI into independent, reusable pieces and manage each piece in isolation.
There are two main types of components:
Functional Components
Class Components (older style, rarely used now)
Functional Component Example
// App.js
import React from "react";
function Greeting() {
const name = "Harry";
return Hello, {name}!
;
}
export default Greeting;
Here’s what happens:
Greeting is a React functional component.
It returns a piece of JSX, which React renders to the DOM.
What Is JSX?
JSX (JavaScript XML) is a syntax extension for JavaScript used in React to describe what the UI should look like.
It looks like HTML but is actually JavaScript under the hood.
const element = <h1>Hello, world!</h1>;
Underneath, React transforms it into:
const element = React.createElement('h1', null, 'Hello, world!');
That’s why JSX is so powerful - it combines the simplicity of HTML with the flexibility of JavaScript.
Common HTML to React JSX Differences
| HTML Attribute |
React JSX Equivalent |
Reason / Notes |
class |
className |
class is a reserved JavaScript keyword; JSX uses className instead. |
for |
htmlFor |
for is reserved in JavaScript; JSX uses htmlFor when labeling <input> elements. |
onclick |
onClick |
React uses camelCase for event handlers. |
onchange |
onChange |
Same behavior as HTML, but written in camelCase. |
onfocus |
onFocus |
Event names are case-sensitive in JSX. |
onblur |
onBlur |
React event naming convention uses camelCase. |
tabindex |
tabIndex |
JSX attribute names use camelCase syntax. |
maxlength |
maxLength |
Attribute names are capitalized in JSX following camelCase rules. |
Quick Notes:
JSX attributes are written in camelCase (e.g., onClick, tabIndex, maxLength).
Some HTML attributes are renamed because they conflict with JavaScript reserved words.
Event handler names in JSX are case-sensitive, unlike plain HTML.