Menu
REACT

Basics of JSX and Why we should use it.

JSX is a powerful and flexible syntax extension for JavaScript that enables developers to write UI components in a declarative and intuitive way. By understanding the core concepts and features of JSX, you can effectively build complex and dynamic user interfaces with React.

 

It is a syntax extension for JavaScript primarily used with React to define UI components in an HTML-like syntax within JavaScript code. It allows embedding JavaScript expressions within curly braces, specifies attributes using both string literals and JavaScript expressions, and supports conditional rendering, looping, and children specification within tags. JSX prevents injection attacks by escaping embedded values and gets compiled to React.createElement() calls, converting JSX elements into JavaScript objects. With immutable elements, support for CSS class application, fragments to group elements without extra DOM nodes, and compatibility with both functional and class components, JSX provides a concise and intuitive way to build and manage user interfaces dynamically.

 

1. Basics of JSX

JSX allows you to write elements inside JavaScript using a syntax that looks similar to HTML. For instance:

 

Example:

 

const element = <h1>Hello, world!</h1>;

This line creates a React element that represents an h1 HTML tag with the content "Hello, world!".

 

2. Embedding Expressions in JSX

JSX allows embedding any JavaScript expression inside curly braces {}. For example:

Example:

const name = 'John';
const element = <h1>Hello, {name}!</h1>;


This would render as <h1>Hello, John!</h1>.

 

3. JSX as Expressions

JSX expressions are converted to JavaScript objects. This means you can use JSX inside if statements and for loops, assign it to variables, accept it as arguments, and return it from functions.

 

Example:

function greeting(user) {
 if (user) {
   return <h1>Hello, {user.name}!</h1>;
 }
 return <h1>Hello, Stranger.</h1>;
}

 

4. Specifying Attributes with JSX

You can use quotes to specify string literals as attributes:
 

Example:

const element = <a href="https://www.reactjs.org">Link</a>;

 

You can also use curly braces to embed a JavaScript expression in an attribute:

Example:

const element = <img src={user.avatarUrl} />;


5. Specifying Children with JSX

If a tag is empty, you can close it immediately with />:

 

Example:

const element = <img src={user.avatarUrl} />;


JSX tags can contain children:

Example:

const element = (
 <div>
   <h1>Hello!</h1>
   <h2>Good to see you here.</h2>
 </div>
);

 

6. JSX Prevents Injection Attacks

JSX automatically escapes any values embedded in curly braces to prevent injection attacks.

 

Example:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

 

7. JSX Represents Objects

Babel, a JavaScript compiler, compiles JSX down to React.createElement() calls. Each JSX element is just syntactic sugar for calling React.createElement().

Example:

const element = (
 <h1 className="greeting">
   Hello, world!
 </h1>
);


is compiled to:

const element = React.createElement(
 'h1',
 { className: 'greeting' },
 'Hello, world!'
);

 

8. JSX Elements are Immutable

Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.

 

9. JSX and CSS


You can apply CSS classes to JSX elements using the className attribute:

Example:

const element = <div className="myClass">Hello, world!</div>;


10. JSX Spread Attributes

You can use the spread operator to pass multiple props to a JSX element.

 

Example:

const props = { firstName: 'John', lastName: 'Doe' };
const element = <User {...props} />;
REACT