React JSX - React Vernacular Campaign 06

Preamble

React is one of the most popular JavaScript packages for developing web and mobile front-ends, developed by Meta (formerly Facebook) to enable developers to create reusable components to complete front-end pages.

However, it's important to note that React is not technically a framework. That's because it's only responsible for presenting the components of the UI. However, React provides an alternative solution to frameworks such as Angular and Vue, allowing us to work with it on complex front-end page functionality.

This post will introduce an important syntax in React - JSX.

JSX is also one of the more common ways to write React, so we'll get to that in the next section.

What is JSX?
JSX Language Method
Building React Components with JSX

What is JSX?

Before we talk about JSX, let's review the React DOM syntax that was explained in the previous article.

				
					const dish = React.createElement("h1", "Hello World") ReactDOM.render(dish, document.getElementById("root"))

The above React syntax can be converted to the following HTML DOM.

				
					<div id="root">
	<h1>Hello World</h1>
</div>

As you can imagine from the code above, the React syntax in JavaScript is relatively difficult to understand, and if it's an even more complex HTML file with thousands of lines, the code will be even more complex and difficult to understand.

So while the Facebook team was developing React, they also addressed this shortcoming by adding a new, more concise syntax for building front-end web components: JSX.

JSX is an acronym consisting of two words, "JS" JavaScript and "X" XML. Although JSX is somewhat similar to HTML, it is essentially a component constructed through the React syntax, and the following is a simple JSX example.

				
					import React from 'react'; import ReactDOM from 'react-dom/client'; const myElement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);

You can see that the middle is almost the same as the HTML syntax, but the beginning and the end of the programme are in JavaScript syntax.

In fact, computers use some tools to translate JSX syntax to produce pure HTML, and we'll talk about these tools in a later article.

JSX Language Method

JSX syntax looks like HTML, but it's actually the syntax of JavaScript and React, so this is an explanation of JSX syntax.

className

In general HTML syntax, if we want to add a class to a tag, we would write it as follows

				
					<h1 class="hi">Hello World</h1>

However, in JSX syntax, to add any class to a tag, it is changed to className.

				
					<h1 classname="hi">Hello World</h1>

Nested element

The syntax of JSX is the same as HTML and supports nested formatting. JSX can also create its own components and turn them into nested formats.

				
					<AnimalList> <Dog /> <Cat /> <Bird /> </AnimalList>

Compound Expressions

JSX itself is also a JavaScript syntax, so it fully supports the JavaScript syntax we've talked about before, as well as the syntax in ES6, such as Template Literals, for example.

				
					const fruits = [&quot;Apples&quot;,&quot;Bananas&quot;,&quot;Cherries&quot;] const myElement = (
  <ul>
    <li>{fruits[0]}</li>
    <li>{fruits[1]}</li>
    <li>{fruits[2]}</li>
	 <div>`I Love ${fruits[0]}`</div>
  </ul>
);

In JSX, you can wrap JavaScript variables in curly braces, or you can use the Template Literals syntax to combine strings with JSX.

JavaScript Map

Since we can use JavaScript syntax, we can also use Array's built-in map function to integrate with JSX.

				
					const fruits = ["Apples","Bananas","Cherries"] const myElement = ( <ul> {fruits.map(element=>{ <li>{element}</li> })} </ul> ) ;

Multiple li's can also be grouped together by using the map function.

Building React Components with JSX

Finally, we'll explain how to build the components, using the code from the very beginning as an example.

				
					import React from 'react'; import ReactDOM from 'react-dom/client'; const myElement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);

The first and second lines are used to call the libraries already written by react and react-dom/client, and to use the built-in functions.

The const in the middle is used for declarations, and JSX syntax can be placed inside, where some HTML can be written, and when that's done you get an element called myElement.

Finally, we use the createRoot function in ReactDOM to create a DOM with "id="root", and then we put the myElement element we created into the root.

After going through the above process, you can build a React component.

Conclusion

This article explains a very important React syntax - JSX, which is also used to make it easier to build a React component. It also explains the principles of JSX, its syntax, and how to build a component.

Feel free to leave a comment if you have any suggestions or questions!

If you like this series of articles, please do not hesitate to click like and share it so that more people can see it!

Quote

React Vernacular Campaign 07-JSX

React Vernacular Campaign Series

How React Works - The React Vernacular Campaign 05

JavaScript Higher-Order Function - React Vernacular Campaign 04

JavaScript Async Await - React Vernacular Campaign 03

JavaScript ES6 Object - React Vernacular Campaign 02

JavaScript ES6 – React Vernacular Campaign 01