Note: Beginner friendlyđź¤
What is React?
React is an open-source JavaScript library for creating interactive user interfaces. It was developed at Facebook, and later on released to the public in the year 2013.
Why React?
Say, you are scrolling on Facebook, and you see an item or post or comment that you like; and you then click the like button. Now here is where React comes in; instead of reloading the entire page just to update your like, React updates the like component only; saving you from the trouble of multiple page reloads every time you liked something, and as a result making your user experience much more better.
Evolution of websites
Looking at the evolution of websites is another aspect to bring out clearly where React comes in, in web app development. We'll highlight the three categories of websites:
- Static Websites
- Dynamic Websites
- Single Page Applications
Static Websites.
These are the oldest form of websites. The HTML content is created beforehand, and the complete HTML file uploaded onto the server awaiting requests to fetch them.
Dynamic Websites.
The web pages are created dynamically on the server. Unlike in static web pages, whereby the whole HTML file is already pre-generated awaiting fetch request; in dynamic websites only the HTML template is pre-generated; and on fetch request, the complete HTML file based on the template is created and served to the client.
Single Page Applicatons.
React comes in here. The HTML code generation has been moved from the server-side (as is the case in dynamic web pages) and taken to the browser-side. Basically, on client’s request, the server serves a single basic HTML and multiple Javascript files. The Javascript files are the heart of SPAs. They update the HTML in the browser accordingly as per the user interactions. This client-side dynamic update of HTML code requires a lot of Javascript instructions; and here is where the Javascript libraries like React & Vue, and frameworks like Angular help with some abstractions so as to make the development process much easier and faster.
Now, it doesn’t mean every website and web app has to migrate into Single Page applications, but for every website or web applicaton, depending on its applications and dynamicity a correct choice has to be made whether a static website, dynamic website, or Single Page Application would be more relevant.
Up to this point, I hope it is more clear what React is, and why we need it. The next concepts to look into then are: React components; how React breaks the UI into multiple components, and the Virtual DOM; how React intelligently updates its Document Object Model(DOM).
Any thoughts and comments, would love to hear those!
Credits: Cover photo by Tudor Baciu on Unsplash.