React JSX
Tags: react, javascript, jsx, components
Published: 2020-12-28 20:42:27

###### *This article is sponsored by [Flutterwave](https://dashboard.flutterwave.com/signup?referrals=RV686851) - 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**
```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**
```jsx
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**
```jsx
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:

```jsx
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**
```jsx
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**
```jsx
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**
```jsx
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**
```jsx
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.

{% stackblitz react-awvgon %}

**Happy Coding!!!**

<a href="https://www.buymeacoffee.com/bellotech" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

{% user bello %}
#### 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](https://dashboard.flutterwave.com/signup?referrals=RV686851). Open an online store and take your business anywhere in the world.

{% youtube ClXVUM3Rf7A %}

[Sign up today to get started](https://dashboard.flutterwave.com/signup?referrals=RV686851)

[Support](https://dashboard.flutterwave.com/donate/3lo9klliqwbu) what I do and push me to keep making free content.