Day 7: Mastering React

The Feynman technique says that teaching a subject makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post

Passing arguments to components

Remember that our components can be used as custom HTML tags in JSX? To pass arguments to them, we only have to write a custom HTML attribute for it:

const Recipe = (props) => {
  return <p>Hello, {props.name}</p>;
}

let target = document.body;
ReactDOM.render(<Recipe name="Fred" />, target);

Note that props.name is inside a curly bracket, because they need to be evaluated before putting it into the DOM.

For properties of ES6 class style components, you need to write this.props.name instead.

React also allows setting default values for properties:

const Cupcake = (props) => {
  return <h1>The Return of {props.evil}!</h1>;
}

Cupcake.defaultProps = {
  evil: "Mr. Green"
};

You may also want to do type-checking on passed properties, to avoid headaches later on:

const Human = (props) => {
  return (<ul>
            <li>Number of arms: {props.armNum}</li>
          </ul>);
}

Human.propTypes = {
  armNum: PropTypes.integer.isRequired
}

PropTypes is a class imported from React. They can compare a lot of property types such as bool, string, func, and much more. isRequired means that this property must have a value passed to it.

React will throw up useful errors if this type-checking fails for any reason.

Note: Properties that are not string must be encapsulated in curly brackets.

States, the main feature of React

In a nutshell, states are data that changes over time (from user inputs, weather, etc.) React automatically updates states in real-time, which is the main strength of React. Note that only stateful components can use states.

States are isolated to its component, unless passed to a child component.

Here's the syntax of declaring one:

class StatefulComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Shite"
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};

Notice the this.state in the constructor function.

To update a state, use the the setter function setState(), it is not encouraged to update the states directly. This is because state updates are managed by React to be more performant (This also brings some asynchronous problem, which I haven't learned yet.)

The horror of this keyword

Okay, I'm totally confused by this one. If you want a function inside the ES6 style component to reference states or props, use this:

this.calcLife = this.calcLife.bind(this);

HELP ME

Afterwords

Completely beat up by React's states and this keyword. I'm gonna need to read more about it.

Overall, fun progress today. Got through almost half of the FreeCodeCamp lessons of React by now. I wanna eat snacks now.

Follow me on Github!
Also on Twitter!