November 2018

Creating Compositional Components in React With this.props.children

If you’re a newcomer to React, you may have seen this.props.children in various tutorials. Sometimes its purpose isn’t clear or you may have thought, “I could have done it a different way.” Let’s find out the unique perks of using children in React so we can feel more confident about when we should be using …
Read more

Gatsby – Not Yo’ Mama’s Static Site Generator

Gatsby is a React-based static site generator (SSG) that combines the best of all worlds: blazing fast static sites using modern, best-practice, front-end development techniques such as route-based code splitting, PRPL, service workers, and offline support; combined with dynamic data integrations via a rich set of plugins (e.g., GraphQL, MongoDB, and even WordPress!) queried at …
Read more

Atomic SetState Updates in React

SetState has a notorious reputation for misleading newcomers to believe that state updates are synchronous. While setState is very fast at computing state via it’s reconciliation algorithm it’s nonetheless an asynchronous operation that, if used improperly, can make it very challenging to manage complex state in React components. In this article, learn about setState’s lesser-known …
Read more

Using Enums in Flow

If you’ve ever touched a more traditional Object-Oriented Language (C, C#, Java), you’ve probably seen an enum data type. While JavaScript does not have support for enums, Flow’s typechecking can make up for it. Where are Enums Useful? Let’s say you’re writing a program that deals with poker chips. The color of a chip is …
Read more

Mapping Routes in React Router

In some cases, it may be beneficial to store routes as objects instead of components. The problem In larger applications, routes quickly get repetitive, verbose, and repetitive. ? // App.js class App extends Component { render() { return ( <BrowserRouter> <div> <Route exact path=”/” component={HomePage} /> <Route exact path=”/Teachers” component={TeacherListPage} /> <Route exact path=”/Teachers/:teacherId” component={TeacherPage} …
Read more