Cheat sheet to common React terms

#react #cheatsheet #frontend #javascript

React.js is a Javsacript library that is created by Facebook. The benefits of using react is enabling code reusability, faster development time and higher web performance. If you remember the days of implementing AJAX for page components update, you will find that react makes creating dynamic UI a breeze.

The popularity of React among developers and enterprise as the top frontend framework remains almost unchallenged by other popular frontend framework like angular and vue.

If you are just starting to venture into frontend web development, React is a good place to look onto of your Javascript toolbox. Here is a quick cheat sheet to introduce you to the world of React.

Components

To understand any React codebase, you need to think in terms of components. Think of the web as many rectangles. Even for irregular shapes, you can draw rectangles around them. These rectangles might overlap each other, have a certain padding or margin around them, but they are all certainly derive from a rectangle.

If you want to see the components in actions, the React documentation has a great breakdown on components-based thinking. Next, we will look at the two common types of React components.

Read: Thinking in React -- React documentation

Class

Previously, a class component in React is one of the few way that you can hold state in your components. In a class component, there will be lifecycle methods to determine if the component should update the rendered elements.

Commonly used lifecycle methods are: componentDidMount: invoked when the component is mounted on to the tree componentDidUpdate: invoked immediately after the update occur componentWillUnmount: invoked immediately before the component is unmounted. Invalidating timeres, canceling network request or cleaning up subscription is done in this method

A class component with state, props (more on that later) and methods will look something like this.

class CatFeeder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      batteryLife: 93,
    };
  }

  componentDidMount() {
    this.feedCats();
  }

  componentDidUpdate(prevProps, prevState) {
    if (
      this.state.batteryLife !== prevState.batteryLife &&
      this.state.batteryLife === 0
    ) {
      this.props.switchOff();
    }
  }

  feedCats() {
    this.setState(state => {
      return { batteryLife: state.batteryLife - 5 };
    });
  }

  render() {
    const { catToFeed } = this.props;

    return (
      <div>
        <h1>The ultimate cat feeder</h1>
        <p>Currently feeding: {catToFeed}</p>
      </div>
    );
  }
}

Functional components

As we can see from above, a class component of React can become verbose quickly with a lot of boilerplate code. Another type of component, we can write is functional components.

As the name suggest, we will write functional components as a function declaration or a fat arrow function. Previously, functional components are pure presentational components that do not hold state. However, since the introduction of React hooks (e.g. useState & useEffect in the example below), we are now able to hold state in the functional components. The community at large, seems to have move to favour more in functional components and hooks over class components.

A function compoennt with state, props, will look something like this.

const CatFeeder = props => {
  const { switchOff, catToFeed } = props;
  const [batteryLife, setBatteryLife] = useState(null);

  useEffect(() => {
    feedCats();
  }, []);

  function feedCats() {
    setBatteryLife(prevBatteryLife => prevBatteryLife - 5);
  }

  useEffect(() => {
    if (batteryLife === 0) {
      switchOff();
    }
  }, [batteryLife]);

  return (
    <div>
      <h1>The ultimate cat feeder</h1>
      <p>Currently feeding: {catToFeed}</p>
    </div>
  );
};

Hooks, state, and props

At this point, you might be wondering, what exactly is the difference among hooks, state and props. These are the fundamental building block of React. In fact, I will go further to say that, on most web app, besides building the interface, you are mainly managing the browser state, either persistent (browser storage) or non persistent (web memory).

State and props

As the name mention, state is a piece of state held by the component. It is seen in this.state in the class component and useState in the functional components. React employs a unidirectional data flow. A state in a parent component can be passed down as props in the child component.

Let's imagine that we composite our CatFeeder as part of the component of the whole CatFeederMachine. The parent component CatFeederMachine will holds the isOn state. The methods to control the isOn state is defined in the parent component and pass down to the child components as props.

Hooks

Now that you understand the difference between state and props, we can start to grasp the concept of hooks.

Hooks greatly simplify our component logic and promote reusability of the stateful logic.

Commonly used hooks are useState: store state. As seen above, a useState hook destruct to [state, setState] useEffect: trigger sideEffect when there is a change. Setting state in useEffect might sometimes cause some rendering issue. useReducer: store state and return state with a dispatch method. Is usually used for more complex methods. useContext: a context object that allows the value to be passed around components that are children of the context

Besides the hooks api, you can also define your own custom to share logic between components. More will be shared on a separate tutorial.

These are what I think are good for dipping your toes into React ecosystem. There are many more topics that we have not covered, like folder structure, flux system and common practices and models in React. If you enjoy this tutorial, stay tuned to my future articles on more advanced React concepts.