React JS: A guide for dummies – Part 1

When I first heard about React JS, I got to know that it is one of the best ways to develop and create cool, interactive web applications.

So what is React JS exactly?

React JS is a Javascript library created by Facebook for creating fast, interactive web applications.

But why is it so hyped ?

Like all other libraries and frameworks, React also has many competing libraries and frameworks Vue JS, Angular 8, Svelte etc are some of them to name some. So why is React so hyped and so extensively used in the developer community? We are going to understand some of the key philosophies and features React JS brought to the table which ultimately made it stand ahead of all its competitor frameworks. (Note: My intention here is not to say that React JS is the best library for front end UI development but to share what were the key features. Hope this will motivate many developers to use React JS for their next projects).

My experience with React JS

Unfortunately or fortunately, I got to work on JQuery as a front end library before I started working on React JS. For those who don’t know about JQuery, it is a very popular javascript library used to create interactive UI by simplifying HTML DOM traversing, CSS properties manipulation for animation effects, event handling for actions and AJAX for connecting to a back-end service.

JQuery and its pain points

I said unfortunately because the level and possibilities of bugs & code complexity you can have in JQuery are immense. In my terms JQuery, if not written properly, is a library which for any problem statement gives you many options to introduce bugs and issues while development,. Another reason why JQuery creates the problem is in storing data on the client-side of an application, there is no proper definition to how data should be shared between the different layers of an application. That’s why I believe it steals many important requirements for a web application like security and scalability. It isn’t that JQuery is bad, it is very lenient in the ways we can write code and exploit the DOM in it.

Understanding the need of libraries like React

But I also said fortunately above, that is because it was good that I worked on JQuery before starting React JS, it gave me so many lessons to learn. Working on JQuery made me understand the reason why front end developers required something like React for creating web applications. Along with the flexibility of JQuery which leads many developers to write bad code, following are some of the pain points which I believe why developers moved to React JS from JQuery:

  • Scalability: I know people have created huge scalable applications on JQuery liked StackOverflow, LinkedIn, etc., but that was when they did not have any other more appealing option like React JS.
  • Storage management: There were no specific protocols to how data should be stored and retrieved or traversed between various elements of the application.
  • Security: As mentioned in the above point because of storage management it was difficult to make an application absolutely secure.

(Note: I again want to clarify here – JQuery isn’t bad, but it had its limitations. It gave me a reason to explore React JS even more as I knew about the pain points which people used to face.)

So what does React JS brought to the table?

Understanding these problems and looking at the future of single-page applications Facebook introduced React JS to the community as an open-source project where everyone could contribute and bring out the best of a library.

React JS was not just solving the problems developers were facing with libraries like JQuery and Angular JS etc, but also brought some interesting new features which ultimately changed the way how front end web applications were developed. To understand this better, following is a list to most of the key features and concepts which React JS introduced to the community:

  • Concept of virtual DOM
  • Component composition
  • One way data binding
  • Concepts of state and props
  • Component life cycle method

and many more…

We shall discuss these key concepts in the upcoming posts where we will dive into each of them in-depth and understand why these were useful and helpful.

Thank you!! see you in the next part 2 of this blog …

Leave a Reply

Your email address will not be published. Required fields are marked *