SkillsBattle HOME
JQUERY REACT SASS Online HTML Editor

React Tutorial

React Home React Intro React Get Started React ES6 - ES6 Classes - ES6 Arrow Functions - ES6 Variables - ES6 Array Methods - ES6 Destucturing - ES6 Spread Operator - ES6 Modules - ES6 Ternary Operator React Render HTML React JSX React Components React Class React Props React Events React Conditionals React Lists React Forms React Router React Memo React CSS Styling

React Hooks

What is a Hook? useState useEffect useContext useRef useReducer useCallback useMemo Custom Hooks

React Redux

What is a Redux? React Redux Example

React Exercises

React Quiz

React Render HTML

<< Prev Next >>

Rendering is the process of transforming your react components into DOM (Document Object Model) nodes that your browser can understand and display on the screen.

DOM manipulation is extremely slow. In contrast, manipulating React elements is much, much faster. React makes the most of this by creating a virtual representation of what the DOM should look like called the Virtual DOM

The Render Function

React library has two function:

  • Class components
  • Functional Components

Class components uses render function. The ReactDOM.render() function takes two arguments, HTML code and an HTML element.

Purpose of render()

  • React renders HTML to the web page by using a function called render().
  • The purpose of the function is to display the specified HTML code inside the specified HTML element.
  • In the render() method, we can read props and state and return our JSX code to the root component of our app.
  • In the render() method, we cannot change the state, and we cannot cause side effects( such as making an HTTP request to the webserver).

Rendering an Element into the DOM

There is another folder in the root directory of your React project, named public". In this folder, there is an index.html file.

There is a single <div> in the body of this file. This is where our React application will be rendered.

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

We call this a “root” DOM node because everything inside it will be managed by React DOM.

Display a paragraph inside an element with the id of “root”:

ReactDOM.render(<p>Hello</p>, document.getElementById('root'));

The HTML Code

The HTML code uses JSX which allows you to write HTML tags inside the JavaScript code:

Write a variable that contains HTML and display it in the "root" node

import React from 'react';
import ReactDOM from 'react-dom';

const myelement = (
<h1> I love this React Library tutorial !.</h1>
<p> I have created my first React App. By the SkillsBattle Tutorials.</p>
);

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

Output :

React Conditional Rendering

We can create multiple components which encapsulate behavior that we need. After that, we can render them depending on some conditions or the state of our application. In other words, based on one or several conditions, a component decides which elements it will return. In React, conditional rendering works the same way as the conditions work in JavaScript.

Let's handling a login/logout button. The login and logout buttons will be separate components. If a user logged in, render the logout component to display the logout button. If a user not logged in, render the login component to display the login button. In React, this situation is called as conditional rendering.

Way to do conditional rendering in React :

  • if
  • ternary operator
  • logical && operator
  • switch case operator
  • Conditional Rendering with enums

if : IF the condition is true, it will return the element to be rendered.

Syntax :- True


Ternary operator : The ternary operator is used in cases where two blocks alternate given a certain condition. This operator makes your if-else statement more concise. It takes three operands and used as a shortcut for the if statement

Syntax : - condition ? true : false


Logical && operator : This operator is used for checking the condition. If the condition is true, it will return the element right after &&, and if it is false, React will ignore and skip it

Syntax :- condition &&
(10 > 5) && alert('This alert will be shown!')


Switch case operator : Sometimes it is possible to have multiple conditional renderings. In the switch case, conditional rendering is applied based on a different state.

Conditional Rendering with enums : In the below example, we have created a stateful component called App which maintains the login control. Here, we create three components representing Logout, Login, and Message component. The stateful component App will render either or depending on its current state.

<< Prev Next >>