Omar Sinan

Learning React [Day 3] - Some Fun with JSX

Posted on 01 Jul 2020 by Omar Sinan

Cover

Today I read chapter 5 of Learning React (2nd edition) by Alex Banks and Eve Porcello. The chapter went into details of JSX and how to use it instead of manually creating elements using React's createElement API, which could be cumbersome at times. This was an exciting chapter because I could easily tell that I can use it to make significant changes to my property React object from my last blog post (read here).

Recreating the property React object

If you missed the previous blog post (I highly recommend you read that first), this is what we had:

const properties_list = [
    {
        name: "4 Bedroom Apartment",
        size: "400 sq ft",
        rent: "$3,200/month",
    },
    {
        name: "2 Bedroom Apartment Unfurnished",
        size: "100 sq ft",
        rent: "$1,300/month",
    },
]

function PropertiesList(props) {
    return React.createElement(
        "div",
        { className: "properties" },
        props.properties.map((property, i) =>
            React.createElement(
                "div",
                { className: "property", key: i },
                React.createElement(
                    "h3",
                    { className: "name" },
                    `Name: ${property.name}`
                ),
                React.createElement(
                    "p",
                    { className: "size" },
                    `Size: ${property.size}`
                ),
                React.createElement(
                    "p",
                    { className: "rent" },
                    `Rent: ${property.rent}`
                )
            )
        )
    )
}

ReactDOM.render(
    React.createElement(PropertiesList, { properties: properties_list }, null),
    document.getElementById("root")
)

In essence, we had our data in properties_list, and we had a PropertiesList React component that contained all the property React elements. Although it was nice and exciting, we can do much better with JSX.

We will keep the same data source (i.e. properties_list). Now we'll create the equivalent of PropertiesList but with JSX:

function PropertiesList({ title, properties }) {
    return (
        <article>
            <header>
                <h1>{title}</h1>
            </header>
            <div className="properties">
                {properties.map((property, i) => (
                    <Property key={i} {...property} />
                ))}
            </div>
        </article>
    )
}

That's all we need. It looks clean and familiar because it is almost plain HTML with a bunch of JavaScript integrated into it. Now let's create the Property React component:

function Property({ name, size, rent }) {
    return (
        <section id={name.toLowerCase().replace(/ /g, "-")}>
            <h1>{name}</h1>
            <p>{size}</p>
            <p>{rent}</p>
        </section>
    )
}

And finally we need to render the PropertiesList component onto the screen:

ReactDOM.render(
    <PropertiesList properties={properties_list} title="Awesome Properties" />,
    document.getElementById("root")
)

Before checking if it actually works, remember that your browser doesn't understand JSX, so you need to compile your JavaScript into something it understands. The easiest way to do this (don't do this in production) is to include Babel:

<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>

And put your code into the following modified script tag:

<script type="text/babel"></script>

We are now ready to run it and check if we get the same result as before:

The result of running the code. We can see the title that we picked, and the two properties.

Aaaand there it is! Even though it looks almost identical (just minor differences that can be easily fixed), the code is much more readable and it is also easier to write.

Hope you learned a thing or two from this blog post, make sure you follow me on Twitter @oohsinan where I post about full-stack development (mostly React).