Inadequacies when using pure React

In the previous post, I showed you how to use React.createElement to create elements and components in React. With the createElement function, we are less extreme when creating elements than using Javascript. However, using React.createElement, it is difficult to visualize what the structure of the HTML file will look like. Therefore, React provides programmers with a simpler way, which is React JSX. With React JSX, you can create elements even faster and easily see the HTML structure of a component or a page. Let’s start learning React JSX.

Creating simple elements

Please pay close attention that our App file is not App.js but App.jsx. Here’s how to name the file to get started using React JSX. Remove all tags in this, you code as follows:

Here, we are creating a component named App. To create a component in JSX we need to return an element or a lot of elements. In this, I only return an element with the tag h1 and the content is Hello React from www.thichhoc.com . What it actually is, <h1>Hello React from www.thichhoc.com</h1> in JSX will automatically convert to React.createElement(‘h1’, {}, ‘Hello React from www.thichhoc.com ‘ ) for us. So, when using JSX, we will be stronger, no need to create elements by calling createElement method anymore and the code in is also more transparent. Looking at it is knowing what the HTML structure of the component will look like.

Here is the result, we have the desired h1 element and this element is inside the tag with the id root.

Multiple elements in 1 component

Now I want to create h1 as the greeting and the p tag as the description of the page, how will I do it?

Easy game, too simple. However, don’t be too happy because there will be mistakes. Since JSX needs to have a large element that wraps small elements when we create the component, with the above code, it will not run because there is no big element that wraps h1 and p. So we have to create one big tag, to be the parent element for the two elements we just created. And don’t forget the double (), that’s also a requirement from JSX.

As a result, you will see that the HTML structure will be exactly the same as the HTML structure in the App component, great.

Properties

So how to have attributes like id, class, …. We add as usual or add to the HTML tag. However, it should be noted that words that match the keyword will have to be changed a bit, for example, class must change to className.

Will give result like this

Component in component

In the previous post, I mentioned the problem that if I want to reuse the code with the greeting and description, I should separate it into another component. Otherwise it will be very difficult to change and easy to cause bugs and errors. To create another component in JSX we are the same as the app component. Use a function and return 1 or more elements. And to use the newly created component in the App component, we will open the tag, name the newly created component and close the tag. That’s how to call the created component to use.

Here we also have the problem of having a div tag in the Greeting component, I can’t remove it because React will give an error. In the previous post, I used React.Fragment, I can also use the same in JSX. However, JSX has a more compact way that you just need to open the empty tag and close the empty tag, that’s it.

Conclude

By using JSX, things will become much easier instead of having to use createElement from React. It’s all about JSX, good luck.

You can watch more videos here: https://youtu.be/09J2d9WzbIA