REACT JSX AND RENDER FUNCTION

Hi. Today, we are going to discuss about React JSX and the React JS render() function. If you are reading about react for the first time, I recommend you check out our article on getting started with React JS. Subscribe on our YouTube channel to get the video content of our articles here.

JSX

Having a good understanding of JSX is very important as it applies directly in React JS and equally React Native which we will cover subsequently. 

JSX stands for JavaScript and XML which is a standard to write HTML in React JS or JavaScript code. It might look strange but you will get it later on! 

Even though there is an alternative for JSX, many developers consider it easier when working with React JS and React Native. Coding React JS apps without JSX is really challenging.

Talking about JSX, lets look at an example:

const greetings = <h1> hello, world </h1>;

The code above can be overwhelming right ?... Yes! and it is called JSX. HTML in JavaScript.

Also, JavaScript expressions can be passed along with the HTML code or tags in curly braces {}. For example;

const name = trycoder;

const greetings = <h1> hello, {name} </h1>;

<h1> hello I am {5} today

The above codes still work perfectly. If your html elements contain children, you can represent them this way;

const greetings = (

<div>

<h1> I love JSX </h1>

<h2> JSX is cool </h2>

);

Are you getting the point?...!

When working with JSX, make sure you have a top element or parent element, else React will throw an error.

Render () Function

Now let’s talk about the render () function. The render function actually enables React JS to display the webpage that ought to be displayed. It is very simple to understand as it takes just two arguments;

• The HTML code and the
• Root Node

The HTML code is actually what will be rendered on the webpage which in most cases is represented as JSX while the root node is the HTML element (like a container) where the HTML code will be rendered.

Let’s look at an example.

From the React JS installation boiler-plate, open the src folder and adjust the codes in the file index.js to what you see below.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
const name = "trycoder.com";
const greetings = 
hello, welcome to {name} 
ReactDOM.render(greetings, document.getElementById('root'));
 

OUTPUT

Thanks for coding with me.

Bye!