Bootstrap is an external library that contains a .css file and .js file to provide a responsive web layout. responsive means, Layout which is compatible with Mobile Screen, Desktop Screen, TV Screen, Tablet Screen, Projector, etc. Bootstrap contain set of CSS block which will be called under HTML element. for example, if we want to create two different partitions which is compatible with all device. We can use bootstrap in react-js using three different ways:- 1)  using CDN on index.html 2)  Download the bootstrap plugin and put it into the public folder 3)  install bootstrap using npm 1)  using CDN on index.html:- copy the complete link of bootstrap on index.html file of the public directory <! DOCTYPE   html > < html   lang = "en" >    < head >      < meta   charset = "utf-8"   />      < link   rel = "icon"   href = "%PUBLIC_URL%/favicon.ico"   /> ...

The list is the collection of elements of similar and dissimilar type values, it is similar to a javascript array. We should always display list elements using a map(). Syntax of List:- var = [item1,item2,item3,item4,...] Syntax to display List elements:- const name = var.map((data)=>{        return data;    });    console.log(name);  Now I am explaining a Live example of List in React-JS:- Write the complete code on app.js file import   './App.css' ; const   myList  = [ 'C' ,  'CPP' ,  'JAVA' ,  '.NET' ,  'PHP' ];        const   listItems  =  myList . map (( myList ) => {         return   < li > { myList } </ li > ;        });       function   App () {       return  (        ...

Routing is used to create a navigation path in react js application. now I have created two-component one for addition and another for prime number and navigate this component from the app.js file. React JS navigation is mandatory, without navigation we can not create a multi-page web application. React JS provides react-router-dom to implement navigation properties from one component to another. step for navigation 1)  Open a terminal and write the following command npm install react-router-dom 2)  Complete code of app.js file import logo from './logo.svg' ; import './App.css' ; import React , { Component }   from 'react' ; import ReactDOM from "react-dom" ; import { BrowserRouter , Routes , Route } from "react-router-dom" ; import { Design } from './Design' ; import { Info } from './Info' ; import Hello   from './Hello' ; import Gallery   from './Gallery' ; import Services   from ...

React JS Provide Separate Component for Header, Middle and Footer part that can be easily called into the application React-JS especially created to design single-page applications but now we can implement multiple web page-based applications using React JS. 1)  Integrate Single Page Template in React-JS:- 1.1)  Create an HTML page or download a free CSS template for a one-page template. 1.2)  put all site content (img,js,css, assets) into public folder 1.3)  create a component and integrate all Html content into under body tag  under render() 1.4)  Html head section CSS and js file or footer section js file should be liked on index.html page of react-js Complete Code of App import   React   from   "react" ; export   class   Home   extends   React . Component {          render ()    {          return (       ...