React Patterns

After learning React for a few weeks, some key patterns to use for building apps.

Starting

React by itself doesn't make a complete application, so we use it as part of a bigger system. We still call it a "React App" beacuse...(?) React does the UI which may be the core of the app. And many of the other tools mentioned can be more or less transparent.

This is roughly what a bigger system might look like and where React fits in:

Building this way is generally referred to as "modern". "Modern web development" is building "modern web apps" with "modern tools" or a modern "toolchain" or a modern "environment".

React Components

A React Component is a function that takes a props object and returns a JSX expression. Components should be reuseable. Small Components that are responsible for one thing are more reuseable. Components can be defined as functions or classes. Initially, only components defined as classes could use certain React features such as state. In recent versions, functional components have become more powerful. It is common practice to name classes in UpperCamelCase (unlike camelCase.)

A Component defined as a class must have a render() method, which must return something. The render function can also have code before the return statement.

Listing elements with .map()

Given an array of (anything), we can render it in JSX using the .map() function. Given an array and a function, it will run the function on every on the array, and return a new array with the results. The function we'll give to .map() is like a JSX template that grabs values from the current element and fills them into a JSX expression.

const people = ['Rowe', 'Prevost', 'Gare'];

const peopleLis = people.map((person, i) =>
<li key={'person_' + i}>{person}</li>
);

example from Codecademy {: .cite}

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

example from React docs {: .cite}

.map() takes one argument, which is a function, but that function can take four arguments. Here we're using the first two. The first paramater, currentValue, is given the argument person, so person will be the variable we use inside the function to refer to the value of the current element being processed in the array. The second is index, and we're giving it i, so i will be the variable we can use inside the function to refer to the index of the current element.

The index will be a unique value for each element in the array, so we can use it to assign unique keys to every JSX element we create. React will complain if we don't add unique keys. According to the docs, "Keys should be given to the elements inside the array to give the elements a stable identity".

State with Hooks

Hooks are a relatively late addition to React. They bring state to functional components. Previously state was only available for classes. This should make it easier to develop with React, becuause it avoids the issues related to classes. Expand...

Basic interactions