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 w3wiki </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:
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.