What Is React?
What Is React?
Thinking about adopting React.js for your next front-end development project? Read on to get a great overview of why it is so popular.
Join the DZone community and get the full member experience.Join For Free
Access over 20 APIs and mobile SDKs, up to 250k transactions free with no credit card required
React is an extremely powerful library created by Facebook for front-end development, which allows the developer to build user interfaces.
At the end of September 2017, Facebook announced the release of React v16.0, which included new features, like error boundaries, portals, improved server-side rendering, and reduced file size, and a complete rewrite of the internals. The rewrite will ultimately enable support for asynchronous rendering, which makes it possible to process large component trees without blocking the main execution thread.
As React is component-based, you can build encapsulated components, where each manages its own state. You can use and reuse these components to create complex UIs.
It can also be used to render on the server using Node.js and build powerful mobile apps with React Native.
React’s usage allows developers to create single-page applications (SPAs), which avoid refreshing to display new content, bringing the user a great look and feel.
Here is a link to an extensive list of sites that are using this library. For a quick glance, here are some of them:
- Khan Academy
So, a lot of sites and companies use React. Want to know why? Here’s what React has to offer!
React works really quickly when used the right way. One of the most important rules is to correctly utilize the features provided by its virtual DOM. The main problem with the DOM is the slow process of creating dynamic user interfaces. But instead of interacting with the DOM directly, you can work with a lightweight copy.
You can make changes to the copy and then apply those changes to the actual DOM. While you’re at it, you can also compare the DOM tree with its virtual copy. If there are differences between the two, only the differences will be redrawn. This avoids costly DOM operations and performs updates in a very efficient manner.
The logic is based on state, which can also be thought of as private data. Any changes to the UI should be related to state changes. This approach provides automatic DOM re-rendering, so developers don’t need to worry about UI changes.
By correctly utilizing state, it is easy to create well-flowing, dynamic, secure, and user-friendly applications.
To help with state and data, developers can seamlessly integrate Redux, which is a predictable data-flow architecture. Redux maintains the state of an entire application in a single immutable state tree, which can’t be changed directly.
React components have their own lifecycles based on state and render logic. Developers can track state changes and component mount events. With all of its lifecycle features, React provides a very powerful and flexible way to work with data and UI.
It is possible to control the moment at which the component is created and inserted into the DOM, with methods like
componentDidMount(); check when a component is being re-rendered, with
componentWillReceiveProps(); and handle unmounting. It is now also possible to catch errors during rendering with
componentDidCatch(), which allows you to recover gracefully.
Other Great Things
A Simple Example of Using JSX
There are a lot of third-party libraries created specifically for React (a simple search of the keyword ‘react’ in npm/yarn returns more than 40,000 results). This allows developers to focus on developing and creating the software itself.
This ecosystem is getting larger every day, with countless developers around the world contributing to it.
The Mern Stack
- Front-end and backend developers use the same programming language.
- Less effort in integrating the front- and backend together.
- More reusable code.
- Uniform data format – JSON.
Using MERN saves time and effort while developing.
There are a couple of things to consider when it comes to React's popularity:
- One-way data binding facilitates easy-to-manage state.
- Reusable components.
- MERN stack.
- Virtual DOM.
- React Native.
Of course, React also has its disadvantages – for example, it is not a framework, and it is only the V in MVC (model-view-controller) – but there are still a lot of good reasons to use it.
Published at DZone with permission of Ilaha Hajiyeva . See the original article here.
Opinions expressed by DZone contributors are their own.