If I am to answer what are the applications of JavaScript, My answer will not be pinpointed to a certain area in IT. In my previous post I discussed about JavaScript being used to build server-side applications in the form of Node.js. Today I am going to focus about using JavaScript to design interactive web pages. There are many ways that you can achieve this goal. But now I am going to talk about only one such way. That is React JS.
React is gaining a huge popularity among its users due to the ability of creating highly interactive single-page applications without any difficulty.This could be used to design web pages and mobile application interfaces as well. Although React is used as a front-end JavaScript library, along with Node.js it could be implemented on the server-side as well. This is achieved by using React Native.
History
React was created by Jordan Walke, a software engineer at Facebook. It was first deployed on Facebook’s newsfeed in 2011 and later on Instagram in 2012. React was first released into the public in May 29, 2013. Facebook is responsible for developing ReactJS.
What is React?
ReactJS is a JavaScript Library which is designed to develop interactive single-page applications. It only represent the view of a web or mobile application.
What’s so Cool About React…?
- Fast Rendering : Whatever the changes you do in your code, it will be automatically updated in the browser.
- Simplicity : Component-based approach, defined life cycles and use of plain JavaScript will make coding much simpler and enjoyable.
- Easy to learn : The only thing you need to have as a prerequisite is the basic understanding of HTML, CSS and a bit of JavaScript…!
- Reusable Components : React is made out of Components, which is a major unit of React. By reusing them you can build bigger apps easily and facilitates the maintainability as well.
- Testability : React applications are very easy to test.
React views can be treated as functions of the state, so we can manipulate with state we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc…
Who are working with React at the moment…?
- Netflix
- Dropbox
- The New York Times
How does React work…?
Before learning how react actually works, let’s find out a bit about the basics of React.
Components : A Component could be considered as a major building block in an React Environment. Simply a React Component is a JavaScript Class which can accept input data and returns a React element which describes the particular section in the UI.
Props : In the above picture you can see there is a attribute in the HelloMessage component called name. That is a property (props) in the given Component. Props are used to pass input/data into a particular Component. Props are always read-only and cannot be modify.
State : If we want to modify the way how a certain component appears in the UI against some varying condition, we use a concept called state. Unlike props, we can modify a state and it will re-render that modified component back into the DOM.
Now let’s consider how React Works Internally.
In React, data flows from top to bottom. In other words from parent component to its child components. Child components are not aware of where the data is coming from. Data can be passed in downward direction using props. But whatever the action occur in the child components, would affect those who are above that component. This phenomena is also known as “properties flow down, actions flow up”.
What is Virtual DOM..? and how does it work..?
Document Object Model (DOM) is the place where you send (in other words render) your UI into. Once you UI is perfectly set in the DOM, there may be instances where the UI has to be rendered again with some modifications. In the usual case this would require updating the browser again!!!. This takes lot of time and this approach is quite ineffective as well. As a solution for this, React employs something called, Virtual DOM
The process of Virtual DOM could be listed down as follows…
- Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.
- The difference between the previous Virtual DOM representation and the new one will be calculated.
- The real DOM will be updated with what has actually changed. This is very much like applying a patch.
My Personal Experience With ReactJS…
So we have been looking at the what react is really about by exploring its origin, uses and the mystery behind how react works. Now it is time to explore some of the cool things I tried using ReactJS.
Comment Section…
I created a React Application where anyone can add comments and edit them. If the user wants to remove them, they can do that as well. In my app I have included two components as follows.
- Main – This is the component which contains each comment which is newly added.
- App – This represents each comment.
Above coding were that of the child component (App). Now let’s look at that of the parent component (Main).
Inside the Main component there’s a button to add a new comment. Once you click it, the addApp() method will get executed taking “Default” as the original text in each comment. eachApp() method returns an App Component passing 4 props namely key, index, updatingApp and deletingApp where index contains the index of each comment, updatingApp takes care of editing the comment and deletingApp is responsible for deleting a particular comment respectively.
A Step-by-Step guide of how this application works is given below.
On My Next Post…..
In this post I covered many things about ReactJS. I hope this gives you some idea of what ReactJS is and what wer can do with it. From my next post I will be talking about a very popular NoSQL database named MongoDB and will explore bit in depth about it.
Ishan's blog 