Tips & Best Practices for Working With the React.js Library

React.js (also known as ReactJS or React) is an open-source, isomorphic JavaScript library for building user interfaces. Developed by Facebook, React.js takes a component-based approach to front-end web development, using server-side rendering and the Virtual DOM to provide a performance-oriented solution for designing encapsulated, reusable UI components.

Whether you’re diving into React.js for the first time or simply looking for a better way to manage your React.js projects, here are some tips and best practices to keep in mind as you bring your next project to life.

1. Learn the Flux Design Pattern

If you’re new to React.js, one of the first things you’ll often be told is that React is simply the “V” in MVC (Model View Controller)—anyone used to the last generation of JavaScript frameworks (like AngularJS) will usually have no trouble diving in once they understand the library’s primary role. That said, the MVC design pattern can start to get a little restrictive as you start to scale up your app—Facebook realized this and created a new application architecture called Flux to solve some of these issues. Flux is better suited to React because it places an emphasis on unidirectional data flow. Here are the three parts of Flux:

• Stores are similar to the models in MVC, except they manage the application state for a particular domain within the application.
• The Dispatcher is a simple single registry of callbacks to the stores within the application. It also manages the dependencies between stores.
• Views are the same as the view in MVC, except in the context of React and Flux, also include Controller-Views, which listen for change events and retrieve application state from stores as required.

Basically, all data in the application flows through the dispatcher, which acts as a central hub. This data is tracked as Actions, which are provided to the dispatcher in an action creator method, often as a result of a user interacting with the view. The dispatcher invokes the registered callback, effectively dispatching the action to all stores that have registered with that callback. The stores in turn relay that change event to the controller-views to alert them of the change. The controller-views listen for events, retrieve data from the appropriate stores as required and re-render themselves and all their children in the component tree accordingly.

2. Get Used to Immutable States

Immutable objects cannot be modified once created, and when it comes to a library that owes its performance to server-side rendering, that inherent thread safety can lead to less headaches and better performance overall. Now you could choose to achieve immutability in JavaScript the old fashioned way by writing extremely careful code, or you could simply use Facebook’s Immutable.js library and gain access to persistent immutable data structures that can be used in your application as required for improved rendering performance.

3. Use Functional Components as Much as Possible

In React.js, a functional component is simply a component that has no state or methods—in other words, a simple JavaScript function. Instead of extending the React.Component class as you would when you normally declare a React component:

import React from 'react';class ExampleComponent extends React.Component { render() { return ( <div>{this.props.message}</div> ); } }

You can use const and the props argument to simply return the value of the render method of the original implementation like so:

import React from 'react'; const ExampleComponent = props => { return ( <div>{this.props.message}</div> ); }

So why use stateless functional components? They’re simpler. If a component gets all its data exclusively from props, it can be treated as a simple presentational component that is much easier to test. Not having to worry about state manipulation or lifecycle methods means you won’t need to install any libraries when testing your code. Being mindful of when you actually need to worry about managing state can help lead to writing cleaner, more testable code.

4. Embrace JSX and the Components-Based Future of the Web

Mixing your view and controller elements into a single file seems to fly in the face of what many web developers were taught, but as we transition from MVC to a more components-oriented approach, mixing HTML and JavaScript can actually make a lot of sense, especially when you recall that React is really only concerned with the view layer—separation of concerns is still respected. The other thing to note is that JSX is not the same as a templating language, it is a DSL (domain specific language) over JavaScript and only looks like HTML on the surface. The HTML-like syntax is really only there to make your life easier. Now when you want to render a piece of the DOM, you can “declare its HTML” directly within your JavaScript like so:

class MyComponent extends React.Component { render() { return ( <h1>My Component</h1> ); } }

Basically any time you would have had to pause to remember what library or framework specific syntax was required to create a new element and render it, you can just return its HTML equivalent. As an added bonus it also makes your code more readable and easily understandable by less technical members of the team.

Conclusion

Whether you’re a developer looking to explore this powerful new library for rendering views, or an entrepreneur trying to assess a new technology for their product, these beginner tips and best practices should help give you the confidence to dive right into the world of React.

Get more work done, faster with freelance help. Post a job today and get started!