An introduction to React-Redux Ecosystem

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 licensed under CC BY 4.0. [1]

React Advantages

  • React uses virtual DOM which is JavaScript object. This will improve apps performance since JavaScript virtual DOM is faster than the regular DOM.
  • Component and Data patterns improve readability which helps to maintain larger apps.

Workshop

Well, let’s go ahead and implement a simple React app and get our hands dirty with React. The app I am going to build is a simple English to Pig Latin translator. You may find the working code for the project here [2]. First let me explain how it works and then we’ll dive into the code. The app has a Form so that a user can enter some english text and then click on the submit button. This form submission will cause to trigger the translation process and finally Pig Latin text is shown to the end user. Take a look at the following markup.



To run the project, check that out from github [2] and run the following commands.
npm install
This will install all the dependent libraries and packages including the webpack dev server. Then to deploy the project into webpack dev server and start it merely execute the command below.
npm start

Well now you have running application with you and you can give it a try by entering some english text and converting it to equivalent Pig Latin form. Now let me walk you through the code and explain it a bit. Let’s start with the Redux form first. I have listed down the code below.

It’s merely a simple HTML form with some validation added. The most important point here is the form submission. What happens when the form is submitted. There inside the handleSubmit function we call an action creator which is responsible for creating an action for us. Let’s take a look at this action creator for a second.

Here the conversion logic function is called with our input text and conversion is performed. So the action creator is mainly responsible for processing of the form submission event in this case. Then it gets the converted string, a new action is created with that and returned. Note that I am using the npm module [3] out of the box for the Pig Latin translation here. Also note that the action has a type which in this case PIG_LATIN and a payload which is the converted text.

This action is then dispatched to our reducer. The reducer code is listed below.

The reducer is interested in the action which is returned above. It merely creates the new state of our application and returns. Note that reducer never ever modify the state of our application. Rather it creates and returns a new state. The state here refers to the application state not the component state.

Finally that new converted data is accessed in our ConvertedText component as below.


Conclusion

Well we covered a lot of ground in React and Redux landscape today. I gave a little introduction about it and walk you through a working sample application [2] while explaining how each bits and piece fits together to form an entire data flow in our application. I think this helps you to understand basic concepts of React and Redux and just to get you started with React. That does it for another session and I’ll see you in my next blogpost.

References

[1] https://www.tutorialspoint.com/reactjs/reactjs_overview.htm
[2] https://github.com/ravindraranwala/piglatinconverterapp
[3] https://www.npmjs.com/package/pig-latin-converter

Comments

Post a Comment

Popular posts from this blog

Introducing Java Reactive Extentions in to a SpringBoot Micro Service

Image
Introduction Today we are going to take a look at Reactive Programming using Java8 and RxJava, which is a library for composing asynchronous and event-based programs by using observable sequences. RxJava stands for Reactive Extensions for the JVM. It extends the observer pattern [Gamma95] to support sequences of data/events and adds operators that allow you to compose sequences together declaratively while abstracting away concerns about things like low-level threading, synchronization, thread-safety and concurrent data structures [1]. Pre-Requisites : Having a good knowledge about Java8, Functional Programming and spring boot microservices. What is Reactive programming? In essence, Reactive programming is an asynchronous programming paradigm concerned with data streams. The system time, a list of entries from the DB/API, user clicks, everything can be a stream of data. Data from different streams can easily be combined and transformed, and in the end processed/observed by the
Read more

Optimal binary search trees

Image
Suppose that we are designing a program to translate text from English to French. For each occurrence of each English word in the text, we need to look up its French equivalent. We could perform these lookup operations by building a binary search tree with $n$ English words as keys and their French equivalents as satellite data. Because we will search the tree for each individual word in the text, we want the total time spent searching to be as low as possible. We could ensure an $Θ(log_2 \;n)$ search time per occurrence by using a red-black tree or any other balanced binary search tree. Words appear with different frequencies, however, and a frequently used word such as the may appear far from the root while a rarely used word appears near the root. Such an organization would slow down the translation, since the number of nodes visited when searching for a key in a binary search tree equals one plus the depth of the node containing the key. We want words that occur frequently in the t
Read more

Combining the emissions of multiple Observables together using RxJava Zip operator in a Spring Boot Micro service

Image
Introduction Well, today we are going to discuss an advanced RxJava operator called Zip. Let’s first take a look at the zip operator at a glance and then move on to a real world example that leverages the capabilities of the operator. In fact, zip is a very powerful and useful operator provided in the RxJava library. Prerequisites : Good knowledge of Java8, Functional Programming, RxJava, Spring Boot, Microservices. User Level : Advanced Since this is an advanced article, I am not going to walk you through the basics of RxJava or Spring Boot microservices. If you need to get some basic understanding of RxJava, I thoroughly recommend you to go through one of my previous blog posts [1] [2] or any other good introductory article about RxJava. If you need to learn more about Spring Boot microservices please go through some of the spring tutorials which are really comprehensive and impressive. RxJava Zip Operator Combines the emissions of multiple Observables together via a speci
Read more