React - Introducing JSX
Tags: reactnative, react, javascript
Published: 2022-09-07 02:26:52

## What is JSX?

Take a look at the example below:

```jsx
import React from "react";

function App(){
    return (
       <div> 
          <Nav />
          <h3>This is a header</h3>
          <p>This is some text</p>
       </div>
    );
};

export default App;
```

**JSX** stands for ['JavaScript XML'](https://facebook.github.io/jsx/) and is a syntax extension for JavaScript. It is used to create DOM elements that are then rendered in the React DOM. Although it _looks_ like HTML, it is actually an XML-like syntax specifically written for use in React. Interestingly, JSX is not valid JavaScript either. JSX needs to be compiled by a tool like [Babel](https://babeljs.io/) to be translated into regular JavaScript that a browser can understand. Put simply, JSX describes what the UI should look like, and React takes care of properly rendering it. 

### But this looks like HTML!

You can use all of the elements you would find in an HTML document in JSX, including `<div>`, `<span>`, `<h1>` - `<h6>`, `<p>`, `<a>` and many more. You can also add JSX attributes such as `id` and `className` (watch out, it's `className` rather than just `class`!). It's important to remember that this is **not** HTML and cannot be read as HTML by your browser.

---

## Key Concepts 

### Top-level Elements and React Fragments

In the code example above, you may notice that a `<div>` encloses a number of child elements. JSX can only return **one** top-level element. The top-level element can be anything from a `<div>`, a `<span>`, an `<a>` tag, or even what is known as a react **fragment**. With a fragment, you simply enclose what you'd like to return in empty opening `<>` and closing tags `</>`. Fragments allow you to group a list of children without adding unnecessary nodes to the DOM. 

We could refactor our example above to use a fragment:
```jsx
import React from "react";

function App(){
    return (
       <> 
          <Nav />
          <h3 id="example">This is a header</h3>
          <p className="shortP">This is some text</p>
       </>
    );
};

export default App;
```
This will render the same elements to the DOM as the example above, but without an overarching `<div>` node.

### JavaScript and JSX 

JavaScript expressions can be embedded within JSX expressions, and must be places between { curly braces }. For example:

```jsx
let sum = <p>{20 + 20}</p>;
```

All JavaScript code needs to be inside of curly braces. This is known as **JSX Expression Syntax**. Here are some valid things you _can_ have inside of a JSX Expression:

- A string
- A number
- An array
- An object property that will evaluate to some value
- A map method (which will return a new array)
- More JSX 

And there are things you _cannot_ have in a JSX Expression: 

- Any loop
- A variable declaration
- A function declaration
- If/else conditionals

### JSX Conditionals

You cannot use if/else syntax in embedded JavaScript. You can express conditionals in other ways:
1. A ternary within curly braces
2. An if statement outside of a JSX element
3. Logical short circuit && operator 

```jsx
// Using a ternary operator

const toggleMode = (
   <button> 
        { isDarkMode ? 'Set Light Mode' : 'Set Dark Mode' }
   </button>
);

// Using an if statement outside of the JSX element

let option;

if (isDarkMode) { option = 'Set Light Mode' }
else { option = 'Set Dark Mode' }

const toggleMode = <button>{ option }</button>

// Using the && operator
<p>{isTrue && "This is also true"}</p>

```

### Function Components & JSX 

A function component **must** return JSX. Every function component in your React app must return one JSX element. This is where the single top-level element (or fragment) come into play. 


---
## Why use JSX?

JSX allows developers to write cleaner, easier to read code. You don't strictly _need_ to use JSX, but it makes creating React applications easier by allowing programmers to use HTML-like syntax to describe what the UI should look like. 

JSX represents objects. The [React docs](https://reactjs.org/docs/introducing-jsx.html) provide two examples, both of which will render identically:

```jsx
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
```
This is going to have exactly the same output as: 

```jsx
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
```

In my opinion, JSX is easier to write and easier to read. JSX uses a declarative style of programming, which abstracts what Vanilla JavaScript takes a number of steps to do into a simple JSX expression of _what_ we want to render. React then figures things out behind the scenes (with a little help from Babel, as I mentioned above).  

For more information, try these links:
[React Docs](https://reactjs.org/docs/introducing-jsx.html)
[Why use className instead of class?](https://github.com/facebook/react/issues/13525#issuecomment-417818906)