React Render Method – render() | ReactDOM.render()

React Render Method – We will discuss the rende() and ReactDOM.render() method with some examples and learn their concept and usage. These methods are very important to build a react application. So, you must know eveything  about it in detail.

What’s Before –

Before learning these methods, you should know about the React App Folder Structure

Render() Method in React js

The render() is a special type of method that must be defined in a class component.

When you create your own class by extending React component. then It will be mandatory to define the render method within your class.

Render() method can return any one of the following types –

• React Element
• Fragments
• String and numbers
• Booleans or null

render() can return React Element

You can use the render() method can return a react element by using both React.createElement() & JSX. So, first of all, let’s understand their concept. After that, we will see their example.

React.createElement() –

You can create react element by passing three parameters into the React.createElement(type, props, children).

Parameters –

• type – It accepts the type of HTML element or component ( ex- h1, p, button, div)
• props –  It accepts the properties object (ex – {style: {color: “red”}}
• children – It accept anything that will remain within the html element

Example –

React.createElement(“h1”, null, “Welcome to CodingStatus”)

Coding –

class App extends Component {
 render(){
  return React.createElement("h2",null, "Welcome to CodingStatus");
 }
}

export default App

JSX –

If you use JSX to create react element then you can write a simple html element with text.

Example –

<h1>Welcome to CodingStatus</h1>

Coding –

class App extends Component {
 render(){
  return <h2>Welcome to CodingStatus</h2>;
 }
}
export default App

render() can return a Group of HTML elements

You can also use the render() method to return a group of multiple HTML elements.

If you need to render more than one HTML element, then you have to keep them within a parent element. after that, you can return them through the render().

class App extends Component {
 render(){
  return (
    <div>
      <h1>Welcome to CodingStatus</h1>
      <p>Learn Coding from Scracth</p>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>ReactJs</li>
      </ul>
    </div>
  );
 }
}
export default App

render() can return Fragment

The render() method can return a fragment that contains a group of multiple HTML elements.

If you want to return more than one HTML element, then you will have to declare those elements within <React.Fragemnt></React.Fragment>.

Example –

<React.Fragment>
<h2>Welcome to CodingStatus</h2>
<p>You can learn coding to build your web applications</p>
</React.Fragment>

Coding –

class App extends Component {
 render(){
  return (
       <React.Fragment>
         <h2>Welcome to CodingStatus</h2>
        <p>You can learn coding to build your web application</p>
      </React.Fragment>
  );
 }
}
export default App

render() can return String and numbers

The render() method can return strings and numbers that will be declared within it.

Example for string –

class App extends Component {
 render(){
  return "Welcome to CodingStatus";
 }
}
export default App

Example for Number

class App extends Component {
 render(){
  return 997492;
 }
}
export default App

render() can return Boolean and null

The render() method can return a boolean that will be declared within it.

Example for boolean –

class App extends Component {
 render(){
  return true;
 }
}
export default App

Example for null –

class App extends Component {
 render(){
  return null;
 }
}
export default App

ReactDOM.render() Method in React js

The ReactDOM.render() method is used to render react elements or components to a DOM node.

If you want to display React elements of components on the web page, then you can use ReactDOM.render() method.

Syntax –

ReactDOM.render(ElementOrComponent, DOMnode)

• ElementOrComponent – It must be the react element or component at the first argument
• DOMnode – It must be a selector that can render the react element or component to the specified position in the DOM.

Example –

ReactDOM.render(<h1>Welcome to CodingStatus</h1>, document.getElementById(“root”))

ReactDOM.render() can render an Element

If you need to render an element to the DOM in react js, then you must use the ReactDOM.render() method.

Example –

reactElement = <h1>Welcome to CodingStatus!</h1>;
ReactDOM.render(reactElement, document.getElementById('root'));

ReactDOM.render() can render a Component

If you need to render a component to the DOM in react js, then you must use the ReactDOM.render() method

Example –

class App extends React.Component { 
    render() {return(<h1>Welcome to CodingStatus!</h1>);}
}
ReactDOM.render(<App />, document.getElementById('root'));

Render Element and Component using React APP

Now, You will learn to render an element and a component using the React APP and execute on the web browser. So that you can completely understand the usage of render() and ReactDOM.render() method.

Before getting started, You will have to create a react app project using NPM. After that, implement the following steps in the created app.

After successful setup your basic react app, you will get various folders & files by default. But you can use only the following files to implement your code

• src/App.js
• src/index.js
• public/index.html

You can remove unused code from the above files and write your custom code.

File Name – index.html

You can use this file for executing code of the following steps-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React render() and ReactDOM.render() method</title>
  </head>
  <body>
  
    <div id="root"></div>
  
  </body>
</html>

Render a React Element

To render a react element, assign it to a const variable el and export it.

File Name – App.js

const el =<h1>Welcome to CodingStatus</h1>
export default el;

File Name – index.js

import the required files react, react-dom & App.js, then render the react element to index.html file using ReactDOM.render()

import React from 'react';
import ReactDOM from 'react-dom';
import el from './App';

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

Render a React Component

• import React & Component from “react”
• Create an App class and extend from component
• define a render() method and return a group of HTML element

File Name – App.js

import React, { Component } from "react";

class App extends from Component {
 render(){
    return(
       <div>
         <h1>React Tutorial</h1>
         <p>Learn React from Scratch</p>
       </div>
    );
 }
}
export default App;

File Name – index.js

import the required files React, ReactDOM & App.js, then render the App component to index.html file using ReactDOM.render()

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
    <App />,
  document.getElementById('root')
);

My Suggestion

I hope you have understood the concept & usage of render() and ReactDOM.render() method. If you like this tutorial series and want more react tutorials, then do comment below and also share with your friends

What’s Next

Now, You can learn React Component in the upcoming tutorial