Ravindra Ranwala's Blog

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