Back To Basics: What is JSX?
A introduction to JSX! (HTML and JavaScript Copt Cat)
When you first learn about ReactJS, you get introduced to this HTML-like syntax known as JSX. It looks like HTML but at the same time, it looks like JavaScript? Well its actually neither! In this post, I will talk about what JSX is and why we use it for React projects.
What is JSX?
JSX stands for JavaScript XML. This React extension allows us to write HTML elements with JavaScript without using methods like createElement(). We are able to write DOM-like tree structures directly into our JavaScript and React components. It produces “React elements”. These describe what we want to the UI to look like. It is then complied by tools like Babel or Parcel. It translates our markup languages into JavaScript.
Example of JSX
Similarly to HTML, we use tags and we can next out react elements within each other. HTML and components tags must use <> and be closed with </>. Attributes can be added to these elements. The attribute class is labeled as className in JSX. It is also important to know that we can only return one HTML for every component, meaning that elements must be nested within a parent tag. You can even use empty tags!
Adding Expressions in JSX
As you can see we get the same results! We can just insert it into any curly brackets and we can nest the element in our div. React does not require JSX. You can definitely use React without using JSX at all.
A Component Without JSX
Here is the same example but without JSX. We are required to use methods like React.createElement() and ReactDOM.render(). These are methods being used behind the scenes when you use JSX.
React.createElement() uses this syntax:
React.createElement( type, [props], […children elements])
- Type refers to HTML tags like
<h1>,<div>,<p>etc. - props refers to attributes the element should have like
class - children refers to elements nested within that specific element
Benefits of JSX
JSX is easier to read and produces cleaner code. Without JSX, you would have to write a whole bunch of React.createElement() over and over again which is a huge pain.
Errors are easier to detect in find. If we have an error we can pinpoint exactly where in our code is the issue because of the visual representation of a DOM-like tree structure.
As you can see JSX is purely optional but it is much easier to use!
