React Tutorial: When to Use React and Why
It’s important to keep in mind that React is a library, not a complete framework, like Angular or Vue. It is this simplicity that is what makes it very easy to learn. It can, however, be combined with other third-party libraries for powerful capabilities that rival large frameworks. React is a front-end library, specifically focused on building user interfaces that are complex and responsive for web applications. Once you learn React.js, you can also apply the same concepts to React Native to develop mobile applications, as well.
Projects that Need React
If your project involves many components with different, often changing states – active/inactive navigation items, accordion sections expanded/collapsed, dynamic inputs, buttons active/disabled, user login and access permissions – then the project may be a good fit for React. React helps you manage those changing states and dynamically present different views to the user based on state information.
React’s declarative nature of components makes it very easy to get a handle around these complex structures and keep things in check as the application grows in scale and scope.
Efficiency is one of React’s key points. A big part of its efficiency comes from React’s use of a Virtual DOM. React keeps a virtual copy of the page’s DOM behind the scenes. When a change occurs, React compares the current DOM with the incoming change being very careful to only update what has changed. This causes the browser to only re-render a small part of the page, instead of the entire thing. This makes React much more efficient and great for complex applications where changes occur frequently.
No React tutorial would be complete without mentioning reusable components. Components are first class members in React and component-based web development is here to stay. React supports the creation of components that you can call at any time, combine, and nest with other components. This saves a lot of time for the developer, since something that has been built once can get reused in multiple places throughout the application. It also speeds up the process of making changes or updates to a component. Think of components as the lego blocks that fit together to make up your web application.
Components can even be easily shared between multiple applications as your project scales out and grows.
Redux & Other Libraries
React gets especially powerful when you combine it with other libraries. One of the most popular is Redux. Redux follows a simplified flux pattern and provides a single state container where you keep all your application data. It becomes a single source of truth for your application’s state, and it makes it easier to observe and manipulate relevant data. React then re-renders with any change in the data container.
Another valable library that supports the component driven design concept is Storybook. Storybook allows for the isolated design and hosting of individual components. Being able to do this allows developers to build highly reusable components that are not tightly bound to the context in which they will live in the application. It also provides a great playground for designers and developers to talk on an even playing field.
Community Support & Developer Tools
Finally, React has a large user base and active support from the engineers at Facebook. It’s a growing and evolving library. If you have questions or need to borrow some code to get a component up and running, React’s open source community is great. It’s also easy to find a free React tutorial online to get started actually writing code. We recommend the video tutorial linked at the end of this article.
They also have developer tools for inspecting and debugging your applications. You can see exactly what is going on with your application in real time, including observing the virtual DOM. This makes it super easy to diagnose problems and double check that everything is working as it should.
Next Steps Beyond This React Tutorial
We hope you enjoyed this introductory React tutorial that explains what React is, when you should use it, and how it works.
If you’re looking for help implementing a React project, check out our React consulting practice, where you can get expert help creating responsive web app interfaces.
Also published on Medium.