Frontend

In the tutorial we are going to look at, how can we make private, public and restricted route using react router. Suppose we have an app, which has a Login page, Home page and an About page. Have a look at App.js file fo the application which has simple route for mentioned pages. import React from 'react' ; import Login from './components/Login' import Dashboard from './components/Dashboard' import About from './components/About' import { BrowserRouter,Switch,Route } from 'react-router-dom' const App = () => { return ( <BrowserRouter> <Switch> <Route path= "/home" exact component={Dashboard} /> <Route path= "/login" exact component={Login} /> <Route path= "/about" component={About} /> <Route path= "/" exact component={Login} /> < /Switch> < /BrowserRouter> ); } export default ...

Let's take a quick look at final output : Modal.js File , which contains modal view and its content along with a close button import React from 'react' import './style.css' const Modal = ({open,close,modalText}) =>{ const classModal = open ? "modal--open" : "modal--close" return ( <div className={classModal}> <div className= "modal" > <span className= "close" onClick={close}>X< /span> <span className= "modalText" >{modalText}< /span> < /div> < /div> ) } export default Modal style.css file used in above file .modal { padding : 12px; background : blue; width : 320px; text-align : center ; } @keyframes fadeIn { from { opacity : 0; } to { opacity : 1; } } @keyframes fadeOut { from { opacity : 1; } to { opacity : 0; } } ....

Hello everyone, in this article we are going to look at how can we set up redux devtools for react applications which are using redux. As a reference we will take our previous tutorial's redux setup. Visit : Best coding practice and structure for redux saga with react hooks | Separate watcher and worker saga | React clean code How to install Redux Devtools? To install Redux Dev, if you are using Google Chrome, go to chrome web store or  https://chrome.google.com/webstore/category/extensions Search redux devtools Select below extension Install the extension After successful installation an icon for the same should be added beside chrome url bar. Now whenever you run a react application which is using redux the icon will glow. Refer below mark on the screenshot: Now let's focus on code As mentioned in the above tutorial , Store file for redux setup looks like below : import { createStore,applyMiddleware } from 'redux' import root...

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 look at how we can create relations between two object types in GraphQL. This is the second part of GraphQL with Node, MongoDB and React series If you have missed the first part here is the link :  Set up graphQL backend using Node.js, express and mongoDB - Step by Step Reading the above article is important as we are going to use the same example and and continue code from where we left there. Ok until last time we have created two object types Game and Publisher.  Game has field like id,name, genre and publisher has fields id, name and established. Now lets refer the diagram once again As you can see each game has a publisher. So we need to link Game type with PublisherType for that to happen we need to add a key to each game data which will hold reference for it's Publisher Ok so let's modify the dummy data array for Games const games = [ { name: "FIFA" , id: "1...

Hello everyone in this article we are going to learn how to setup graphQL backend server using Node. # What is graphQL * GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data ( As per Wikipedia ). * Developed by Facebook If you want to know why for a specific problem we should use graphQL read this article When should you consider GraphQL for your application? First create a folder which will hold our node files say "graphql-node", within that folder do "npm init" to setup initial basic package.json file Install below dependencies : // for starting local server : Express // for graphQL : graphql // middleware : express-graphql My package.json looks like below code { "name" : "graphql-node" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts...

To understand this, let's take an example : We have two entities here Publisher and Game Publisher has attributes  name and established year Game has  name, publisher and genre One publisher can have multiple games and one game has it's own publisher, games also have relation among based on similar genre. So if we try to solve this problem via rest api we need to have number of endpoints like : domain.com/games domain.com/game/:id domain.com/publishers domain.com/publisher/:id domain.com/game/:id/publisher domain.com/publisher/:id/games etc etc... so you can see to get different set of data we need to expose different endpoints , if there is solution like from request we will send the data mapping and accordingly we will get our choice of data. There will be a single endpoint to handle all such request. Well then the solution is GraphQL. Endpoint : http://localhost:3001/graphql Query we will pass as : {     game:{       ...