5 ways to improve your React app development

Just because that new job requires React experience, doesn’t mean you need to rescind your application. Flip that JavaScript, and incorporate some advice from expert developers.

React is a JavaScript library that supports the building of applications—specifically, user interfaces. Created by Facebook in 2011, React (aka React.js or ReactJS) lives up to its name by efficiently “reacting” and updating the browser’s Document Object Model (DOM) when any state changes are made.

While other app-dev framework options exist, like jQuery, Angular, and Vue, a summer report from TechBehemoths found that 75% of over 900 IT companies surveyed use React.js.

Here are some beginner React tips from application consultants who spoke with IT Brew.

“It can be very spaghetti.” A React UI is made up of components, which are just pieces of the interface itself. To stay organized and contain disparate, noodle-y lines of code, build a better, menu-like folder structure, according to Steve Bennett, senior technical project lead at Soliant Consulting. Bennett recommends making additional folders for individual components and subcomponents, like a button or navigation bar.

“The file name should match very closely to what…that component is doing,” Bennett told IT Brew.

“Try not to reinvent the wheel.” There’s no reason to bang your head against a wall trying to find a solution to an already-solved problem. With React’s Node Package Manager (NPM), you can add components by importing third-party libraries. Bennett, for example, frequently uses a third-party library Auth0 to handle authentication, to avoid repeatedly rewriting code.

Npmjs.com, which offers a variety of publicly available components, also provides stats on downloads and dependencies. After all, you want components that are reliable. “You want to see something that is being used frequently. You want to use something that has recent commits to it, which means that it’s being maintained,” Bennett recommended.

“We want to separate those parts.” One React rule from Kevin Schuchard, director of engineering at the app-dev service provider Briebug: Don’t mix business and UI. Create a distinction between business layer and presentational UI components.

Abstract business logic to its own file and into small atomic units, Schuchard suggested. With code that performs multiple functions, a programmer will likely have to test multiple scenarios. “Whereas, if you have more granular atomic code, the testing becomes a lot easier,” said Schuchard.

“We recommend testing early and often.” To make manual or automated testing easier, limit side effects in favor of pure functions, where nothing outside of a function can impact its functionality, said Schuchard, or abstract those side effects into their own layer: “We see a lot of projects really struggle to adopt testing, whether it’s for the time constraint, or it’s just too complex.”

“Look for reusability options.” Separate presentational components from logic wherever possible, said Dan Wilson, a senior software engineer at Troy Web Consulting. That way, the features can be deployed again elsewhere, and when designs change, you only have to update them in one spot. Wilson told IT Brew: “I’ve found that [designers] want things to be consistent. And if they decide to change something, it’s better to be able to change that design in one component and have it propagate through your app.”—BH

Do you work in IT or have information about your IT department you want to share? Email [email protected] or DM @BillyHurls on Twitter.