A Gentle Introduction To React, Visualized
Written by Nikos Vaggalis   
Sunday, 07 May 2023

React quickly became a popular JavaScript framework. Here's a very useful interactive website by ui.dev that showcases React's
capabilities and how it has helped in changing the face of the Web.


As a preamble React, Visualized provides a rundown of what the Web looked like before the introduction of React :

  • jQuery was the most popular way to build for the web. It embraced websites for what they truly were, a tree of DOM nodes.

  • Backbone. js invented the Model-View-Controller pattern. Whenever a Model changed, all the Views that cared about that Model’s state would re-render.

  • AngularJS, for good and for bad, embraced two-way data binding. In practice, well, implicit state changes usually led to code that is both hard to follow and hard to debug.


The infographic continues with explaining why React was the game changer :

One of the core innovations of React was that they made the View a function of your application’s State. Often represented as v = f(s).

All you have to do is worry about how the state in your application changes, and React handles the rest.
But making your view a function of your state was really only half the picture. The real innovation happened when you encapsulated this idea into a proper component based API.

And this is the core of React's philosophy; in React’s opinion, anything that had to do with rendering the View - whether that be state, UI, and in some cases, even styling, was part of its concern.

As to why this is better, read through the rest of the section. In conclusion, the introduction serves as a very good comparison between React and the rest of the frameworks, useful when looking what to pick or when you get into hot debates like 'Angular vs React', which to go for.

At this point it's best to note that the site is not a static pile of text. You can interact with it and get animations explaining the
concept at hand or tweak the in-browser code.

The remaining sections go through all the elements of React, again each one crisply showcased :

Passing Props
Whenever you have a system that is reliant upon composition, it’s critical that each piece of that system has an interface for accepting data from outside of itself. React accomplishes this via props.

Managing State
State, and specifically the ability for individual components to own and manage their own state, is what makes React so powerful, and it’s what allows you to build complex user interfaces out of simple, isolated components.

Rendering is just a fancy way of saying that React calls your function component with the intent of eventually updating the view. What happens during this process?

Managing Effects
When React renders, it does so with the goal of eventually updating the UI. This entire process needs to be as fast as possible. To keep it fast, React should be able to render without running into any side effects.

Non-Visual Values
State allows you to preserve a value across renders and trigger a re-render when it changes. Sometimes you need a way to tell React that you want to preserve a value across renders, but that value has nothing to do with the view, and therefore, React doesn’t need to re-render when it changes.

Teleporting Data
There are times when passing props through intermediate components can become overly redundant at best, or completely unmanageable at worst. Because this is such an obvious limitation of a component based architecture, React comes with a built-in API to solve it called Context

In conclusion, React,visualized has to be one of the best resource on the React framework (or library, this is hotly debated) I've ever seen.

One of the most popular question in forums that span a wide range of backend technologies, Spring Boot for example,
is what kind of framework to use for the front-end. Thymeleaf and jQuery, Vue, Angular or React? This guide will show you React's point of view.

More Information


Related Articles

Getting Started With React For Free

ReactProto, Rapid Prototyping In React


To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.


GitHub Introduces Code Scanning

GitHub has announced a public beta of a code scanner that automatically fixes problems. The new feature was announced back in November, but has now moved to public beta status.  

Rust Twice As Productive As C++

Google director of engineering, Lars Bergstrom, gave a talk at the recent Rust Nation UK conference and claimed that Rust was twice as productive as C++. Given how good Google is at C++, this is quite [ ... ]

More News

raspberry pi books



or email your comment to: comments@i-programmer.info

Last Updated ( Sunday, 07 May 2023 )