Frontend

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

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:{       ...

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

At some point while learning React most of the people think whether React Context API is a replacement for Redux, we are often confused that when should we go for Context API and when should we go for Redux. Moreover what could be the pros and cons if we select each. So in this article we are going to compare React Context API and Redux also we will try to see when each are useful. What is Redux  According to definition, Redux is a predictable state container for Javascript applications. Redux helps us manage the state of the application. From react perspective React offers no solution which allows us to have a global state, so that we can share states among components. Redux solves this problem and it's a good fit for react. What is Context React Context API on the other hand , is a component structure provided by React framework which allows us to share specific forms of data across its children. When Redux can be replaced by React Context API  If we are...

Hello everyone, earlier we have developed a react table view solution for frozen column, if you missed the post please find it here : https://reactcodes.blogspot.com/2019/11/react-fixed-table-header-code-without.html Today we will try to make the table header fixed but make the data vertically scrollable, below demo shows how the final result will be : To get the full codebase you may see my github link : https://github.com/reactcodes/react-sticky-table Explanation of process : Initially if you clone the codebase within App.js you will see that I have separated table header items and put those in an array const tableHeaders = [ "First Column", "Second Column", "Third Column", "Fourth Column", "Fifth Column", "Sixth Column", "Seventh Column", "Eight Column", ] Then I have the table data coming as a json I have the stickytableheader ...

Hello everyone, we are going to look at how to detect faces from images using regular Javascript, HTML Canvas and OpenCV library. Let's look at some examples first then we will proceed to code and it's explanation Single Face detection Demo MultiFace Demo If you need to see the full codebase just got my github repo  https://github.com/reactcodes/face-detection-javascript-opencv If you have not done opencv setup kindly visit  https://docs.opencv.org/3.4.0/d4/da1/tutorial_js_setup.html Now lets understand the code : I have taken a HTML template where I have my Sample img container and then I have 2 html canvas in a different div <div class="container" > <div id="background" class="o_image" > <img id="sample" src="sample_2.jpg" alt="facedetection" /> <span> ©reactcodes blog </span> </div> <div cl...

Look at the project structure below, I have only one image under asset folder for testing, under 'libs' folder I have d3 library and numeric library I am using d3 library to make the crop window and other transition effects and numeric library to calculate positions So lets look at the code... index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Image Crop</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div id="background" class="o_image"> <img src="./assets/bill.png" alt="bill" /> ...

In case you missed Part 1, follow this link below   Uploading file into azure blob storage using Azure Keyvault credentials with NodeJS and React - Part 1 So now let's create the UI using reactJS.  Finished app looks like below screenshot, which only has an upload option, you may add other features and fields with validation as you need. Initiate a react app using command : create-react-app sample-azure-client-app Dependency for endpoint call : axios   install via npm i --save axios Create App component import React from 'react'; import UploadImage from './assets/upload.png' import axios from 'axios' const onChange = e => { const files = Array.from(e.target.files) const currentFile = files[0] const formData = new FormData() formData.append('file',currentFile) axios({ url:'http://localhost:3001/upload/file', method:'POST', params:null, data:formData, hea...