React for Back-End Devs: Parallels between React and Object Oriented Programming

Last updated at Tue, 05 Dec 2017 23:52:29 GMT

If you’re a developer who has primarily focused on back-end or scripting, building the front-end of an application can be a daunting task. Fortunately, Facebook has helped remove this barrier to entry with the ReactJS framework. One of several frameworks of its kind, React offers a design that is reminiscent of object oriented programming and digestible by any developer.

For back-end developers looking for some high-level exposure, the sections below are for you. I’ve outlined a few parallels between React and the traditional OOP you are familiar with for an easy entry point into building an app with the framework. Note that all these topics are both broader and more nuanced than described, but you can get a sense of React and how the knowledge you already have applies to it!

If you’re already interested, the full guide to getting started with React is excellent, and you can check it out here!

React is Declarative and Component Based

The React framework is declarative. In the familiar OOP pattern, React allows the defining of objects that contain and manipulate data without defining how they are used. The basic building block of a React application is the React.Component class. React views the UI as a state machine, and renders all of its components with a particular state.

Components: When creating a React application, you'll want to use the React.Component class. Any component classes you define should inherit from this class. Every React component knows how to render itself, using the render() method. To implement this method, return the necessary HTML required to render the component. See the example below:

class HelloWorldComponent extends React.Component {
    render() {
        return (<p>Hello World!</p>);
    }
} 

State and Props_:_ A React component's two main forms of data, that represent the component as a simple state machine. Prop variables are passed into the component by whatever object is rendering it, and referenced via this.props. State variables are declared in this.state.

class HelloWorldComponent extends React.Component {
    constructor(){
        super();
        this.state = {
            showText: true,
        };
    }

    render() {
        if (this.state.showText) {
            return (<p>{this.props.text}<p>);
        }
        return null;
    }
} 

Data Modeling

Now that you know a little about creating components, where do you start when creating your application? Similar to building a program using objected oriented design, we’ll want to start with data modeling!

We'll need to identify all the components that are required to create our application, what props those components will take, and what state variables each components will have, if any.

Separation of Concerns

React identifies the principle of separation of concerns as the purpose for using multiple components (as opposed to one single component), similar to OOP.  Following this principle, different sections of your UI that deal with different domains should be separate components.

Component Relationships : It's important to consider possible relationships between your components. In the same manner that objects can contain other objects, so can components. In React, nested components can have two types of relationships: owner/ownee and parent/child. The parent/child relationship is simple containment, where one component is nested in the other:

<Parent><Child /></Parent>

The owner/ownee relationship is created when one component sets the props for another, i.e. the ownee is created in the owner's render() method. Consider the following example. A confirmation window with an 'OK' and 'Close' button might be comprised of three components, a Window component, an OK Button component, and a Close Button component. Let's create this more complex Window component, but making it the owner of the OK button and Close button components.

var OKButton = React.createClass({
    render: function() {
        return (<button type="button">{this.props.text}</button>);
    }
});

var CloseButton = React.createClass({
    render: function() {
        return (<button type="button">{this.props.text}</button>);
    }
});

var Window = React.createClass({
    render: function() {
        return (
            <OKButton text="OK!" />
            <CloseButton text="Close" />  
        );
    }
});

ReactDOM.render(
    <Window />
    document.getElementById('example')
);

Repeatability: Identify components that could be reused. For example, in the scenario mentioned above, if both the OK and Close button render exactly the same but have different text, a single Button component could be used. The text value can be passed in a prop. Having reusable components can help keep a consistent UX across a larger application and allows for fewer classes.

var WindowButton = React.createClass({
    render: function() {
        return (<button type="button">{this.props.text}</button>);
    }
});

var Window = React.createClass({
    render: function() {
        return (
            <WindowButton text="OK!" />
            <WindowButton text="Close" />       
        );
    }
});

ReactDOM.render(
    <Window />
    document.getElementById('example')
);

Granularity

You'll want to break down your larger components into sets of smaller ones, just as you would with any object oriented design. It's similary beneficial to be more granular than not, just make sure you aren't losing clarity. An effective technique for creating your data model is start with the smallest component first and work your way upward until you have constructed it’s full-fledged parent.

The Data

Props: These are variables whose value is provided as input when rendering your component. Your component should render differently depending on these prop values. Since prop values are not mutable, passing props from an owner component to it's ownees helps to create consistency across the application. Prop variable types can also be validated when a component is created, to ensure that a component is rendered correctly (examples here).

State: In the React model, you'll want as many components as possible to be stateless. Ideally, most components should only receive data from props and use them in their render() method to create the necessary HTML/CSS.

When a state variable is needed (for example, a value to store whether a user has selected a radio-button), it's important to consider scope. A variable whose value is only needed within the context of single component should be a state variable within that component. If the variable is needed across multiple components, the varaible should be a state variable in the closest shared parent. The value can then be passed down to any nested components as a prop value. Again, this use of props will create consistency across your application.

Conclusion

I hope this brief guide helped outline how easy it can be for a back-end dev to pickup React. I encourage you to read the full ReactJS documentation, and start building the front-end of your app!