JSX Basics

JSX Basics

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.

😄Tip
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.

JSX is the templating language of React. 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:

jsx
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.

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:

jsx
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:

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

  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.

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

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

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:

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

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.

jsx
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!

jsx
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 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.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)