React Starter: JSX Basics

Celý článek

JSX is the templating language for React. JSX is also one of the main reasons why devs say they dislike React at first.

As with all new tools, there will be a learning curve. JSX is no different. I am a big believer that learning JSX will make you a better JavaScript developer. It forces us to learn more core JavaScript features like .map() and && than a tool like Vue or Angular would.

Learning JSX will make you a better JavaScript developer.

Give JSX some time and you'll begin to see the power of having pure JavaScript when writing your templates.

What is JSX?

JSX has the benefit that it is just JavaScript. It is an extension to JavaScript and is similar to a templating language, but with the full power of JavaScript.

Here's a quick example of an element:

const myElement = <h1>WHOA I am some JSX</h1>;

This code is neither a string nor HTML. JSX will convert this into a React element that will update our application.

Let's take a look at more examples of JSX and how it can be used in our React applications.

JSX Variables and Expressions

We can add variables and expressions to our JSX using curly brackets {}. Anything inside of these brackets is an indicator to JSX to evaluate anything inside of there.

Here's how we can display a variable:

function App() {
    const name = 'Chris';

    return (
        <h1>My name is {name}</h1>
    );
}

When we have something more than just a string variable, like an object, we can show that by accessing the object property:

function App() {
    const person = {
        name: 'Chris',
        age: 30
    };

    return (
        <h1>My name is {person.name} and I'm [person.age} years old.</h1>
    );
}

With the brackets, we can tell JSX to evaluate anything. We can even do any valid JavaScript expression inside the brackets like: {3 + 4} would output 7.

function App() {     
    return (
        <h1>We can add things like: {3 + 4}</h1>
    );
}

Let's look at what else JSX can do for us:

JSX CSS Classes

If we want to add CSS classes to our JSX templates, we have to use className instead of class. There's a good explanation of why React uses className instead of class. It mostly deals with how JSX code maps to how React generates its templates.

If we wanted to add a class named title and is-2 we would write the following:

function App() {     
    return (
        <h1 className="title is-2">I've got a class!</h1>
    );
}

JSX Styles

To add styles inline to our templates, we can pass in an object to the style property. Instead of writing the string inline like we normally would for HTML, we'll pass in an object. JSX will be converted to the proper styles.

function App() {     
    return (
        <h1 style={{ color: 'red', marginBottom: '30px' }}>I've got styles!</h1>
    );
}

It may seem a little weird that we have to use an object to pass in styles, but this approach provides many benefits. We can use variables inside of our inline styles!

function App() {
    const isActive = true;
    const headerColor = isActive ? 'green' : 'red';

    return (
        <h1 style={{ color: headerColor }}>I've got styles!</h1>
    );
}

JSX allows us a lot of flexibility since our templates are made using JavaScript.

Note: It's important to try to avoid using inline styles whenever possible. Using CSS/Sass is a good way to remove all this styling from your templates.

JSX Makes Templating Easier

JSX has a bit of a learning curve, but after seeing how common tasks are completed, you can start using JSX more in your applications.

Once you start using more JSX, you'll begin to see the values of using JavaScript to template your applications. We'll explore more JSX in the next few posts and we'll see how learning JSX can teach us more about core JavaScript syntax.