Explain basic code snippet of JSX

In this article, we are going to learn about the basic code snippets of react JSX. The full form of the word JSX is JavaScript-XML. This is an extension of the syntax of the JavaScript language. JSX allows us to implement the HTML code snippets into React directly with very few changes in the syntax. 

Significance of JSX: In terms of syntax, it is not mandatory to write JSX code in react. But the built-in file structure consists of the components that are written simple JSX code. The developers find it useful as the JSX code shows more useful error and warning messages while working with the UI inside the JavaScript project. The JSX code also looks cleaner and easy to debug than the templates created with ‘React.createElement( ) and React.appendChild()‘ method.

Now we are going to create a JSX component inside a react application look at the detailed explanation of the component.

Explanation of JSX Code Snippet: Now we are going to learn the basic properties of JSX code snippets.

• Inserting Multiline HTML Code : While inserting the HTML code in a JSX element , if the HTML code is multi-liner then put the HTML code inside a parenthesis. You can clearly see in the following example that the HTML code inside the ‘jsxElement’ is enclosed with a parenthesis.
• One top level element : If there are multiple elements in the HTML code snippet then they must be wrapped with a parent element. In our example we have wrapped our <h1> and the <p> element with a <div> element.
• ‘className’ attribute replacing ‘class’ : The conventional ‘class’ attribute of HTML is similar to the ‘class’ keyword of JavaScript. So to avoid any collision the HTML ‘class’ attribute is renamed to ‘className’. The ‘className’ attribute replaces the ‘class’ attribute and does the same work as the ‘class’ attribute.
• Elements must be closed : While writing HTML it is not necessary to close all the tags, at least the system will not throw any error if some tags are not closed. But in case of JSX you cannot leave an element without closing all the tags. It will throw an error .

Example: 

Creating react application:

Step 1: Create a React application using the following command:

npx create-react-app name_of_the_app

Step 2: After creating the react application move to the directory as per your app name using the following command:

cd name_of_the_app

Project Structure: It will look like the following.

Creating the JSX Element: Now we are going to create a JSX Element inside the App component of the App.js file. The steps are discussed below.

• Clear everything inside the App component of the App.js file.
• Create a new variable named ‘jsxElement’ inside the App component.
• Set the value of the ‘jsxElement’ variable to the HTML code snippet you want to display. If the code snippet is multi-liner, make sure that the HTML code snippet is inside a parenthesis.
• Return the ‘jsxElement’ variable from the App component.
• The ‘jsxElement’ variable is an example of a basic JSX element. And the HTML inside the JSX element is the example of a ‘basic code snippet of JSX’.

App.js File

App.css File: The App.css file is imported at the top. It is the default ‘App.css’ file that comes up with the react project structure. After creating the JSX element we have modified it and added our own stylings inside.

Step to run the application: Open the terminal and type the following command.

npm start

Output: