For a basic JSX introduction you can check our previous article, Introduction to JSX.

JSX is actually syntactic sugar for defining components using the React.createElement(component, props, …children) function and positioning them inside the markup.

This is how you write a simple component in JSX and how Babel compiles it:

<div className="container">
    Hello World!
</div>

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

This is how you define a Class Component in React using JSX:

import React, {Component} from 'react';

class MyComponent extends Component {
    render() {
        return (
            <div className="container">
                Hello World!
            </div>
        )
    }
}

export default MyComponent;

This is how you define a Functional Component in React using JSX:

import React from 'react';

function MyComponent () {
    return (
        <div className="container">
            Hello World!
        </div>
    )
}

export default MyComponent;

It’s preferable to use Functional Components since it’s much easier to read/write and understand.

As you see from the code, the component created is called MyComponent, it’s a best practice that the filename to be identical MyComponent.js.

Scopes

When you are using JSX code, React must always be in scope, since it’s getting compiled into calls to the React.createElement function.

Also, if you component is using another component, the that React component must as well be in scope, for example:

import React from 'react';
import MyOtherComponent from './MyOtherComponent';

function MyComponent () {
    return (
        <div className="container">
            <MyOtherComponent />
        </div>
    )
}

export default MyComponent;

Dot Notation for React Components with JSX

You can define your components in an object, and render then by calling the [object].[your-component], as you can see below.
However, would not recommend using it like this in a production ready application, since it’s more confusing.
Separating components per each file helps with the separation of concerns, each component that you build should be responsible of one thing and one thing only.

import React from 'react';

const MyComponents = {
    DatePicker: function DatePicker(props) {
        return <div>Imagine a {props.color} datepicker here.</div>;
    },
    MyComponent: function MyComponent() {
        return <div>Hello World!</div>
    }
}

function MyListOfComponents() {
    return (
        <div>
            <MyComponents.DatePicker color="blue" />
            <MyComponents.MyComponent />
        </div>
    );
}

export default MyListOfComponents;

Component Types

Built-In Components

When you are using any HTML tag like , or as the start of your component, it must start with a lower case. The string is the passed to the React.createElement as ‘div’, ‘span’ or ‘p’.

User-Defined Components

They should always start with a capital letter, so that you know it refers to a component you’ve build yourself and is not a built-in one.

Embedding Expressions in JSX

You can easily define variables in JS and use the inside your JSX component, just surround the name of the variable in curly braces and then you can take advantage of the JS power.

import React from 'react';

function MyComponent () {
    const name = 'John Doe';
    const age = 10;

    return (
        <div className="container">
            Hello World! My name is {name} and my age is {age*2}
        </div>
    )
}

export default MyComponent;

Empty tags can be closed immediately with />.
Same with self-closing HTML tags (img, br and others):

return (
        <div className="container">
            Hello World!
            <br />
            My name is {name} and my age is {age}
        </div>
    )