Render Method in React Js

React Render method is a fundamental and required method for defining what a component should render to the DOM (Document Object Model).

It is a part of the component’s class or functional component and is responsible for specifying the structure and content that will be displayed on the web page.

Previous Topic – React App Folder Structure

Table of Contents

Render() Method

The render() is a special method that is required for a class-based component in React.

Suppose you create a custom class component. In this component, you have to use a specific section called render(). It’s not optional; you must use it there.

The job of the render() method is used to return a special type of code using JSX that mixes JavaScript and HTML and describes what your component should look like when it appears on the web browser.

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

React Element
Fragments
String and numbers
Booleans or null

render() returns JSX Element

The render method can return JSX elements to describe the component’s UI structure and content using HTML-like syntax within your JavaScript code. This is the primary purpose of this method.

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

render() returns a Single Root Element

The render method must return a single root JSX element. This means that all JSX element statements should be kept in a single-parent element.

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() returns Fragment

You can return React Fragments (<>…</>) or <React.Fragment>…</React.Fragment> to group elements without adding an extra DOM node. By using this, you can group multiple elements without a single parent element,

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() returns String

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

Example for string –

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

render() returns Numbers

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

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

render() returns Boolean

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

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

render() returns Boolean

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

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

render() returns Expressions and Values

You can use JavaScript expressions and values within JSX by putting them into curly braces {}. This is used to dynamically generate content based on props, state, or other variables.

class App extends Component {
render() {
  const message = 'Hello, React!';
  return (
    <div>
      <h1>{message}</h1>
      <p>This is a basic React component.</p>
    </div>
  );
}

}
export default App

render returns components

You can return other React components ( Either class or function components) from the render method. This is used to make your UI using smaller, reusable components.

class App extends Component {
render() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

}
export default App

Suggestion

These points cover many ways of what you can return from the render method in React JS. Keep in mind that the render method is where you define the initial UI structure of your component, and it can be dynamic, interactive, and customized depending on your application’s needs.

We’ve shared simple steps with you to code HTML. You’re now familiar with HTML and understand why it’s important to learn.

If you found this tutorial helpful, please share it with your friends so they can learn too