React JSX

React JSX

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article
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!!!


Buy me a Coffee


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.

 
Share this

Impressum

TechStack Media was launched in the year 2020 to make the learning of web technologies easier and more fun.

My name is Bello Osagie, I am the founder of TechStack, and my focus is to give in-depth, senior-level knowledge of the course through a step-by-step approach. You will learn HTML, CSS, JavaScript etc.

You can find my posts on Dev.to, Medium, Hashnode, Hackernoon, and Blogspot

The approach is to first start with the basics, then advance to more topics. Lots of practical examples are added to make learning more easier. TechStack Media also includes videos apart from content writing to make sure you understand all the concepts in a particular topic or course. Contents are frequently updated, so you do not miss out on the latest technology.

If you need a contact me on any of my social media or email:

For exclusive web technology tutorials, join my patron page.

Proudly part of