Random Color Picker

Button.js is the child component of Random.js

Button.js receives the onClick and the light props from Random.js 
Via the onClick prop, Button.js tells Random.js when it is clicked, which tells the onClick handler method in Random.js to act
Button.js is told by Random.js via the light prop whether the displayed background color is light or dark. And Button.js uses that information to set the css class to ‘light-button’ or ‘dark-button’

Most of the action takes place in Random.js
Next we’ll go through all the methods inside of Random.js

constructor(props) {
super(props);
this.state = { color: [23, 58, 100] }
this.handleClick = this.handleClick.bind(this);}

I don’t know why you have to put super(props); inside the constructor(props)
All stateful components need constructors because the states have to be initialized.

this.state sets the color variable to an array of numbers within the RGB spectrum

Since handleClick will be used as an event handler, we will pass its functionality to a child component. (Button, in this case)
If we call the method from Button, this will refer to Button, but we want it to refer to the Random class, not the Button class
Because color is part of the Random class
this can refer to different objects, based on contexts; when we bind the Random class to handleClick, every this in handleClick will refer to Random

We are setting the handleClick method equal  to a version of itself that is bound to this object, which is Random
So now the keyword this inside of handleClick will always refer to Random class, even if we call it from Button class.

componentDidMount() {this.applyColor();}

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
https://reactjs.org/docs/react-component.html 

componentDidUpdate(prevProps, prevState) {this.applyColor():}

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).

prevProps and prevState don’t appear anywhere else in the code.

I don’t know why they had to be used here.

formatColor(ary) return ‘rgb(‘ + ary.join(‘, ‘) + ‘)’;

This method takes three numbers in an array and returns rgb(first number, second number, third number)
It works because calling .join on an array returns a string with the chosen delimiter (in this case a comma with a space after it)

The formatColor(ary) method is called by the applyColor method, which uses the color state to return a color variable, which is then used to set the document’s body’s background color.

isLight() {
                const rgb = this.state.color;
                return rgb.reduce((a,b) => a+b) < 127 * 3);

I don’t understand how this works. 
The reduce() method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.
In this case does it just add up all the elements in the array?
How is this returning a True or False value? Why 127 * 3?
This https://www.nbdtech.com/Blog/archive/2008/04/27/calculating-the-perceived-brightness-of-a-color.aspx  doesn’t seem to help