React: Create a Simple/Complex JSX Element

• React is a popular JavaScript library for building reusable, component-driven user interfaces for web pages or applications. React combines HTML with JavaScript features into its own markup language called JSX. React also makes it easy to manage the flow of data throughout the application.
• JSX is a extension of JavaScript, you can actually write JavaScript directly within JSX. To do this, you include the code you want to be treated as JavaScript within curly braces: { 'this is treated as JavaScript code' }.
• However, because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. The transpiler Babel is a popular tool for this process.

const JSX = <h1>Hello JSX!</h1>;

• The current code uses JSX to assign a h1 element to the constant JSX and we added the text Hello JSX! inside it.

• The last bit was a simple example of JSX, but JSX can represent more complex HTML as well. One thing to know about nested JSX is that it must return a single element. This one parent element would wrap all of the other levels of nested elements.

• Valid JSX:
  

const JSX = 
<div>
  <h1>This is the start.</h1>
  <p>This is just text.</p>
  <ul>
  <li>Cookies</li>
  <li>Milk</li>
  <li>Eggs</li>
  </ul>


</div>

{/* <ul>: The Unordered List element. The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list */}

• Here the current code is defined with a constant JSX that provides a div which contains the following elements in order: An h1, a p, and an unordered list that contains three li items.

Adding comments to JSX:

• You might be wondering, this is simple it's the same as JavaScript. Not necessarily, To put comments inside JSX you use the syntax {/* */} to wrap around the comment text.