In this blog I'm going to talk about JSX in ReactJS, In the Last blog I explained the basics of components in ReacJS. But what to write in those components, if you see it again it will look like HTML tags but they are not, They are JSX, a syntax extension in ReactJS that represents the MARKUP.

WHY JSX?

So initially the web apps or websites are built using HTML, CSS, and JAVASCRIPT. The markup was written in HTML, the styling was done in CSS and logic was written in JAVASCRIPT.

As the web apps became more interactive and complicated and more and more complex, JAVASCRIPT was used to render the HTML.

So JSX has helped in keeping the logic and markup of a component in the same place, ensuring the sync of their working.

RULES OF JSX

1:- If you look clearly at JSX you will find it similar to HTML. But it's little bit different from it. Let me show you how:-

// If you execute the code written below find you will get an error
// because JSX codes or tags must be closed  
export default function App() {
  return (
    <div class="App">
      <h1>Hello Everyone</h1>
      <img  src="https://images.pexels.com/photos/6077089/pexels-photo-6077089.jpeg?auto=compress&cs=tinysrgb&w=600" >
    </div>
  );
}

//the correct will be 
export default function App() {
  return (
    <div class="App">
      <h1>Hello Everyone</h1>
      <img  src="https://images.pexels.com/photos/6077089/pexels-photo-6077089.jpeg?auto=compress&cs=tinysrgb&w=600" >
    </div>
  );
}

2:- You must return a single element or parent element, if you have multiple items in your component, wrap them in the single parent element.

// THIS CODE BELOW WILL GIVE AN ERROR BECAUSE IF YOU SEE IT CLEARLY IT IS RETURNING MULIPLE ELEMENTS

export default function App() {
  return (

      <h1>Hello Everyone</h1>
      <img  src="https://images.pexels.com/photos/6077089/pexels-photo-6077089.jpeg?auto=compress&cs=tinysrgb&w=600" >
 <h1>My name is ANKIT MISHRA</h1>
 <h1>I AM WRITING THIS JSX BLOG</h1>
 <h1>THIS IS A REACTJS SERIES</h1>


  );
}

There are a few ways to do it

1st METHOD:- Wrap it inside a <div></div>

2nd METHOD:- Wrap it inside a <></> (an empty tag called as fragment)

3:- Follow the camelCase rule

In the background, JSX components turn into a JAVASCRIPT OBJECT and the attributes of it turn into the keys of the object. JAVASCRIPT variables have some limitations, So we need to take care of that. And many variable names are reserved such as class so we can not use class in JSX instead we use className

HERE'S A DETAILED OVERVIEW OF VARIABLE NAMING IN JAVASCRIPT I FOUND ON MDN WEBSITE

You can call a variable pretty much anything you like, but there are limitations. Generally, you should stick to just using Latin characters (0-9, a-z, A-Z) and the underscore character.

• You shouldn't use other characters because they may cause errors or be hard to understand for an international audience.

• Don't use underscores at the start of variable names — this is used in certain JavaScript constructs to mean specific things, so may get confusing.

• Don't use numbers at the start of variables. This isn't allowed and causes an error.

• A safe convention to stick to is the so-called "lower camel case", where you stick together multiple words, using lowercase for the whole first word and then capitalize subsequent words. We've been using this for our variable names in the article so far.

• Make variable names intuitive, so they describe the data they contain. Don't just use single letters/numbers, or big long phrases.

• Variables are case sensitive — so myage is a different variable from myAge.

• One last point: you also need to avoid using JavaScript reserved words as your variable names — by this, we mean the words that make up the actual syntax of JavaScript! So, you can't use words like var, function, let, and for as variable names. Browsers recognize them as different code items, and so you'll get errors.

SUMMARY

In this blog, I discussed the basics of JSX in ReactJS, which was a syntax extension used to represent markup in components. JSX helped to keep the logic and markup of a component in the same place, ensuring their synchronization. As web apps became more interactive and complex, JavaScript was used to render HTML. With JSX, it became easier to maintain code by keeping logic and markup in one place. There were some rules for writing JSX, such as closing tags, returning a single parent element, and following the camelCase rule. Moreover, it was essential to take care of variable naming in JavaScript and follow the lower camel case convention while avoiding JavaScript-reserved words.