Introduction to React Element

In this Article, we will understand about what are React elements, how do we create Elements and how do we render Elements 

Elements are the smallest building blocks of React apps. An element specifies what should be there in our UI. An Element is a plain object describing what we want to appear in terms of the DOM nodes.

Creating a React Element is Cheap compared to DOM elements.  An Element can be Created by using JSX or React without JSX. Lets create our first React Element using JSX. Open index.js file from src folder.

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

We have created an Object of type h1 and assigned it to a variable called as element. This element should be rendered into the Browser DOM, and for that we need a container. Open Index.html and there is a div with id as root and we will use that div as our container.

The above created Element can be rendered into it By writing 

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

Lets say we want to assign some styles to this element. Create a css class with classname as testclass in index.css. Apply this class to the element using className attribute.

const element=<h1 className="testClass">Hi...</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.

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

  const element = (

    <div>

      <h1>Welcome to React Programming World</h1>

      <h2>Understanding React Rendering…</h2>

    </div>

  );

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

Lets save these changes and observe the response in the browser. 

The above code we have written using JSX would be compiled into Plain Javascript using Babel. JSX is not a requirement for using React. 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 

const element = React.createElement("h1",null,'Hello World');

CreateElement method takes few parameters. First one is the type of Element we want to create like h1 or h2 or div. Second parameter specifies the Properties we want to apply to this element. 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 a h1 element without properties or attributes applied and Hello World being the Child in it.

If we want to apply the css class we have created to this element then, lets add a Property called className 

const element = React.createElement("div",{className:"testClass"},'Hello World');

Lets save this change and see the output in the browser. 

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

const element=React.createElement("div",{className:"testClass"},

React.createElement("h1",null,'Welcome to Pragim Technologies'),

React.createElement('h2',null,'I am from h2 Tag'));

Lets save this change and see the output in the browser. 

To understand the difference between React with JSX, react withour JSX much better, lets open https://codepen.io . Click Start Coding. Create a div tag in html section with id as lets say app.

Create a React Element without using JSX and render it in the container . Lets refer to the two Javascript files which are needed to run React Code. The code can be executed without setting babel as Javascript preprocessor.

For Video Reference