Why should I Consider React? – BrowserStudios

I am far from evangelising for FB products or React. All this post is about is to show why React should be considered for your next project.

If you want to consider React as the best option to work on your web development then you should first know what React is and how it works. Maybe you already know that React is a JavaScript library for your user interface and was created by collaboration between Facebook and Instagram. React is used by companies like Yahoo, Airbnb, Sony, Facebook and Instagram.  It encourages the creation of reusable UI components, which present data that change over time with a top down approach. I think that React has the right component model and good APIs with access to React’s in-browser debugger tools, vibrant component ecosystem, and more.

But is that all to know about this JavaScript library! Maybe not! You should know how to work with it plus figure out the advantages. This is the content:

• Render on client and server
• Work component oriented
• SEO friendly
• Virtual DOM
• Templates
• Events
• AddOns

Let’s discuss the reasons why you should use React.Js.:

01. Renderable on both client and server:

The very first reason to consider React is, if you are using this, you don’t need to know the techniques to pre render your pages. It can render both the client and server. You can use the concept of React which is called Virtual DOM (discussed subsequently) which gives your UI a great performance boost. React provides a method, renderComponentToStaticMarkup, that takes a React component and returns its HTML markup as a string. Meaning, you can simply pass the method output into a templating engine and send the client the resulting HTML page.

02.  Working on component oriented development:

It’s no secret that components are the future of the web. Whether it’s to-the-spec web components or some similar abstraction, if your framework doesn’t have a good component story, you’re using the wrong one (although most of the big ones do). By treating components as building blocks for other components, we build bigger and more complex components. By expressing your UI in reusable components you achieve separation of concerns. That means that a component shouldn’t try to do more than one thing. Rather it should do only one job and anytime you need to separate the concerns you build new components. In times of ES6 and ES7 extending and overwriting functionality is just the best thing that happened. The problem is that building apps is building components, so you inevitably are forced back into the manual DOM management to create your app-specific components (its the same as if you had to create directives in Angular). Here is an example written in ES2016. The first part is a class that extends from React Component and acts as a binding helper.

class BindComponent extends React.Component
{
    /**
     * No Autobinding:
     * Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance.
     * https://facebook.github.io/react/docs/reusable-components.html
     *
     * Solution:
     * http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes
     * "we've reduced the tedium of binding multiple instance methods to `this` by writing a `_bind` helper method in our `BaseComponent`"
     * @param methods
     * @private
     */
    _bind(...methods)
    {
        methods.forEach((method) =>
        {
            this[method] = this[method].bind(this);
        });
    }
}

_.extend(Classes,{BindComponent});

The following class renders and image wrapped in a link with a link component. This code snipped doesn’t deal with separation of concerns but it definitely shows the power of React using ES2016.

/**
 * @type {ListItemBase}
 */
class ListImageItemBase extends BindComponent
{
    /**
     * constructor for class
     * @param props
     */
    constructor(props) {
        super(props);
    }

    render()
    {
        let data = _.extend({},profile,this.props.data),
            self = this;

        return (
            
                
                    {data.name}
                
                
                     
        );
    }
}

_.extend(Classes,{ListImageItemBase});

03. Best Option for SEO:

Thanks to Node.js and io.js, we’ve got servers which are designed to run javascript content. The fact is JavaScript frameworks are not that SEO friendly. But things have changed since React has come to lime light. The server rendering made possible via React.renderComponentToString. The visitor will receive the already rendered page of markup, which the React application will detect once it has downloaded and run. If you are interested in learning more about this, I suggest searching for “Isomorphic JavaScript” or “Isomorphic React”, as this is becoming the term for JavaScript applications that use a single code base to render on both the server and client. You don’t need to do tricks like phantom.js.

04. Virtual DOM is faster than you think:

React creates a tree of custom objects representing a part of the DOM. For example, instead of creating an actual DIV element containing a UL element, it creates a React.div object that contains a React.ul object. It can manipulate these objects very quickly without actually touching the real DOM or going through the DOM API. To render components it uses this virtual DOM representation to diff the new DOM update in order to only update know which parts to update. You can think of the virtual DOM like a blueprint. It contains all the specifications to build the DOM. It really sounds like a lot of work for only small changes in the DOM but because it doesn’t require all the heavyweight that goes into the real DOM, it can be created and changed much more easily.

05. Templates are of no use for Reacts:

Basically, people use templates or HTML directives to make the web application UIs. These help to allow the user in dictating the abstraction set. But Reacts approach is different to that. It breaks the components and uses a full featured programming language. It is a great advantage for you if you are using React. React components are far more powerful than Angular templates; they should be compared with Angular’s directives instead. [Directives are Angular’s way of creating custom elements]. Here is a link to a page that has a good variety about current tempting engines, not similar to React. It’s just so different!

06. Handles Event right:

You should not get scared of the inconsistent DOM APIs because React is there for you. It will take care to bubble and will capture events according to W3C spec. React normalizes events so that they have consistent properties across different browsers.

07. Excellent Usages of React Addons:

Do you know what React Addons are? It offers additional utilities that can help you write better UIs. You can use the Animation and Two way data binding Addons. You can also use the testing addon to test React components using test framework of your choice. There are also several other  addons that you can get easily.

08. Famous brands most preferred choice:

Though React.Js is now open for all, it was basically developed for Facebook initially. But when the creators understood that something awesome was made by them, they decided to share it with the world.

And for this, React has now become the most preferred choice. You may notice that Instragram’s entire website is developed with React. Other successful companies are using React such as The New York Times, BBC, Dailymotion, IMDb, Yahoo, and many others.

Components are the best base for the web development. Today or tomorrow, I will flourish. But right now React is there to help you and it always takes the components to another level. Through this, you will be able to create your own components and you can reuse it later. So don’t think twice and use React as your tool for web development.

So, if you’re ready to partner with a web developer who can truly harness the potential of React then let’s connect.

Email – michel.herszak@gmail.com

Twitter – @MHerszak (twitter.com/MHerszak)

Want to know about the way in which I work? Great, you can get started with an overview of just how I approach a project right here.