First Few Days with React

Why Learn React?

I started learning React for a few reasons. Number one: coding and learning are fun. It is something I enjoy doing. Days I get to write code are always good days. Number two: React is a popular JavaScript library created by Facebook. Knowing React makes me that much better of a hire. I am already familiar with Angular so why not take things a step further. Number three: learning React gives me the ability to make mobile apps with React Native.

What is React?

React was created by Facebook to solve the problem of “building large applications with data that changes over time.” Facebook has over a billion active users a month. Instagram has over 500 million a month. If there is a company who is going to know about building a large application, it is Facebook.

Using the same design as React, you can build mobile apps across all platforms using React Native. Now not only am I a web developer, I can be a mobile developer as well. Using JavaScript I can create apps that are identical to apps created in Objective-C or Java. You could have these apps on your phone and would have no idea they were written using React Native.

React voting app

Initial REACTions (sorry not sorry)

I am really digging React. I have barely got my feet wet but initial impressions tells me this is something I will use a lot. So far, I have done about 50% of Codecademy’s ReactJS part 1 and the first app tutorial of Fullstack React.

The Fullstack React tutorial walked me through the beginning basics of creating an app in React. I learned about components, sending data through props, creating and updating state, and then had a functioning app with the ability to up vote. As any good tutorial should do, I was then sent off on my own to add the down vote ability as well as the ability to sort the items ascending and descending. At this point I was feeling pretty good about React.

Things I Learned

React uses JSX which is a JavaScript Extension. You write code that looks a lot like HTML but it is compiled into JavaScript. For example, the part of the voting app that renders each product looks like:

const Product = React.createClass({
  handleUpVote: function () {
    this.props.onUpVote(this.props.id);
  },
  handleDownVote: function () {
    this.props.onDownVote(this.props.id);
  },
  render: function() {
    return (
      <div className ='item'>
        <div className ='image'>
          <img src ={this.props.product_image_url} />
        </div>
        <div className ='middle aligned content'>
        <div className='header'>
          <a onClick={this.handleUpVote}>
            <i className='large caret up icon'></i>
          </a>
          <a onClick={this.handleDownVote}>
            <i className='large caret down icon'></i>
          </a>
          {this.props.votes}
        </div>
          <div className ='description'>
            <a href={this.props.url}>
              {this.props.title}
            </a>
            <p>{this.props.description}</p>
          </div>
          <div className ='extra'>
            <span>Submitted by:</span>
          <img
            className ='ui avatar image'
            src={this.props.submitter_avatar_url}
          />
          </div>
        </div>
      </div>
    );
  },
});

Props is how React sends data from the parent to the child. In the case of the voting app, the above is our child. It is receiving the data from our parent:

const ProductList = React.createClass({
  // code for state, sorting, and handling votes not shown
  render: function() {
    const products = this.state.products.map((product) => {
      return (
        <Product
          key={'product-' + product.id}
          id={product.id}
          title={product.title}
          description={product.description}
          url={product.url}
          votes={product.votes}
          submitter_avatar_url={product.submitter_avatar_url}
          product_image_url={product.product_image_url}
          onUpVote={this.handleProductUpVote}
          onDownVote={this.handleProductDownVote}
          />
      );
    });
    return (
      <div className='ui items'>
        //sorting code not shown
        {products}
      </div>
    );
  },
});

For each product that is in our products array, we are creating the props to be sent down to our child. These props are immutable. The children can read them but they cannot modify them.

You will notice in our props we have a key={‘product-’ + product.id}. However, in our array of hashes each one looks like:

{
  id: 1,
  title: 'Yellow Pail',
  description: 'On-demand sand castle construction expertise.',
  url: '#',
  votes: generateVoteCount(),
  submitter_avatar_url: 'images/avatars/daniel.jpg',
  product_image_url: 'images/products/image-aqua.png',
}

So why are we adding in a key? If you don’t, you’ll notice a message in your browser’s dev tools:

Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of `ProductList`. See https://fb.me/react-warning-keys for more information.

Assigning a key makes sure that each child can be identified across render passes.

You may have noticed that when creating the variables, I have used const instead of var. Both const and let were both introduced in ES6 and are blocked scoped while var is function scoped. You will want to use const when the variable will be “constant” and not changed anywhere else in the code. If it will be changed at some point you would use let.

That is where I am at so far. Next up is a time tracking app where I will get to dive in a little deeper into React. I will also probably do more of the Codecademy React course as well.

Graduate of Flatiron School’s Full Stack Web Developer Program. Follow me on Twitter @thebrianemory. Follow me here, click the green heart to show some love, leave a comment, and get in touch!