Image for post
Image for post
Photo by Ferenc Almasi on Unsplash

Recently I was searching for a way to have highly module and reusable codebase for my teams projects. The main purpose was to be able enforce my team to be able to write highly module code and also testable.

I found bit.dev in the process and started using it. This blog is basically a tutorial on how to use it and also pros/cons.

What is bit.dev

Bit.dev allows us to create reusable components (but takes it to a whole new level)

Basics

Step1 — Getting Started

First setup is to install bit.

Follow the above link to install bit.dev in your project. …


Redux Saga is another library which try to tackle the problem on “effects” with redux like api calls etc. Previously we saw the library redux-thunk and how it tries to solve the same problem.

In this blog we will see how to work with redux saga.

Some Basics

When you start with sagas, the first think you will notice is some different syntax especially

function* hello(){   yield 1}

These are basically called generator functions.

Read about them here to understand https://javascript.info/generators

Once you understand above, the concept of yield and function* should be clear.

Effects

Basically “effects” is an object (plan/simple object) which saga generates and it can interpreted by the saga Middleware in a certain way. …


In this blog post we will see how use api’s with redux and specifically redux-saga

We will be looking a redux-thunk library first because its very simple to use and understand.

Before reading further you should be aware of whats an api and how to call it.

There are multiple online tutorials available here are few

Redux Thunk

The first which comes to mind is why do you need a special library to have api calls why can’t we directly called fetch() in our actions or reducers.

This is because redux principle allow us to only have pure functions for actions and reducers with not side effects. …


In my previous blogs, I explained core concepts of redux and how to implement them.

Now let’s see how we can use redux with react.

React — Redux

We use the library https://react-redux.js.org/ to integrate our react app with redux.

I will take example of TODO APP to demonstrate how we can do this.

You can create react app using

npx create-react-app todo-app-redux --template redux

We have already created actions/ reducers/ store/ in my previous blog on redux, so i will just copy paste the code here for now. …


In the previous part1,2 we have seen and implement as basic todo app and how manage state, actions, reducers.

Now let’s see some more features which redux provides and can be important to use in a large app.

Middleware

Middleware allows us to extend and add features.

function logger({ getState }) {return next => action => {console.log('will dispatch', action)// Call the next dispatch method in the middleware chain.const returnValue = next(action)console.log('state after dispatch', getState())// This will likely be the action itself, unless// a middleware further in chain changed it.return returnValue}}export default createStore(reducer, {}…


In this previous blog post, we took a very simple example to demonstrate basics of redux. In this i will take up a more complex example to and see further api’s which redux provides.

Todo APP

Let’s take the all famous todo :) to start.

npx create-react-app my-app --template redux

You create a fresh app using above, but this will again be most console based application to understand redux so clear out any unwanted stuff.

Step1

// our application state// this is a very simple counter application// an array of todolet init_state = []

Step2

//let's create an action to add…


In this blog, we will see how to use redux and what exactly is redux. This is a very basic introduction blog to explain basic concepts. Its not specific to any library like react, vue etc but its a very general introduction

What is Redux

Redux is a architecture to manage state of an application. (state = data)

Redux is not specific to react, but its a general architecture to manage state. As our application grows bigger and more complex especially for frontend apps it becomes more difficult to manage data.

So to understand is very simple, the principle of redux allows us to easily manage a very large application and also for easy debugging as well. …


Image for post
Image for post
Photo by Luke Chesser on Unsplash

In the previous posts, we saw how to work with

We use api’s in almost every project.

I will make a simple counter app and make it using api.

I will be using this free public api https://countapi.xyz/

This api works very simply i.e it will create a counter. it will just counting. If you call the api multiple times it will keep counting the no of times api is called.

Call api https://api.countapi.xyz/hit/etechtraining/count

You can open the above url in browser and see if returns an json response. So the api is very simple to understand.

Step1

We should first create a static html structure. …


Image for post
Image for post
Photo by Patrick Tomasso on Unsplash

In my previous post in this series, we saw basics of hooks i.e useState and useEffect.

Now lets more advance usage of it.

ESlint Plugin For Hooks

Before moving further let’s install eslint plugin for hooks, so we can avoid some mistakes during compile time itself.

To do this first install the plugin using

npm install eslint-plugin-react-hooks --save-dev

Then update your package.json eslint config to

"eslintConfig": {"extends": "react-app","plugins": ["react-hooks"],"rules": {"react-hooks/rules-of-hooks": "error","react-hooks/exhaustive-deps": "warn"}}

We will discuss about the rules for hooks later on, but you can read about them here now if you want https://reactjs.org/docs/hooks-rules.html

Add Todo

Till now in our code base we have add a random todo. Now let’s add todo from the button in our nav bar. …


Image for post
Image for post
Photo by Chris Ried on Unsplash

In this post I will try to explain how to use react hooks step by step from basics using a simple todo app.

This series assumes you already know to work with react, “create react app” and basic class components. i.e you have a basic understanding of how react works.

Lets Start

Create a new project using CRA

npx create-react-app todo-list-hooks
cd todo-list-hooks

Next i will be using bootstrap for some simple basic designs so lets install bootstrap package and include it

npm install bootstrap@next

Next open your src/index.js to add bootstrap

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Next, we let’s clean up the default react stuff that comes so we have a clean working code. …

Manish Prakash

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store