Skip to content

Spoke Right

Education for everyone

https://spokeright.com
Primary Menu
  • Home
  • Our Services
    • Translation
    • Interpretation
    • Transcription
    • Voice-Over
    • Proofreading
    • Content writing
  • Free Education
    • Learn Android Studio
    • Learn Python
    • Learn MongoDB
    • Learn MySql
    • Learn React
    • Montessori Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
    • TicTac
    • Checkers
    • Foosball
    • Billiards
    • Master Chess
    • Logic Game
  • Contact Us
Download Now
  • Home
  • Learn React
  • What is JSX in React JS
  • Learn React

What is JSX in React JS

Spoke Right December 10, 2022 2 min read

React JSX

React JSX
JavaScript XML or JSX is an XML or HTML like JavaScript syntax extension used by ReactJS. Processed into JavaScript calls of React Framework, it extends the ES6. This allows the HTML-like text to co-exist with JavaScript react code. This syntax is also used by the preprocessors with the purpose of converting the HTML-like syntax into standard JavaScript objects.

Nested Elements:
Nested Elements in JSX are needed to wrap with one container element.

Example: div as a container element.
App.JSX:

import React, { Component } from 'react';  
class App extends Component{  
render(){  
return(  
<div>  
<h1>HELLO</h1>  
<h3>WORLD</h3>  
</div>  
);  
}  
}  
export default App;

Output:

HELLO
WORLD

Explanation: Here the container element div contains two nested elements within it.

JSX Attributes:
JSX uses camelcase naming convention for attributes and also allows the user to create his/her own custom attributes. To specify attribute values in JSX, there are two ways:

As String Literals: Here the values of the attributes are specified in double-quotes.
Example:

import React, { Component } from 'react';  
class App extends Component{  
render(){  
return(  
<div>  
<h1 className = "first" >Hello World</h1>  
<p data-demoAttribute = "second">Have a great day!</p>  
</div>  
);  }  }  
export default App;

Output:

Hello World
Have a great day!

As Expressions: Here, the values of attributes are specified as expressions using curly braces {}.

Example:

import React, { Component } from 'react';  
class App extends Component{  
render(){  
return(  
<div>  
<h1 className = "first" >{100+10}</h1>  
</div>  
);  }  }  
export default App;

Output:

110

JSX Comments:
In JSX comments begin with /* and ends with */. The comment is then wrapped in curly braces {}.

Example:

{/* Comment in JSX */}

JSX Styling:
Inline-styles are recommended for React.

    EXAMPLE

    import React, { Component } from 'react';  
    class App extends Component{  
    render(){  
    var X = {  
    fontSize: 60,  
    fontFamily: 'Courier',  
    color: '#003300'  
    }  
    return (  
    <div>  
    <h1 style = {X}>Hello World</h1>  
    </div>  
    );  
    }  }  
    export default App;

    Output:

    Hello World

    JSX features:

    • While translating the code to JavaScript, JSX performs optimization and is thus faster than regular JavaScript.
    • React uses components that contain markup and logic.
    • Most of the errors can be detected at the time of compilation and are thus type-safe.
    • Creating templates is also an easy process.

    Continue Reading

    Previous: What is React and what are the features of React
    Next: What is component and props in React

    Related Stories

    Which is Difference Between AngularJS And ReactJS
    1 min read
    • Learn React

    Which is Difference Between AngularJS And ReactJS

    December 16, 2022
    What is higher-order component in Reactjs
    2 min read
    • Learn React

    What is higher-order component in Reactjs

    December 16, 2022
    How do I create a table in ReactJS
    2 min read
    • Learn React

    How do I create a table in ReactJS

    December 16, 2022

    This AD Will support Us

    Support Us

    Coding Ustad LTD Support
    Coding Ustad LTD Support

    Coding Ustad LTD

    Coding Ustad LTD
    Coding Ustad LTD

    Recent Posts

    • Imran Khan, Former Prime Minister, Takes TikTok by Storm with Record-Breaking Followers and Likes
    • How to Install Node.js and npm on CentOS 7
    • How to Install Node.js and npm on CentOS 7
    • How to Install CentOS Web Panel (CWP) on CentOS 7
    • The Power of Marketing in Real Estate: A Guide to Boost Your Business

    Get free Hosting

    Hostens.com - A home for your website
    Ahsan Nadeem

    You may have missed

    Imran Khan, Former Prime Minister, Takes TikTok by Storm with Record-Breaking Followers and Likes
    2 min read
    • Spoke Right News

    Imran Khan, Former Prime Minister, Takes TikTok by Storm with Record-Breaking Followers and Likes

    July 18, 2023
    How to Install Node.js and npm on CentOS 7
    4 min read
    • Coding Ustad LTD
    • Education for Everyone

    How to Install Node.js and npm on CentOS 7

    May 3, 2023
    How to Install Node.js and npm on CentOS 7
    4 min read
    • Coding Ustad LTD
    • Education for Everyone

    How to Install Node.js and npm on CentOS 7

    May 2, 2023
    How to Install CentOS Web Panel (CWP) on CentOS 7
    3 min read
    • Coding Ustad LTD
    • Education for Everyone

    How to Install CentOS Web Panel (CWP) on CentOS 7

    May 2, 2023
    • Home
    • Our Services
    • Free Education
    • Spoke Right News
    • Earn Online
    • Classic Games by Spoke Right
    • Contact Us
    Copyright © All rights reserved. | MoreNews by AF themes.