FullStack React Distilled 2

Yet another React tutorial

Guowei Lv

2 minute read

Component properties

Component takes properties, and spits out views on screen.

Let’s create the Product component to show how to use properties.

import React from "react";

class Product extends React.Component {
  render() {
    return (
      <div className="item">
        <div className="image">
          <img src={this.props.productImageUrl} alt="" />
        </div>
        <div className="middle aligned content">
          <div className="header">
            <a>
              <i className="large caret up icon" />
            </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.submitterAvatarUrl}
              alt=""
            />
          </div>
        </div>
      </div>
    );
  }
}

export default Product;

Notice how we use this.props all over the place. These properties are passed in when we create the component:

class ProductList extends Component {
  render() {
    const product = products[0];
    return (
      <div className="ui unstackable items">
        <Product
          id={product.id}
          title={product.title}
          description={product.description}
          url={product.url}
          votes={product.votes}
          submitterAvatarUrl={product.submitterAvatarUrl}
          productImageUrl={product.productImageUrl}
        />
      </div>
    );
  }
}

export default ProductList;

Now the list has one item which looks like

By using properties, components can be easily reused.

A List of Products

Next, let’s show a list of products instead of one.

It is very simple to do in React.

First, we sort the products based on the number of votes.

Second, we map the products to a list of Product components.

Last, return the list of Product components in the render function.

class ProductList extends Component {
  render() {
    const sorted = products.sort((a, b) => b.votes - a.votes);
    const productComponents = sorted.map(product => (
      <Product
        key={"product-" + product.id}
        id={product.id}
        title={product.title}
        description={product.description}
        url={product.url}
        votes={product.votes}
        submitterAvatarUrl={product.submitterAvatarUrl}
        productImageUrl={product.productImageUrl}
      />
    ));

    return <div className="ui unstackable items">{productComponents}</div>;
  }
}

Source code

comments powered by Disqus