Decisive Reactions to Volatile Scenarios

Today’s work on the MySpace revival project was interrupted by an urgent message from our “client”:

The business has recently bought a competing social media platform and has made the decision to consolidate the platforms - but keep the look and identity of each site. The decision reached is to use your current backend, but expose it as a Rails API for front-end apps to consume. The CTO feels React.js is a good choice but recommends you discuss it as a team.

Our work on our fully rails site needed to pivot to an API only service, that would be interacted with by a separate front-end app.

Both of these requirements were completely new to us. We had never created a Rails API only project before, let alone converted from a full stack, and we had never used React.js either.

Thanks to the long weekend we forgot the good practice on Agile values we had made last week, and for a short while the team was thrown into disarray.

We did get back on track, and decided to split into two teams: one to tackle the conversion to API, and the other to get a React front-end implemented.

Crash Course in React

Fortunately I had previously worked through a w3schools React tutorial (would strongly recommend!), I thought that would be a good place for the team to start.

To prove to myself that I was learning and not just blindly following the tutorial I created a very simple webapp that demonstrates some key concepts in react.

The Indecisive Web App

Here’s the index.js from the app I created, where the important stuff happens.

We have here a Header class, which extends the React Component.

It has a constructor, in which its state is set with a favouritecolor of red.

The render method returns a but of JSX (looks like HTML, but allows you to interpolate Javascript into it similar to ERB). The returns JSX is a div which contains a h1 that has this.state.favouritecolour interpolated into it (i.e. red).

At the bottom is:

ReactDOM.render(<Header />, document.getElementById('root'));

What this does is go looking for an element with id "root” in index.html which is rendered by the browser, and it will put in the Header component. Inserting something into the DOM is referred to as “Mounting” in React.

There’s also a method componentDidMount which is called right after the component is mounted into the DOM. In this case it sets a timeout for 1000ms, and then sets this.state.favouritecolour to yellow.

When a state is changed in a React component, this triggers an update. During an Update, React will compare its virtual DOM (held in memory) with the actual DOM in the browser, and based on any differences it will re render the component. In this case, as this.state.favouritecolour has changed from red to yellow, it will update the rendered JSX with a new version with yellow in it.

There is also a method componentDidUpdate which is called after an update. In this instance it sets a timeout and then sets this.state.favouritecolour with a colour randomly selected from an array of colours.

As the state is changed again, this causes another update and the cycle continues forever, resulting in a very indecisive page:

If you’d like to look at more examples of React’s basic concepts check out this repo right here.

Thanks for reading!