{

Learn React JSX guide with examples


In this blog post, We are going to Learn JSX tutorials with Syntax and examples usage in React application

Learn React JSX  Tutorials with examples

This tutorial covers the following topics of ReactJS

  • Introduction
  • JSX Syntax
  • Display react component to DOM
  • JSX CSS inline Styles
  • Attributes and props
  • Javascript Expressions
  • Javascript events
  • Comments usage
  • JSX Examples
  • jsx editors support
  • Naming Code Conventions

JSX Basic introduction

JSX is abbreviated as JavaScript XML.JSX is a JavaScript code with XML Syntax. This can be used in react applications for templating the content in JSX files. The syntax is similar to placing HTML code in JavaScript.

Content in the jsx contains tags.

Each tag has name attributes and children. JSX code needs a compiler or transpiler to convert to JavaScript. The Babel plugin needs to configure to compile it. These files are included in JavaScript or files with extension is JSX

Content can be created either placing HTML in JavaScript code of jsx file or using React.createElement

advantages

  • code is readable and easy to write When you place HTML code inside javascript
  • Typesafe and gives errors during the coding phase
  • Performance is good as the compilation phase converted to javascript

Display HTML or JSX elements into DOM

React provides the ReactDom class `render method to display JSX content to DOM. If any content exists in DOM, will be modified to new content.
The syntax is

ReactDom.render(JSX Content or React Component, DOM element)  

how to add comments to the jsx file

Comments can be added using /* comment */ enclosed in curly braces. Comments add either single comments and multi-line comments
Single line comments

const JSXString={/*This is Single line comments example  
  
*/}  

Multi-Line Comment Here is a comments example for adding multiple lines

{/*  
This multi-line comment example  
Display the header */}  

React CSS Styles

In normal HTML tags, you can use a class attribute for applying styles. In JSX, We will use className instead of class for styles className Usage

 render() {  
    return (  
      <div className="mystyle">  
      {/*  <label>{this.state.data}</label>  
        <button onClick = {this.updateState}>Click Me</button>*/}  
        <h1>Heading One</h1>  
        <h2>Heading Two</h2>  
        <h3>Heading Three</h3>  
      </div>  
    );  
  } 

Inline Styles usage Inline styles can be defined using the style properties attribute. The style contains the CSS styles object. In the below example, Defined my styles object.

this can be referenced in styles using {} syntax like style={mystyles}) of an HTML elements .

import React, { Component } from 'react';  
import './App.css';  
  
class App extends Component {  
  render() {  
    let mystyles = {  
      color:'green',  
      fontWeight:'bold'  
    };  
    return (<div style={mystyles}>This is CSS Inline Styles usage example</div>);  
  }  
}  
  
export default App;  

JSX attributes and props declaration In Html, attributes can be defined with inbuilt and custom attributes In the example below Defined HTML attribute data-customattribute Added Custom properties myprop=“myproperties”

  
  
import React, { Component } from 'react';  
import './App.css';  
  
class App extends Component {  
  render() {  
    return (  
  <div>  
    <h1>Header 1</h1>  
    <h2>Header 2</h2>  
    <h3 data-customattribute = "custom value" myprop="myproperties">Header 3 </h3>  
</div>);  
  }  
}  
  
export default App;  

Javascript events usage in JSX In JSX, all HTML attributes and events are camel-cased. Meaning an onclick event in javascript becomes an onClick event in JSX Here is an example of an Events example in JSX. Event handlers are functions defined. This will be referenced and assigned using {} syntax assigned to Javascript events

import React, { Component } from 'react';  
import './App.css';  
  
class App extends Component {    
  render() {  
    var clickEventFunction = function clickEvent() {  
      console.log('Click Event Fired');  
    };  
    
    return (  
  <div>  
    <h1>Header 1</h1>  
    <h2>Header 2</h2>  
    <h3 onClick={clickEventFunction} >Header 3 </h3>  
</div>);  
  }  
}  
  
export default App;  

JSX Hello world Example

JSX can contain simple tags as well as nested tags Simple Hello World Example

  
const JSXString=<div>Hello World</div>  

Multiple or Nested Elements JSX
If you are adding multiple elements, You need to be enclosed in a container or parent element. If there is no parent element, it gives a compilation error JSX expressions must have one parent element In the below examples, We have two header elements that have parent elements like div Valid JSX code

import React, { Component } from 'react';  
import './App.css';  
  
class App extends Component {  
  render() {  
    return (  
  <div>  
    <h1>Header 1</h1>  
    <h2>Header 2</h2>  
</div>);  
  }  
}  
export default App;  

Invalid JSX code which compilation error JSX expressions must have one parent element

  
import React, { Component } from 'react';  
import './App.css';  
  
class App extends Component {  
  render() {  
    return (  
    <h1>Header 1</h1>  
    <h2>Header 2</h2>  
);  
  }  
}  
export default App;  
  

Javascript expressions usage in JSX

Expressions can be used in JSX content. Expressions can be enclosed within {} syntax

 import React, { Component } from 'react';  
import './App.css';  
  
class App extends Component {  
  render() {  
    return (  
  <div>  
    <h1>Header 1</h1>  
    <h2>Header 2</h2>  
    <h3>Header 3 - {4+5}</h3>  
</div>);  
  }  
}  
  
export default App;

React JSX coding naming conventions

These are naming conventions followed as per ESLint conventions

  • React components are saved jsx extension
  • File names follow Pascal names like MyComponent.jsx
  • Always use self close tags which has no children elements like instead of
  • JSX attributes must use double quotes, for JavaScript, you can use single quotes prop names follows camelCase rules
  • Each tag should have closing tag- for example like or Self closing tags should be closed like in HTML tags works without closing tag, in JSX should be written like , Otherwise it throws compilation error JSX element br has no corresponding closing tag

JSX Editors or IDE Support

To speed up the development, We need to have many features like AutoComplete, Debugging, Code Syntax, and many features required. JSX has support for all popular editors like below

  • Visual Studio Code Editor - React Dev Tools
  • Atom Editor
  • Nuclide
  • Sublime Text Editor
  • Webstorm IDE
  • Eclipse IDE for React

Conclusion

This article discussed JSX’s basic guide in React framework.

Hope you like my post.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.