What the heck is JSX in React.

JSX stands for JavaScript XML. JSX allows you to write HTML inside React. JSX is a syntax extension to JavaScript. In this article, I will try to explain how to use JXS without bashing your keyboard into your monitor. It is fairly simple when you get the hang of it.

As I say, using JSX you can write HTML directly into React with added functionality. Eventually, during the build process babel will transpile your code in plain JavaScript.

JSX code:

<Navbar color="gray" />

Compiles into:

React.createElement(
  Navbar,
  {color: 'gray'}
)

You can use any HTML tag that you want. If you don't have any child element you can use that tag as a self-closing tag.

JSX code:

<div className="imageContainer" />

compiles into:

React.createElement(
  'div',
  {className: 'imageContainer'}

Something that you should note here is that you can't use the "class" keyword because it is a reserved word for JavaScript so you have to use "className" instead. and also you can't use a dash (-) in your class names so you need to use camelCase for your naming.

User-created components must start with a capital letter. is a big no no in react. It should be like this, .

You can pass a JSX component as a child element. You can also pass simple HTML, JavaScript expression, and Functions as children.

<CartContainer>
<CartHeader/>

<h1>{name}</h1>
<p>Thank you</p>

</CartContainer>

Booleans, Null and Undefined are ignored when rendering. Don't get me wrong, these are valid children, but they don't get rendered. If you want to render them in your UI you have to convert them into a string.

const answer = true;
<div>
  The answer is {String(true)}.
</div>

Earlier in this article, we saw that the JSX compiles into calls to React.createElement so the React must be in scope. (What is Scope?? The "Scope" is beyond the scope of this article. We will talk about it in another article.) So what it actually means to be in scope?? Simply it means that you have to import React in each of your components.

import React from 'react';

You can send data from one component to another in JSX using something called Props. You can pass any JavaScript expression and string by typing the name of data following by equal sign and curly braces.

<ShoppingCart key={001}, name={"LV Wallet"}/>

if statements and for loops are not expressions in JavaScript so you can't send them as a Props but you can use them in the surrounding code.

function NumberDescriber(props) {
  let description;
  if (props.age > 18 ) {    
description = <strong>Underaged</strong>;  
} else { 
  description = <i>18+</i>; 
 }  

return (
<div>{props.number} is an {description} number</div>
);
}