What is JSX?
JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows developers to write HTML-like structures directly inside JavaScript code.
Example:
const element = <h1>Hello World</h1>;
Although JSX looks like HTML, browsers do not understand JSX directly. Tools like Babel convert JSX into regular JavaScript.
The above JSX code becomes:
React.createElement("h1", null, "Hello World");
Why Use JSX?
JSX is widely used because it makes code:
Easier to read
Cleaner and more organized
Faster to write
Simple to manage UI components
Instead of writing complex JavaScript code for UI creation, developers can use JSX to design interfaces in a more natural way.
Rules of JSX:
To write JSX correctly, developers must follow some important rules.
1.JSX Must Have One Parent Element:
JSX does not allow multiple elements without wrapping them inside a single parent element.
Correct Example:
return (
<div>
<h1>Welcome</h1>
<p>This is JSX</p>
</div>
);
Incorrect Example:
return (
<h1>Welcome</h1>
<p>This is JSX</p>
);
You can also use React Fragments:
return (
<>
<h1>Welcome</h1>
<p>This is JSX</p>
</>
);
2.All Tags Must Be Closed:
Every JSX tag must be properly closed.
Correct Example:
<img src="image.jpg" />
<input />
Incorrect Example:
<img src="image.jpg">
3. Use className Instead of class:
Since class is a reserved keyword in JavaScript, JSX uses className.
Correct Example
<div className="container">
Content
</div>
Incorrect Example
<div class="container">
Content
</div>
Use CamelCase for Attributes:
4.JSX attributes follow camelCase naming:
Examples
HTML Attribute=>JSX Attribute
onclick =>onClick
tabindex =>tabIndex
maxlength=>maxLength
Example:
<button onClick={handleClick}>
Click Here
</button>
5.JavaScript Expressions Use Curly Braces {}
You can write JavaScript expressions inside JSX using curly braces.
Example
const name = "Rahul";
<h1>Hello {name}</h1>
You can also use calculations:
<h2>{5 + 5}</h2>
6.Inline CSS Must Be Written as an Object:
Styles in JSX are written as JavaScript objects.
Example:
<div style={{ color: "blue", fontSize: "20px" }}>
Styled Text
</div>
Notice that property names use camelCase.
7.Comments in JSX:
Comments are written using {/* comment */} syntax.
Example
<div>
{/* This is a JSX comment */}
<h1>Hello</h1>
</div>
8.Component Names Must Start with a Capital Letter:
Custom React components should always begin with uppercase letters.
Correct Example:
<MyComponent />
Incorrect Example:
<myComponent />
Lowercase names are treated as normal HTML elements.
Advantages of JSX
Some major advantages of JSX are:
- Improves code readability
- Makes UI development easier
- Reduces complexity
- Supports reusable components
- Provides better error handling
What are React Components?
React components are reusable pieces of code that return JSX and define how a part of the user interface should appear.
A component works like a JavaScript function that returns HTML-like UI code.
Example
function Welcome() {
return <h1>Hello React</h1>;
}
The component can then be used like an HTML tag:
<Welcome />
Why Use Components?
Components provide several advantages:
- Reusable code
- Better organization
- Easier maintenance
- Improved readability
- Faster development
Instead of writing the same code multiple times, developers can create one component and reuse it wherever needed.
Types of React Components:
There are mainly two types of components in React:
- Functional Components
- Class Components
1.Functional Components:
Functional components are simple JavaScript functions that return JSX.
They are the most commonly used components in modern React.
Example:
function Greeting() {
return <h1>Welcome User</h1>;
}
Using the Component:
<Greeting />
Functional Component with Props
Props are used to pass data from one component to another.
Example
function Greeting(props) {
return <h1>Hello {props.name}</h1>;
}
Using Props:
<Greeting name="Rahul" />
Output:
Hello Rahul
2.Class Components:
Class components are ES6 classes that extend React.Component.
Before hooks were introduced, class components were mainly used for state management.
Example
import React, { Component } from "react";
class Welcome extends Component {
render() {
return <h1>Hello React</h1>;
}
}
Using the Component:
<Welcome />
Difference Between Functional and Class Components:
Functional Components|||Class Components
Simpler syntax||||||||More complex
Use hooks for state|||Use lifecycle methods
Faster and cleaner||||More boilerplate code
Mostly used today|||||Less commonly used
Rules for Naming Components:
React components should follow these rules:
Component names must start with a capital letter
Names should be meaningful
One component should focus on one task
Correct Example:
function Header() {
return <h1>Website Header</h1>;
}
Incorrect Example
function header() {
return <h1>Website Header</h1>;
}
Top comments (0)