Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Rendering elements in React.js
The smallest building blocks of React applications are the elements. Example of an element is −
const message = <h1>Welcome, Steve</h1>;
React DOM updates the actual DOM with the converted react elements. React components are made up of elements.
Rendering element on DOM
We will have a parent div element in the main html file . This div can be called as root.
<div id=”app”> </div>
ReactDOM manages everything which is inside the app div. We can add multiple such an isolated div in applications if required.
To render the element it will be passed to the ReactDOM render method −
const message = <h1>Welcome, Steve</h1>;
ReactDOM.render(message, document.getElementById('app'));This will display a message − Welcome, Steve on browser
React elements are immutable that means once created it cannot be changed. Change will create a new element and update the UI.
Displaying current time
Example
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
function getCurrentTime() {
const currentTime = (
<div>
<h1>Welcome !</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(currentTime, document.getElementById('root'));
}
setInterval(getCurrentTime, 1000);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();output
Updated on: 28-Aug-2019
605 Views
Advertisements