JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. JSX is easy to understand, but as a newcomer to JSX, there are a few things you need to keep in mind.

• Variables
• Rendering nothing
• Conditional rendering
• React Fragments
• Capitalization

---

Variables

Whenever you want to render a variable/expression in JSX, you need to wrap them with curly braces {}. You can include any JS expressions within curly braces.

const name = 'Harsha';
return (
<div>
  <h1>Welcome!</h1>
  <h2>{name}</h2>
  <p>Years of coding {2020 - 2010}</p>
  <p>Today : {new Date().toLocaleDateString()}</p>
</div>
);

---

Rendering nothing

Return null if you want React to not render content to the screen. When you return undefined, [](empty array), boolean values also, React wouldn’t render any content, but null is good to use as the code can be easily readable by fellow developers.

if(loading) return null;
return <div>Content loaded!</div>;

#react #javascript #jsx #programming #developer