React JSX

This article is sponsored by Flutterwave - Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!

The elements in JSX are not from HTML, rather from React. The syntax easily helps to visualize UI in JavaScript. It also allows React to show more useful errors and warning messages.

With the different separate concerns of the components, you can easily reuse a component anywhere in your application. This reduces development time and repetition.

See the example below:

App.css

.App {
  margin: 20px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  line-height: 1.7; 
  display: inline-flex;
  width: 9.375rem;
  font-size: 1rem;
  font-family: sans-serif;
}

.App:hover {
  box-shadow: 0 1px 2px 3px #eee;
  transform: scale(1.01);
}

Person/Person.js

import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <header className="App-header">
                <h3>Name: {props.name}</h3>
                <h3>Skill: {props.language}</h3>
            </header>
        </div>
    );
};

export default Person;

App.js

import React from 'react';
import { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  render() {
      return  <Person name='Bello' language='React' />;
  }
}

export default App;

In the example above, we've only rendered a component in the web app. To render more components, reuse the component anywhere in the web app.

See the example below:

import React from 'react';
import { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  render() {
    return (
      <div>
        <Person name='Bello' language='React' />
        <Person name='Michael' language='Vue' />
        <Person name='Mary' language='Angular' />
      </div>
    );
  }
}

export default App;

The example above shows how a component is rendered thrice in a web app. Only attributes in each component are changed.

Benefits of JSX

These are the benefit you will notice in the code snippet above:

Reuseable

Defining a component once and reusing it reduces development time and repetition.

Debugging

If there's a problem with a component, it can easily be traced. If there's an error in the code snippet above, it is most likely in the Person/Person.js file since the template-like component is written once. It makes you write lesser prone errors.

Maintenance

Adapting to the Don't Repeat Yourself Principle often increases app performance (lesser bytes, more speed).

JSX Restriction

There are JSX rules you must adhere to when creating components.

Let's observe the restrictions below:
Person/Person.js

import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <header className="App-header">
                <h3>Name: {props.name}</h3>
                <h3>Skill: {props.language}</h3>
            </header>
        </div>
    );
};

export default Person;

Observations

• JSX uses camelCase property naming convention to name attributes.

For example, class becomes className in JSX.

• The return keyword wraps React elements in multiple. This is shown in the Person/Person.js or App.js file. If it's a returned React component element in a line, do away with the bracket (optional). App.js

import React from 'react';
import { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  render() {
      return  <Person name='Bello' language='React' />;
  }
}

export default App;

• JSX expression must have one root element. The <div className="App"></div> is the root element If the React elements is in multiple lines.

React Without JSX

It is possible to write React code without JSX. React without JSX is a nightmare!
See the example below:

Person/Person.js

import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <header className="App-header">
                <h3>Name: {props.name}</h3>
                <h3>Skill: {props.language}</h3>
            </header>
        </div>
    );
};

export default Person;

Let's rewrite the above code snippet without JSX.

Person/Person.js

import React from 'react';

const Person = props => {
    return (
        React.createElement("div", { className: "App" },
            React.createElement("header", { className: "App-header" },
                React.createElement("h3", null, "Name: ", props.name),
                React.createElement("h3", null, "Skill: ", props.language)))
    );
};

export default Person;

Conclusion
In conclusion, without JSX, JavaScript loses lots of its features.
It's a custom HTML (syntactical sugar), behind the scene converted to JavaScript.

Happy Coding!!!

Bello OsagieFollow

Hi, I am Bello Osagie, a tech blogger, writer, and web developer. I teach web development for free… Join me to learn, discover, and have fun coding together!

Techstack | Flutterwave

Techstack article, sponsored by Flutterwave. Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free! Also, you get a Flutterwave dollar barter card when you signup. Open an online store and take your business anywhere in the world.

Sign up today to get started

Support what I do and push me to keep making free content.