Jan 21, 2019 · 4 minute read
React is a tool for building dynamic and interactive user interfaces.
React is not a framework, like Angular. React is an unopinionated library that, when combined with a renderer, can display/capture data and respond to user inputs and network events.
As React is view-layer agnostic, you, the developer, are not limited to using React to build for the web.
React is closely associated with ReactDOM, which understands how to render markup in the browser, and ReactNative, which understands how to render a mobile friendly native view.
React attempts to solve the following problems;
- Updating the DOM/user interface is expensive in terms of memory, CPU/GPU/general processing time (not financial, but computationally), and writing UI manipulation code can be boring and repetitive.
- Software can become entwined and complex over time, especially as the application grows and has many contributors.
By doing the following;
- React creates an in-memory representation of the DOM (Virtual DOM) that gets updated every time state changes in your application. Each time the virtual DOM is created, it is compared to the previous version and the real DOM gets “patched” with the differences. The only parts of the DOM that get updated are the parts that have changed, rather than rebuilding the entire DOM.
- There are usually two types of React components, Container components and Presentation components. Container components house the logic (perhaps business rules or AJAX requests) and pass data to child presentation components which contain no logic and only display data passed from the parent. Child components are often very small and self-contained, making them easy to unit test (ensure quality) and easy to reuse in many places.
- Most of all, React creates consistency and highly encourages (but not requires) a team of developers to write code in a standard way, making onboarding of new team members easier and longer term maintainability easier.
In a nutshell, React is fast, structured, and easier to maintain for teams of developers.
We have spoken a lot so far about React and what it brings to the table, but do you even need a framework/library at all?
Short answer: yes.
Long answer: no, but.
Explanation Strictly speaking, with investment in time and effort, you can build dynamic websites yourself without a framework.
At a minimum, your website will probably need some of the following features;
- Trigger changes somewhere on your page based on a user interaction. Let’s say you are building an e-commerce site that has a list of products and a basket. When you click an “Add” button the product is added to the basket and the basket quantity gets updated visually on the page without a page refresh. You could use
document.querySelectorto grab the basket quantity element and update the
addEventListenerto each input field, and capture the users input and store it somewhere, ready to be sent possibly to your remote server.
- The ability to make asynchronous requests to the server. You can use the built-in and universally supported
XMLHttpRequestobject to do this with minimal code.
React is a fast, lightweight, feature rich library that helps us build dynamic web and mobile applications. You probably want to use React because it promotes small, reusable pieces called components, which promotes structure and consistency. React helps you to write more robust, easier to maintain code especially for larger teams of developers. React is very performant, which it achieves, in part, by intelligently patching the DOM when the state of your components changes. React is not strictly necessary to build a modern website today, you could roll-your-own framework, but the rich out-of-the-box feature set can help you build quality websites more rapidly.
About the author
I am Jon Preece, an experienced website and software developer from the United Kingdom, based in Manchester.
Throughout my 10+ year professional career I have worked in many sectors, including; e-commerce, financial services, marketing, healthcare, travel and accountancy. Get in touch via Twitter.