Ravindra Ranwala's Blog

Introduction In this article I am going to introduce you to redux-saga [1]. Redux-saga is a library that aims to manage application side effects. The mental model is that a saga is like a separate thread in your application that's solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well [1]. It uses an ES6 feature called Generators to make those asynchronous flows easy to read, write and test. I thoroughly recommend you to read more about generators before getting into sagas. Workshop Well, we are going to implement a simple application using redux-saga this time. The basic scaffolding of our app once built would be like this. You may find the source code of this project on github [2]. Let me just show you the sagas first. Here’s the code fo...

Introduction Well, today I am going to discuss a very common and useful topic about forms in React. At least most of you as front end developers would have encountered with this scenario. The use case we are going to address today is something like this. Let’s say we have a simple application which enables us to add new users. For the simplicities sake let’s assume this input form consists of first name, last name and age. We make first name and last name mandatory while keeping age as an optional field. So the submit button of the form should get enabled only if the user has entered some values to both the first name and last name fields. In all other situations the submit button should be disabled. Check out the scaffolding below for more details. Notice that the submit button is disabled now since a value is not given for the First Name input field. Workshop Well, how are we going to address this requirement elegantly. I am using redux forms to get this thing done. We gon...

Introduction Well, today we are going to explore a little bit more on React and Redux. In this article I assume that you have some good prior knowledge and experience in React and Redux landscape. If not I recommend you to go through my previous article on introduction to React and Redux ecosystem [1] or any other beginner level training programme. Prerequisites  Solid understanding about React and Redux technologies. Good knowledge of Javascript, HTML and CSS. Workshop Let’s get into this now. The application that we are going to build today is a Count Down Timer application. Our app should allow the user to enter a number of hours, minutes and seconds, then click on Add button, and then the timer will count down from that time. Timer should display hours, minutes and seconds. The user should be able to click a + button on the page to add a new timer. The user should be able to enter a label for the timer, such as "boil eggs," which is displayed with the time...

Introduction Well, last time we implemented a simple app that converts English text into a Pig Latin. But there are two limitations in that app. It does not handle punctuations. For an example "Thi => "Ithay is not working with our current app. It does not handle capital letters properly. For an example cherries!", Sally => errieschay!", Allysay is not working either. The problem is in the third party library which we used for the conversion. The third party library is a very naive one which does not support punctuations and capital letters. The solution is to write our own functional component which is responsible for the transformation and hook it up into our app by substituting the third party library we are currently using. Before getting into this, I recommend you to go through my previous article [1] in React and Redux which is a really good starting point. Prerequisites Must have a good understanding on React and Redux stack....

Introduction Today I am going to walk you through React which is a declarative, efficient, and flexible JavaScript library for building user interfaces.  ReactJS allows us to create reusable UI components. Lots of people use React as the V in MVC. React abstracts away the DOM from you, giving a simpler programming model and better performance [1]. Prerequisites Good knowledge of Javascript, HTML and CSS. React Features JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended. Components − React is all about components. You need to think of everything as a component. This will help you to maintain the code when working on larger scale projects. Unidirectional data flow − React implements one way data flow which makes it easy to reason about your app. Redux - This is the data management library inspired by Flux. Backed by Facebook - React is licensed under the Facebook Inc. Documentation is licens...