loading...

Thinking in JSX

szam profile image Samuel Grasse-Haroldsen ・1 min read

JSX

When utilizing the React framework we write code in JSX. JSX is a syntax extension to JavaScript. This means we are able to write HTML and JavaScript somewhat interchangeably. Here's an example:

const editor = 'emacs';
const element = <h1>{editor} is the best!</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);
Enter fullscreen mode Exit fullscreen mode

As you can see we can declare variables and embed them within our html element using curly brackets{}. It's easy to use but a bit challenging when our code begins to grow and becomes more complex.

Logic

Often times we want to add logic statements to control the flow of our program. Say we wanted to set the value of something based on if another variable was undefined. In vanilla JavaScript we would probably end up with something like this:

if(object.id){
  value = `${object.id}`;
} else {
  value = '';
}
Enter fullscreen mode Exit fullscreen mode

Although we could add an if statement within our curly brackets I prefer using the ternary operator, &&, ||, etc. It makes our code less "blocky" with fewer lines. Here is what our example could potentially look like within React:

value={ object.id ? object.id : '' }
Enter fullscreen mode Exit fullscreen mode

This accomplishes the same thing and reduces our code length and readability. You could write the same code in vanilla JS and that might be the way you already do things. I would just say that when using React it can sometimes be more challenging to code all the if statements within the curly brackets and keep track of everything. So use ternaries and single lines when you can!

Discussion

pic
Editor guide