JSX stands for JavaScript XML. A javascript derivative synstax that is used to express visual elements in a React component.

JSX lets us describe visual elements in an HTML like syantax but internally it transforms that syantax into code that React actually uses.

JSX is nothing more than syntatic sugar for the createElement function from React Library.

The createElement function takes in these three arguments:

• Type of element or reference to a component
• Object where key-value pairs translate to props and their values
• Final argument for child components or content that needs to be inserted between the opening and closing tags of an element or a component

The transformation of code goes like this.

JSX —–> react-scripts —–> React.createElement()

react-scripts uses Babel & webpack.

Note: The attribute in the elements should be in camel case like the ‘className’ or ‘onClick’ etc.

Example Code

import React, { Component } from "react";
import './css/index.css';

const NotificationText = ({ text }) => (
    <div className="notification-text">{text || 'No Notification'}</div>
)

class Notification extends Component {

    state = {
        show: true
    };
    toggleDisplay = () => {
        this.setState({
            show: !this.state.show
        })
    }
    render() {
        return (
            <div className="notification-widget">
                <div className="toggle-btn" onClick={this.toggleDisplay}>N</div>
                {this.state.show ? (<NotificationText text={this.props.text} />) : null}
            </div>
        )
    }
}

export default Notification;