React — Short Discussion

React is a powerful JavaScript library for building dynamic user interfaces, particularly for single-page applications. This brief discusses React’s core concepts and its impact on modern web development.

What is React.js?

• Developed by Facebook
• React is a view layer library, not a framework like Backbone, Angular, etc.
• You can’t use React to build a fully-functional web app

Why was React developed?

• The complexity of two-way data binding
• Bad UX from using “cascading updates” of DOM tree
• A lot of data on a page changing over time
• The complexity of Facebook’s UI architecture
• The shift from MVC mentality

Easy to understand what a component will render

• Declarative code → predictable code
• You don’t really need to study JS in the view file in order to understand what the file does

React is nothing but the view

• No events
• No XHR
• No data/models
• No promises / deferred
• No idea how to add all of the above

Why should I use React?

• Easy to read and understand views
• Concept of components is the future of web development
• If your page uses a lot of fast updating data or real-time data — React is the way to go
• Once you and your team is over React’s learning curve, developing your app will become a lot faster

Is switching to React easy?

Understanding how it works will take time and will slow you down at first (but once you and your team get it, things will start happening much faster)

Fundamentals

Most important terms in React

Component

Components are self-contained reusable building blocks of web application.

Get Anik Sarker’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

React components are basically just idempotent functions (same input produces same output).

They describe your UI at any point in time, just like a server-rendered app.

Props

• Passed down to component from parent component and represents data for the component
• accessed via this.props

render: function() {
    var someProp = 'bar';
    
    console.log('component render()', this.props);
    return <div>
        <AnotherComponent foo={someProp} model={this.props.model} />
    </div>;

State

• Represents internal state of the component
• Accessed via this.state
• When a component’s state data changes, the rendered markup will be updated by re-invoking render() method

render: function() {
    return <h3>Click count: 
        <span className='label label-default'>{this.state.clicks}</span>
    </h3>;
}

JSX

• Arguably, one of the coolest things in React
• XML-like syntax for generating component’s HTML
• Easier to read and understand large DOM trees
• Translates to plain JavaScript using react-tools

/** @jsx React.DOM */
render: function () {
    return <div>
        <h2>
            <strong>Example 4:</strong>  React App
        </h2>
    </div>;
}
/** regular DOM */
render: function () {
    return React.DOM.div(null, 
        React.DOM.h2(null, React.DOM.strong(null, "Example 4:"), " React App")
    );
}

Virtual DOM

• The virtual DOM is used for efficient re-rendering of the DOM
• React aims to re-render the virtual tree only when the state changes
• Uses 2 virtual trees (new and previous) to find differences and batch update real DOM
• Observes data changes (setState) and does dirty-checking to know when to re-render component
• Whenever possible, does not update entire component in real DOM — only computes a patch operation that updates part of the DOM