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. However, the built-in file structure consists of the components that are written in 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 easier to debug than the templates created with ‘React.createElement( ) and React.appendChild()‘ method.

Explanation of JSX Code Snippet:

• 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 .

Steps to Create the React Application And Installing Module:

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:

package.json:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

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’.

Example: Now write down the following code in the App.js file.

Javascript

// The App.js file
import './App.css';

function App() {
  let jsxElement=(
    <div className="App">
      <h1 className="heading">
          Welcome To GeeksforGeeks
       </h1>
      <p>Hello World</p>
    </div>
  );
  return jsxElement;
}

export default App;

CSS

/* App.css File */
.App {
    margin-left: 100px;
}

.heading {
    color: #308d46;
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: