KEMBAR78
Q5 ReactJs | PDF
Scribd
Upload
13 views3 pages

Q5 ReactJs

JSX is similar to HTML but requires self-closing tags, camelCase attributes, and must be wrapped in a single parent element. Browsers cannot directly understand JSX; it must be transpiled into JavaScript using tools like Babel. Fragments in JSX allow grouping of elements without adding extra nodes, and inline styles are defined as objects with camelCase properties.

Uploaded by

ranjeetphalke.rmdssoe.mech
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views3 pages

Q5 ReactJs

JSX is similar to HTML but requires self-closing tags, camelCase attributes, and must be wrapped in a single parent element. Browsers cannot directly understand JSX; it must be transpiled into JavaScript using tools like Babel. Fragments in JSX allow grouping of elements without adding extra nodes, and inline styles are defined as objects with camelCase properties.

Uploaded by

ranjeetphalke.rmdssoe.mech
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Q1. How does JSX differ from HTML?

JSX (JavaScript XML) looks similar to HTML but has some key differences:

JSX requires self-closing tags for elements like <img /> and <br />.
JSX uses camelCase for attributes (e.g., className instead of class, onClick instead of
onclick).
JSX allows embedding JavaScript expressions inside {}.
JSX must be wrapped in a single parent element (or a fragment).

Q2. Can browsers understand JSX directly? How is JSX


processed?

No, browsers cannot understand JSX directly because it's not valid JavaScript. JSX is transpiled
into regular JavaScript using tools like Babel.
For example:

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

Gets transpiled into:

const element = React.createElement("h1", null, "Hello, World!");

This is why JSX must be processed before browsers can run it.

Q3. What are fragments in JSX and how do you use


them?

Fragments allow you to group multiple elements without adding an extra node to the DOM.
Instead of:

return ( <div> <h1>Title</h1> <p>Description</p> </div> );


You can use fragments:

return ( <> <h1>Title</h1> <p>Description</p> </> );

This avoids unnecessary <div> wrappers in the DOM.

Q4. How do you handle inline styles in JSX? Provide an


example.

In JSX, styles are written as an object with camelCase property names:

const divStyle = { backgroundColor: "lightblue", padding: "20px", fontSize: "18px" };


return <div style={divStyle}>Styled Div</div>;

Alternatively, you can apply inline styles directly:

return <h1 style={{ color: "red", fontSize: "24px" }}>Hello, JSX!</h1>;

Q5. What are the rules for writing JSX tags?


JSX elements must have a single parent. Use fragments if necessary.
Use camelCase for attributes (className, onClick).
Self-closing tags must have a / (<img />, <input />).
JavaScript expressions inside {} (e.g., {title}).
Boolean attributes are written as {true} (e.g., <input disabled={true} />).

Q6. What is the purpose of the key attribute in JSX?

The key attribute helps React identify elements efficiently when updating the DOM.
Example usage in lists:
const items = ["Apple", "Banana", "Cherry"]; return ( <ul> {items.map((item, index) =>
( <li key={index}>{item}</li> ))} </ul> );

Without key, React may not update items correctly, leading to performance issues.

You might also like