React Tutorial: When to Use React and Why

by Jim Karg

React is a JavaScript library, created by the developers at Facebook and Instagram. They used it internally to develop responsive user interfaces for their web apps for several years before releasing the Reach library open source in 2013. Since then, React has grown in popularity and is now a powerhouse in the world of Javascript development. This React tutorial will give you an introduction to React, how it works, and when you should use it.

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

Not every project needs or should use React. It’s tempting as a developer to want to implement the shiny new library you’ve learned. However, React is a high-powered tool, especially when used in conjunction with a flux patterned library like Redux or MobX. If it is a very simple application, writing it directly in JavaScript can be the correct choice.

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.

Virtual DOM

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.

Reusable Components

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.

JSX Syntax

While you can use regular Javascript with React, JSX syntax allows for expanded functionality. Once you learn JSX, it actually becomes easier to write code for React, and React can easily transform that JSX code into a compatible format. JSX allows you to mix your HTML directly into the Javascript, without the need for separate template files. Doing so allows you to organize your code based on logical concerns (read: by component) and not by technology.

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.

React Native

An added bonus for learning React library is you can now create mobile apps using React Native. There is a slight hurdle of a few added things you’ll need to learn. However, React Native’s mobile apps compile the Javascript you write to native code, making the apps you develop look and feel like other platform-native apps.

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.

Get started with React by checking out the on-demand video Beginner’s Guide to React. There, you’ll be able to wet your feet in learning about this Javascript library.

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.

Originally published at Intertech Blog.