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' ...

Hello everyone, in this article we are going to learn about proper use of redux saga, some effects of redux saga like put, call, take, takeEvery etc. Along with that we are going to separate saga files into watcher and worker for improving code readability. Let's create a simple react application with will render list of data on click of a button. Whenever user clicks on the button an endpoint is called and data is fetched from a remote server. We will use a sample endpoint provided by  reqres.in Finished application looks like below screenshot : Folder structure for this application will look like below: components : will have all the components we will use for the app components -> style : will have separate folder and file to hold the styling REDUX setup : constants  -> index : will hold all action types and constant values actions  -> index : will hold all the actions reducers -> index : is the root reducer reducers -> ot...

Hello everyone in this article we are going to take a look at how we can use redux with React Hooks. # What are React Hooks React Hooks are functions that let us hook into React State and lifecycle features from functional components. Using redux with react hooks conceptually is same as we use it in class components but syntax wise they are bit different To learn about this today we are going to create a simple ToDo List Application, here is a quick look Use create-react-app to initialise a react app and install dependencies  redux, react-redux You will have basic react app folder structure by now. So let's create the redux store import { createStore } from 'redux' ; const INITIAL_STATE = { data : [ 'Get up early' , 'Have Breakfast' , 'Start coding' ], }; function tasks(state = INITIAL_STATE, action) { switch (action.type) { case 'ADD_TASK' : return { ...state, dat...