What is JSX?
When writing JavaScript in the React framework, you will regularly encounter code that looks a whole lot like regular HTML. While appearing almost identical to the markup language, this code is actually what is referred to as JSX — a special syntax that is transformed into regular JavaScript after being compiled (typically via Babel.js). While it is possible to write React applications with using JSX, this is the standard best practice, as it makes creating HTML elements far simpler and easier to read. This blog post will give a light introduction to JSX, what it compiles into, and some of its common features.
JSX is a syntax extension for JavaScript, similar to a templating language with some additional features. A JSX element is often assigned to a variable, or returned from a function. In the example below, an h1 element is assigned to a variable, which can then be called inside of a React component:
const h1 = <h1>This is JSX</h1>
While it might seem weird to write HTML-like code inside of JavaScript, there are quite a few benefits. For one, this syntax is far simpler. The code example above would compile to the following code, once turned into regular JavaScript:
const h1 = React.createElement(
“h1”,
null,
“This is JSX”
)
Without going into too much detail, the code above creates a new React element, using the built-in .createElement() method. The first argument of the method always indicates the type of element, in this case, h1. The second argument indicates any attributes on the element, such as a class name. Finally, the last argument is for the “child” attribute, i.e. the content that the element contains. This could also contain other elements.
If that seems convoluted, you might start to see the benefit of using JSX over plain JavaScript in your React projects.
In general if you’re having issues with JSX development, you should consult with an expert.
Reach to Sunlight Media for expert web design and app development services in Los Angeles.
Writing JavaScript within JSX
One of the biggest advantages of JSX is being able to “inject” regular JavaScript inside. Anything within a JSX tags (i.e. <h1>, <img />, <div>, etc.) is treated to as JSX, so we can use curly braces ({ and }) to wrap around any JavaScript code we want to execute.
const name = ‘Nicholas’
const greeting = <h1>Hello {name}</h1>
// => renders ‘Hello Nicholas’
const name = ‘Nicholas’
const greeting = <h1>Hello name</h1>
// => renders ‘Hello name’
Using curly braces, we can inject variables, functions or any JavaScript code into our JSX. We can even perform operations or anything else we would typically do in JavaScript:
const results = <p>The correct number was {3 + 4}</p>
// => renders ‘The correct number was 7’
Conclusion
JSX is an integral part of the React ecosystem that makes writing modern applications far more painless. JSX allows for clearly and succinctly viewing all of the aspects of a web component, all with the power of modern JavaScript.
+ There are no comments
Add yours