Why are we using React.js in our projects?

Programming interactive user interfaces using JavaScript might be a tough task. User calls some action and we need to update his view - manipulating DOM using tool like jQuery. It just doesn’t feel good enough to modify document’s elements by hand. It is also really hard to re-use already written parts of UI and compose them with each other.

Imagine if there was one tool, that would solve all these problems and help you deliver your front-end much faster. What if you didn’t have to worry about this whole DOM stuff when you just want to update the view?

How would you feel being as efficient as when developing your Rails backend, when it comes to user interface?

Here comes React.js!

Why react?

We are building projects with Facebook’s React.js for more than year. There are many reason why we stick with this choice.

React’s only responsibility is to build composable and reactive user interfaces. The power of this tool comes from its simplicity. Learning curve of React is very low, so any new developer comming to project based on React, had no problems with jumping in.

In projects, where we adopted React, we noticed good things happening. The first and the most important, we shipped our front-end significantly faster. We could write really complex UI parts and easily compose them with each other. Second, as our apps grew, we improved our code maintainability. Spending less time on maintaining code means more time spent on delivering business value for our customers.

A little bit of theory

React objects are called components. Each of them may contain data and renders view in a declarative way - based only on current data state.

Each React component has 2 inputs:

props - shortcut of properties, these are mean to be immutable
state - mutable

After changing the state, React will automatically re-render the component to answer a new input.

In addition, all React components must implement render method, which must return another React object or null (from version 0.11).

See it in action!

Assume that we got to create a list of books with a dynamic search.

First, we should create a simple book component that represent single book on a list.

class BooksListItem extends React.Component {
  render() {
    return(
      <li>{this.props.book.name}</li>
    )
  }
}

To build HTML structure I used built-in React.DOM components, which corresponds to standard HTML elements. In first argument, I pass the empty props object, the second one is just the content of my <li> tag.

Moving on to the full list of Book items

class BooksList extends React.Component {
  render() {
    var books;
    this.props.books.forEach((book) => {
      books.push(<BookListItem book={book} />);
    });

    return (<ul>{books}</ul>);
  }
}

Ok, we are able to display list of books. Now it is high time to implement search. Let’s modify our BooksList component. We need to add form input and handle its changes.


class BooksList extends React.Component {
  constructor(props) {
    // Passing props to React.Component constructor
    super(props)
    // Setting initial state. By default `this.state` is null.
    this.state = { search: '' };

    // Binding functions to React Components instances - it is required to access
    // state and props from class methods other than `render`.
    this.setSearch = this.setSearch.bind(this);
    this.books = this.books.bind(this);
  }

  setSearch(event) {
    this.setState({search: event.target.value});
  }

  booksList() {
    return this.props.books.filter((book) => {
      return book.name.indexOf(this.state.search) > -1;
    });
  }

  render() {
    return (
      <div>
        {this.searchInput()}
        {this.booksList()}
      </div>
    );
  }

  searchInput() {
    return (
      <input name="search" onChange={this.setSearch} placeholder="Search" />
    );
  }

  books() {
    var books = [];
    this.props.books.forEach((book) => {
      books.push(<BooksListItem book={book} />);
    });

    return (<ul>{books}</ul>);
  }
}

You can see working code below in JSBin playground.

JS Bin on jsbin.com

That’s all you need. After you type something into search input, React will automatically re-render the book list to contain only filtered items.

Getting to an end

Compared to another solutions, you won’t spend much time learning React. You should really give it a shot in your project.

We prepared set of practical exercises called React Koans. They are free and are turned out to be a great help for hundreds of people.

If you look for more information on React, sign-up for our newsletter below.

Why react?

A little bit of theory

See it in action!

React.js by Example

Getting to an end