Building with React.js from Lagos: Part 2 — Learn JSX

Part 2 of a new series of learning React.js. This section, we’ll be looking at Advanced JSX.

Adding className attributes in JSX

Grammar in React JSX is mostly the same with HTML, but there are slight differences to watch out for.

In HTML, we commonly use class as an attribute name:

<div class="primary">Button</div>

In JSX, you use className instead of the word class!

<div className="primary">Button</div>

Since JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. When JSX is rendered, JSX className attributes are automatically rendered as class attributes.

const myElement = (
  <h1 className="greeting">
    Hello, there!
  </h1>
);

Self-Closing Tag and Curly Braces in JSX

When you write a self-closing tag in HTML i.e (<img>, <input>, <br>), it is optional to include a forward-slash immediately before the final angle-bracket:

Works with a slash in HTML:
<br />
Also works fine in HTML, without the slash:
<br>

But! In JSX, you have to include the slash else you will raise an error:

Fine in JSX:
<br />
WONT WORK AT ALL IN JSX:
<br>

Any code in between a JSX element tag will be read as JSX, not as regular Javascript! JSX doesn’t add numbers — it reads them as text, just like HTML. You need to write the code by wrapping them in curly braces. This way you are saying, “Even though my code is located in between JSX tags, treat me like ordinary Javascript and not like JSX.”

//Curly braces in JSX
import React from 'react';
import ReactDOM from 'react-dom';
const math = (<h1>4 + 3={4 + 3}</h1>);
ReactDOM.render(math,
document.getElementById('app'));
//This outputs 4 + 3 = 7

Variables and Variable Attributes in JSX

You can access variables while inside of a JSX expression, even if those variables were declared on the outside.

//Variables in JSX
import React from 'react';
import ReactDOM from 'react-dom';
const aString = "Hey, I am a string.";
ReactDOM.render(<h1>{aString}</h1>,
document.getElementById('app'));
//Hey, I am a string.

Here’s an example of how Variable Attributes work:

//Object properties are often used to set attributes:
const imgs = {
  butterfly: "https://media1.britannica.com/eb-media/06/1706-004-A94493A0.jpg",
  honeybee: "https://media1.britannica.com/eb-media/69/162669-120-995C9085.jpg",
  whale: "https://media1.britannica.com/eb-media/52/1452-004-BB2C55E0.jpg"
}
const butterflyImg = (
  <img
    src={imgs.butterfly}
    alt="Beautiful butterfly" />
);
const honeybeeImg = (
  <img
    src={imgs.honeybee}
    alt="Beautiful honeybee" />
);
//Use a variable to set the 'height' and 'width' attributes of an img:
const imgSize = "150px";
const whaleImg = (
  <img
     src={img.whale}
     alt="whale"
     height={imgSize}
     width={imgSize} />
);

Event Listeners and Conditional Statements in JSX

JSX elements can use event listeners, just like HTML elements can. You can use an event listener by giving the JSX element a special attribute. Here’s an example:

<img onClick={myFunc} />

An event listener attribute’s value should be a function. The above example only works if myFunc were a valid function that had been defined elsewhere:

//Event listeners
function myFunc() {
  alert ("We made our function pop an alert");
}
<img onClick={myFunc} />

Now that you’ve learned how to use curly braces to inject Javascript into a JSX expression, there’s a rule that you need to know: you can not inject an if statement into a JSX expression.

//This code wont work:
const testCondition = (
  <h1>
    {
      if (purchase.complete) {
         `Thanks for using us`
      }
  </h1>
)

The reason why the code above wont work is the way JSX compiles. You can learn more about that here but that shouldn’t set us back. If the above example doesn’t work, If you can’t inject an if statement into JSX, how can you write a conditional statement? Lets follow the example below:

import React from 'react';
import ReactDOM from 'react-dom';
let message;
if (user.age >= drinkingAge) {
  message = (
    <h1>
      Hey, you can drink alcohol beverage!
    </h1>
  );
} else {
  message = (
    <h1>
      Hey, you can have water instead
    </h1>
  );
}
ReactDOM.render(message, document.getElementById('app'));

The above example works because the if and else are not included in between JSX tags. One option is to write an if statement, and not inject it into JSX.

There’s another way to write conditionals in JSX: the ternary operator. Here is how you can use the ternary operator in a JSX expression:

const textTernary = (
  <h1>
    { age >= drinkingAge ? 'Serve Beer' : 'Serve water or candy bar' }
  </h1>
);

In the above example, if age is greater than or equal to drinkingAge, then textTernary will be <h1>Serve Beer</h1>. Otherwise, textTernary will equal <h1>Serve water or candy bar</h1>.

You can do more stuffs in JSX like use the && Conditionals, map and keys…just like we use them in ordinary Javascript. Hopefully, you can put this series into good use and create an awesome React app.