Frontend

Hello everyone, in this tutorial we are going to create 'Tooltip' component for React , but we will not use any external library, so that you get the flexibility to customise it according to your project need. So Let's start. First Let's see have a look of the final outcome : So we will start by initiating a project with create-react-app. And within src folder we will create a Tooltip.js file, Tooltip component will allow user to pass tooltip text. import React from 'react' import './style.css' const Tooltip = ({text}) => { return ( < div style = {{ textAlign : 'center' , margin : '10%' }} > < div class = "custom-tooltip" > Hover to see tooltip < span class = "custom-tooltip-text" > {text} < /span> < /div> < span style = {{ display : 'block' ...

Create a folder ex. "MyProject" Use command npm init for initiating package.json Once setup, install Express module using npm i express --save Open the folder using VS Code or any other IDE, create a file called server.js (  You may use any name  ) Copy paste this below code : const express = require( 'express' ); const app = express(); const path = require( 'path' ); const port = process.env.PORT || 3000 ; app.get( '/' , function (req, res) { res.sendFile(path.join(__dirname + '/index.html' )); }); app.listen(port,() => { console.log( ` started on port ${port} ` ); }); You may create multiple route as per your need, use command  node server.js  to start the server For quick access go to package.json file, and add an entry to scripts category like below example : Use ctrl + c to stop the server. { "name" : "image" , ...