Getting Started with React.js

I decided I really needed to start learning React.js. It's the big thing these days, and I don't want to get too far behind, so I'm starting to get on the bandwagon. I still have access to Pluralsight, which has been great so far for other stuff I've been doing, so I'm going through some of their tutorials on there. The first one I'm doing is React.js: Getting Started by Samer Buna. I'm going to just write a few notes as I go along, partly for me to remember better what I'm learning but hopefully to help out others who want to learn React.js as well. Remember, I'm still learning this, so if something's not exactly explained right, give me a little slack. I'll probably come back and fix the blog post. ;)

React.js is a "JavaScript library for building user interfaces". It's used by many as the "V" in MVC. You build the interface using Components, which have two parts: the state and the properties. The state of a component can change as needed; the properties can not. Any time the state is altered, React re-renders that component to the page. The Component outputs HTML to the browser. The Component returns JSX, which is similar to HTML as we know it, but will be converted into pure JavaScript by React. React then looks at the virtual DOM it created and re-renders only the parts that have changed and need re-rendering. This is part of what makes React so fast.

The following is an example of a React component:

var Button = React.createClass({
  getInitalState: function () {
    return { counter: 0 };
  },
  clickHandler: function () {
    this.setState({ counter: this.state.counter + 1 });
  },
  render: function () {
    return <button onClick={this.clickHandler}>{this.state.counter}</button>;
  },
});

This Component is a Button that shows the value of a counter. Each time it is clicked, 1 is added to the counter. the getInitialState function of the component allows you to set counter to use later; we then access counter by using this.state.counter. Remember, it's on the state because it changes.

To get that Component to render to the page, we add the following to our JSX file:

React.render(<Button />, document.getElementById('root'));

The React.render function takes two arguments: the React Component we created (in this case <Button />) and the node to which React will mount the outputted HTML. In this case, we will be mounting the outputted HTML to an element with ID equal to root.

When that code is compiled, a button will be added to the page, which, when clicked, will add 1 to the counter. React will take care of it each time it is clicked.

To explain the concept of properties, I think it will be best to split up the display of the counter and the button into their own Components, and then have a parent Component that will take care of inserting the two into our view. Below is all the code required:

var Button = React.createClass({
  render: function () {
    return <button onClick={this.props.localHandleClick}>+1</button>;
  },
});

var Result = React.createClass({
  render: function () {
    return <div>{this.props.localCounter}</div>;
  },
});

var Main = React.createClass({
  getInitialState: function () {
    return { counter: 0 };
  },
  handleClick: function () {
    this.setState({ counter: this.state.counter + 1 });
  },
  render: function () {
    return (
      <div>
        <Button localHandleClick={this.handleClick} />
        <Result localCounter={this.state.counter} />
      </div>
    );
  },
});

React.render(<Main />, document.getElementById('root'));

Basically, we put the button into one Component, the display of the counter into another, and a Main component that invokes the two. You can see that in the Main Component there are attributes to the Button and Result Components (localHandleClick and localCounter) which are accessed in their respective Component by using this.props.propertyName. These are accessed via this.props because inside of that Component, those properties will never change.

Hopefully this is a good overview of the very basics of what React.js has to offer. Here we see what a Component is, how to set a value on the state, how to change that, and how to access properties as well.

This whole way of coding and developing a UI is completely new to me. It seems a little weird so far, I'm not going to lie. But I'm also excited to see where it takes me. It's really popular right now and being used all over the place, so I'm sure I'll see it eventually. Hopefully I'll quickly get used to it and it will become more natural.