React Tutorial For Beginners - React Element with and without JSX

Introduction

React is an Open Source JavaScript library. It is used for developing scalable, simple, and fast front-ends for web & mobile applications. It handles the view layer of mobile and web applications. React is flexible and can be used in any application.

Description

In this article, We learn about React elements. Also, we know the steps to create React Elements and how to render React Elements. Difference between React with JSX and React without JSX. Also, How to work on React on both Desktop and Mobile platforms.

Please visit the React articles to understand the beginning.

The below React articles are for a basic understanding of React sample applications.

What is React Element?

React Elements are the smallest building blocks of React applications.
It is a plain object describing what we want to appear in terms of the DOM nodes.
An Element can be created by using JSX or React without JSX.
React Element is more flexible and cheap than DOM elements.

In this article, we will learn.

What are React Elements
How to Create React Elements
Rendering Elements using Container

Working on reacting with JSX

Open the React project using Visual Studio Code.

Visual Studio Code

Let's create our first React Element using JSX. Open the index.js file from the src folder.

We want to create an element of the h1 type.

Code Ref index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const element = <h1 className="testApply">Hello, world</h1>;

ReactDOM.render(element, document.getElementById('root'));

We have created an Object of type h1 and assigned it to a variable called an element. This element should be rendered into the Browser DOM, and for that, we need a container.

const element = <h1>Hello, world</h1>;

This is not a string, but this is a jsx convention. The above-created Element can be rendered into it By writing.

ReactDOM.render(element, document.getElementById('root'));

This method renders this element into a container of id = root. There is a div with id as the root; we will use that div as our container.

Open Index.html.

Code Ref Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

In index.html, that div id is defined.

<div id="root"></div>

Code Ref index.css

.testApply{
border: 3px solid red; 
}

Let's say we want to assign some styles to this element. Create a CSS class with the class name as a test class in index.css. Apply this class to the element using the className attribute.

const element = <h1 className="testApply">Hello, world</h1>;

An Element contains type and properties, here h1 is the type and this element contains className as property. An Element can be as simple as the one we have created or an element can contain elements inside it.

Output

Run React Application using the command in VS Code terminal >> npm start.

Then we can see that the React application is compiled successfully.

React application

Hello world

Here, We create two elements and try to render both elements.

Code Ref index.js

Using the same container root, We implement 2 div elements.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const element = <h1 className="testApply">Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

const element1 = <h1 className="testApply">Hello, world One</h1>;
ReactDOM.render(element1, document.getElementById('root'));

Here, the last element created has precedence over the element that was created, and it will replace other elements.

Output

Output

Then modify index.js by adding a new container called app.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const element = <h1 className="testApply">Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

const element1 = <h1 className="testApply">Hello, world One</h1>;
ReactDOM.render(element1, document.getElementById('app'));

Code Ref index.html

<div id="root"></div>
<div id="app"></div>

If you want to display both elements then go to index.html and add another div with a new container called app.

 <div id="app"></div>

In index.js, add this container.

ReactDOM.render(element1, document.getElementById('app'));

These elements are rendered using different containers called root and app.

Output

Root app

How to render both elements using a single container called root?

Remove this container from index.html.

<div id="app"></div>

Code Ref index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const element = (
  <div className = "testApply">
    <h1>Welcome to React Programming World</h1>
    <h2>Understanding React Rendering…</h2>
  </div>
);
ReactDOM.render(element, document.getElementById('root'));

I am creating an Element thatcontains div and div has a h1 tag and h2 tag and we render this element to the div container.

Let's save these changes and check the response in the browser.

Output

Browser

The above code we have written using JSX will be compiled into Plain Javascript using Babel. JSX is not a requirement for using React.

Working on react without JSX

Using React without JSX is especially convenient when you don’t want to set up compilation in our build environment. A React Element can also be created by using Javascript.

Here we create the element using the below in index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const element = React.createElement("h1",null,"Welcome to React Programming World");
ReactDOM.render(element, document.getElementById('root'));

The createElement method takes some parameters. The first one is the type of Element you want to create like h1 or h2 or div.
The second parameter specifies the properties you want to apply to this element.
The third one represents the Child Element or Elements that has be placed inside the Parent one.
The above line of code tells React that we want an h1 element without properties or attributes applied, and Hello World is the child in it.

Output

Attribute

Here we create elements without JSX with CSS apply. If we want to apply the CSS class we have created to this element, let's add a Property called className.

Code Ref index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const element = React.createElement("div",{className:"testApply"},'Hello World');
ReactDOM.render(element, document.getElementById('root'));

Let's save this change and see the output in the browser.

Output in browser

Now, we want to create one h1 tag and one h2 tag inside the div element. To get this, we have to pass two elements as child elements to this div. So let's go ahead and make changes.

Code Ref index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const element=React.createElement("div",{className:"testApply"},
React.createElement("h1",null,'I am from h1 Tag. Welcome by Satyaprakash Samantaray'),
React.createElement('h2',null,'I am from h2 Tag. Welcome by Kulu'));
    
ReactDOM.render(element, document.getElementById('root'));

Let's save this change and see the output in the browser.

Output

Difference between React with JSX, react without JSX

You can play with the React application Mobile platform using below steps.

Let's open the below URL and start coding.

React using Codepen

Then open the below URL to add CDN links that React can understand the syntax. Select JavaScript Preprocessor: babel.

React CDN Links

https://unpkg.com/react@18/umd/react.development.js
https://unpkg.com/react-dom@18/umd/react-dom.development.js

The above process is already described in part 2 of the React article. Please visit.

Check HTML

 <div id="root"></div>

CSS

.testApply{
border: 3px solid red; 
}

and Javascript sections.

const element=React.createElement("div",{className:"testApply"},
React.createElement("h1",null,'I am from h1 Tag. Welcome by Satyaprakash Samantaray'),
React.createElement('h2',null,'I am from h2 Tag. Welcome by Kulu'));
    
ReactDOM.render(element, document.getElementById('root'));

Output

Untitled

The above code is in JSX and it is converted into plain js using the Babel compiler.

React Without JSX using Codepen

Select JavaScript Preprocessor: none

JavaScript Preprocessor

The code below is without the Babel compiler, and it is written in JS.

HTML

<div id="app">

Javascript

const element = React.createElement(
  "h1",
  null,
  "Welcome to React Programming World"
);

ReactDOM.render(element, document.getElementById("app"));

Output

HTML

We write code directly in JavaScript. It does not need any extra compilation. I created a React Element without using JSX and rendered it in the container. The code can be executed without setting Babel as a Javascript preprocessor.

Here the below method is treated as JavaScript.

const element = React.createElement(
  "h1",
  null,
  "Welcome to React Programming World"
);

Summary

In this write-up, we have learned the details below.

What are React Elements
How to Create React Elements
Rendering Elements using Container
Difference between React with JSX and React without JSX

Thank You & Stay Tuned For More!