How to render react application

In src folder created during the installation Delete eveything.

Then add the following files index.js and App.js to build up the basic structure of your react applicaion.

Add a index.js file and add the follwoing code

import React from ‘react’;
import ReactDOM from ‘reactdom’;
import App from ‘./App’;
import * as serviceWorker from ‘./serviceWorker’;
ReactDOM.render(  <React.StrictMode> 
   <App />
  </React.StrictMode>,  
document.getElementById(‘root’)
);
serviceWorker.unregister();

Here ReactDOM is a model that allowes to update the output of render every second on the display.
This make render on to the screen every time there is any change to the states or components took place.

Example Below:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(    element,    document.getElementById('root')  );}

setInterval(tick, 1000);

Try it on CodePen

WE then imported an App from ‘App.js’ which is not yet created so lets create it.

Then add a App.js file in the same src folder .

App.js is a componet so it’s name started with a capital letter.

code:

import React from 'react'
export default function App() {    return (      
             <div>        
            </div>  
  )}

What ever we type in between this div tags gets rendered and displayed in the page.

WE can import more components in this App.js file and ebbed them to form a amazing site.

TO run this code type hi or enyting in between div elements and type npm start in visual studio terminal.

Code to run live server to display our site :

npm start