Frontend

Hello everyone , in this tutorial we are going to learn at how we can test Redux-Connected components using React / React Native Here is an example of Redux connected component  SlotContainer.js : import React, { Component } from 'react' import { SlotContainerStyles } from '../styles/AppStyle' import Slot from './Slot' import ControlButton from './ControlButton' import {connect} from 'react-redux' import {setUserInteraction,setSlotRunningStatus} from '../../action' import ResultWindow from './ResultWindow' class SlotContainer extends Component { constructor(props) { super (props) this .state = { startSlot : false , } this .timer = null } componentDidMount(){ this .props.setSlotRunningStatus( false ) this .props.setUserInteraction( false ) } updateUserInteraction = (flag) => { } resetSlotMachine = () =>{ } s...

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

Have you missed Part 1 of this post, here is the  link Ok now let's create Saga file for gettingPostList : Saga/getPostListSaga.js import { call , put } from 'redux-saga/effects' import getPostListAction from '../Reducers/postListReducer' import getPostListService from '../Services/getPostsService' export default function* getPostList ( action ){ try { const response = yield call ( getPostListService ); yield put ( getPostListAction . getPostListSuccess ( response )); } catch ( err ){ yield put ( getPostListAction . getPostListFailure ()); } } After creating saga file we have to link saga with specific reducer in the RootSaga file Saga/RootSaga.js import { all , takeLatest } from 'redux-saga/effects' import { GetPostListTypes } from '../Reducers/postListReducer' import getPostList from './getPostListSaga' export default functi...

I presume that you already gone through the docs of redux-saga, reduxsauce ,so that I won't waste your time with lots of description. Let's start coding Init react app : npx create-react-app redux-saga-starter First we need to install the dependencies : npm i --save redux react-redux remote-redux-devtools redux-saga redux-logger reduxsauce seamless-immutable Install react router dependency for required routes : npm i react-router-dom --save So before adding redux/redux-saga my initial index.js , App.js and Router.js are as following : index.js import React from 'react' ; import ReactDOM from 'react-dom' ; import App from './App' ; ReactDOM . render ( < App /> , document . getElementById ( 'root' )); Router.js import React , { Component } from 'react' import { Route , Switch } from 'react-router-dom' import Home from './Components/Home/home' class...

By the time I am writing this post, after a lots of search I did not find a unit testing document which will guide me step by step. This article is for my own future reference too. So here are the steps I followed : Start a new react-native project , using command : react-native init  ReactNativeTDDStarterKit This command will create a project for you. Now go to the application path cd    ReactNativeTDDStarterKit Use command react-native run-android , to check whether project is running fine After build is successful you will see build success message. Initially package.json will look like this : { "name": "ReactNativeTDDStarterKit" , "version": "0.0.1" , "private": true , "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" , "test": "jest" }, "dependencies": { "react": "16.8.3" , ...