January 2019 – KEEPING GOING

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 Continue Reading

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} Continue Reading

React Router: Optional Parameters

React Router makes it easy to use parameters, but these are mandatory by default. While this is enough for most cases, there are some situations where optional parameters would be beneficial. Creating a Route With an Optional Parameter As with regular parameters, declaring an optional parameter is just a matter Continue Reading

React Router Parameters

React Router allows information to be read from the URL as parameters. Creating a Parameterized Route It’s just a matter of the path property of a Route; any segment that starts with a colon will be treated as a parameter: class App extends Component { render() { return ( <BrowserRouter> Continue Reading

React Router Overview

React Router has gone through some changes over the years. Here’s an intro to the latest version: React Router 4. Installing React Router Same as installing any package. You’ll probably want react-router-dom and not react-router, though: $ yarn add react-router-dom # or with npm: $ npm install react-router-dom –save Setting Continue Reading

React Snapshot Testing

Snapshot testing is particularly useful in testing React components. Let’s see how it’s done. react-test-renderer You need to render your React components before you serialize them. Be sure to install react-test-renderer so you can do so. yarn add –dev react-test-renderer ⚛️ Recommended course ⤵ Wes Bos’ Fullstack Advanced React & Continue Reading

Introduction to the React Ref System

While React’s virtual DOM elegantly handles most situations you’ll run into, there are some cases where you’ll need to interact with the actual elements. For these occasions, React provides a ref system. Creating a Ref Creating a ref is pretty straightforward; just pass a callback that assigns to a property. Continue Reading

Component Lifecycle Functions in React

Class components can define functions that will execute at certain points during the component’s lifecycle. Using them can give a finer level of control over components. Here’s an overview of the available lifecycle functions in React. The following examples are very bad React and are for demonstrative purposes only. componentWillMount Continue Reading