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

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 <br/> instead of <br></br>
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 <div> <div/> or <div> </div> Self closing tags should be closed like <br> in HTML tags works without closing tag, in JSX should be written like <br></br>, 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.

Learn React JSX guide with examples

#JSX Basic introduction

#Display HTML or JSX elements into DOM

#how to add comments to the jsx file

#React CSS Styles

#JSX Hello world Example

#Javascript expressions usage in JSX

#React JSX coding naming conventions

#JSX Editors or IDE Support

#Conclusion