ReactJs – Learn JSX

This is part 3 of our React tutorial and in this part we would learn JSX. We would cover the following:

1. Introduction to JSX
2. The React.CreateElement() Method
3. A Little More About JSX
4. Some Exercise
5. Watch the JSX Video Tutorial

1. Introduction to JSX

JSX stands for JavaScript XML and is an extension to the JavaScript language syntax. Using JSX, you can write more friendly codes that look like XML. Just like XML, JSX tags has a tag name, attributes and children.

While use of JSX is not mandatory, they make writing of codes simpler. They also helps you write elegant codes. Also JSX syntax is very easy to get used to. Under the hood, JSX translates to pure JavaScript that is understood by he browsers.

To help you appreciate JSX, we’ll now write a React component using JSX. Then we write the same component without JSX

With JSX

Step 1: Create a file called Thanks.js inside the components folder. This is the content of the file:

import React from 'react'

const Thanks = () => {
    return (
        <div>
            <h1>Thanks Kindson!</h1>
        </div>
    )
}

export default Thanks

Now include this in the App.js component.(you already know how to do this. Otherwise check the previous Part 2)

Then save and check the output in the browser

Without JSX:

Do same with the code below:

const Thanks = () => {
    return React.createElement(
        'div', 
        null, 
        React.createElement('h1', null,'Thanks Kindson!')
    )
}

You will see that this code gives the same output as the previous one

2. The React.createElement() Method

The createElement() method is a method provided by the React library for creating elements. Elements such as html tags are part of a component

The createElement() method take a minimum of three parameters:

• the first is a string specifying the html tag to be rendered
• the second specifies any optional properties
• the third is the children of the html element (which could be another call to createElement() method)

Quiz: Modifiy the component to display the text with Kindson underlined. (add another child element <u></u>). see the video

The Second Parameter

The second parameter is an object of key-value pairs which would be applied to the element. For example, assuming we want to add an id attribute to the <div> tag.

Now modify the function, replace the null parameter with:

{id: 'greeting'}

.

Save and examine the console output (not just the browser output!)

Lets modify the component again by adding a class attribute to the div tag.

This is what you have:

{id: 'greeting', class:'myClass'}

Take a look at the console. You will notice an warning. It says: “Invalid DOM property”. This is because ‘class’ is a keyword in JavaScript and therefore we can’t use it. So the correct word for specifying a CSS class would be className.

3. A Little More about JSX

1. Some keywords are a bit different in JSX than in regular HTML

For example:

• Class is replaced by class name
• for is replaced with htmlFor

2. JSX uses the camelCase naming convention

For example

• onclick is replaced with onClick
• tabindex is replaced and tabIndex

3. And more. We would get used to them as we progress. So don’t worry!

To learn about some new changes that may be coming up in React, take a look at this page.

4. Exercises

Please ensure to do this yourself before going to the next part. If you have challenges, then check the video. Also mention your challenge in a comment

1. Convert the following code to JSX syntax

React.createElement("div", { className: "blue" }, "You can do it!");
React.createElement(addition, { count: 7 + 3 });

2. Convert the code below to JSX syntax:

React.createElement(
  Dashboard,
  { "data-index": "4" },
  React.createElement("h2", null, "Scores"),
  React.createElement(Scoresheet, { className: "results", scores: myScores })
);

Remember to watch the video