Making Your First React Component Raise Events and Update (update to v0.14.x)

My last article described creating a simple React component. This post will walk through adding a click event to that component. The click event will modify the data the component is displaying. React will automatically update the screen without us making any explicit requests based on the change in data.

We finished last time with a simple mock email registration form. The result looked like this:

The next task is to add a click event to the button. Clicking the button will call a function to update the state object of the React component. The result of those state changes will be reflected almost instantly. Let's start by adding a reference to a function in the button:

    React.createElement( "button", { disabled: this.state.disabled }, this.state.label)

becomes:

    React.createElement( "button", { onClick: this._onClick, disabled: this.state.disabled }, this.state.label)

Now when the click event fires, Javascript will look inside the React component for a function called onClick. Let's add one:

    _onClick: function () {
        this.setState({
            text: thankYou,
            label: 'Thank You',
            disabled: true
        });
    }

The word "this" seems to come up a lot more in React development than development in other patterns. This is normal and according to React's design. Until you venture into ES6 syntax, this will refer to the component instance.

The new function calls setState which all React components have. setState does two things: 1) it updates the state object, and 2) tells the React engine that a potential change has occurred. React takes that information and attempts to re-render the component and it's hierarchy of children. React maintains a virtual DOM which it will update with the new values. When all updates to the virtual DOM are complete, React removes the existing DOM elements and replaces them with the new virtual DOM.

Our code inside the component will look like this:

_onClick: function () {
        this.setState({
            text: thankYou,
            label: 'Thank You',
            disabled: true
        });
    },
    render: function render() {
        return React.createElement( "div", null,
         React.createElement( "p", null, this.state.text),
         React.createElement("input", {id: "email", disabled: this.state.disabled}),
         React.createElement( "button", { onClick: this.onClick, disabled: this.state.disabled}, this.state.label)
  );

In our example, both the input field and the button receive the disabled property in a disabled key. The HTML input and buttons will apply the disabled key as the "disabled" attribute that HTML elements can have. React already has all the code necessary to generate standard HTML elements. After the button is clicked, both HTML elements will be rendered with disabled = true, meaning both will become disabled.

This simple process could require a lot of code in standard Javascript or a two-way data binding framework. The simplicity that permeates much of React is very much on display here. Our code consists of defining a semantic structure and identifying values. Our click code is modifying those values. In neither case do we have the overhead of coordinating or syncing data. The result is an easy to read file that correlates strongly to what is on the screen.

React let's the developer focus on the what of application development. It asks "What do you want to show?" and "What data do you want in what you are showing?" The how, when, and why are all taken care of for you.

Full Example: