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

Edit distance

Image
Biological applications often need to compare the DNA of two (or more) different organisms. A strand of DNA consists of a string of molecules called bases, where the possible bases are adenine, guanine, cytosine, and thymine. Representing each of these bases by its initial letter, we can express a strand of DNA as a string over the finite set $\{A, C, G, T\}$. For example, the DNA of one organism may be $S1 = ACCGGTCGAGTGCGCGGAAGCCGGCCGAA$, and the DNA of another organism may be $S2 = GTCGTTCGGAATGCCGTTGCTCTGTAAA$. One reason to compare two strands of DNA is to determine how “similar” the two strands are, as some measure of how closely related the two organisms are. We can, and do, define similarity in many different ways. For example, we can say that two strands are similar if the number of changes needed to turn one into the other is small. [1] We formalize this notion of similarity in our Edit distance problem. 15-5 Edit distance - Problem Statement In order to transform one sour
Read more