rowlandekemezie

Note: Totally optional.

Let's do this guys!

Write a calculator program that performs basic arithmetic operations.
Demonstrate how you can make private functions and public functions using revealing module pattern.

Use a markup page to get user input and render value accordingly.

rowlandekemezie

New ES6 Constructor Semantics and Usage Examples

Manual super: Alternative Design where subclass constructors do not automatically call superclass constructors

This Gist presents a new design of class-based object construction in ES6 that does not require use of the two-phase @@create protocol.

One of the characteristics of this proposal is that subclass constructors must explicitly super invoke their superclass's constructor if they wish to use the base class' object allocation and initialization logic.

An alternative version of this design automatically invokes the base constructor in most situations.

rowlandekemezie

In the [first part](https://pub.scotch.io/@rowland/build-a-media-library-with-react-redux-and-redux-saga-part-1) of this tutorial, we had a running app. We covered basic React setup, project workflow; defined basic components and configured our application's routes.

In part 2 of this tutorial, which is unarguably the most interesting part of building React/redux application, we will setup application state management with redux, connect our React components to the store, and then deploy to Heroku. We will walk through this part in eight steps:

1. Define Endpoints of interest.
2. Create a container component.
3. Define action creators.
4. Setup state management system.
5.  Define async task handlers.
6. Create presentational components.

rowlandekemezie

#!/bin/bash
# REQUIRES SUDO
# Benchmark runner

repeats=20
output_file='benchmark_results.csv'
command_to_run='echo 1'

run_tests() {
    # --------------------------------------------------------------------------

rowlandekemezie

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

rowlandekemezie

// Dependencies
const { applyMiddleware, createStore } = Redux;
const createSagaMiddleware = ReduxSaga.default;
const { put, call, takeLatest } = ReduxSaga.effects;
const { connect, Provider } = ReactRedux;

// GitHub API
const gitHubApi = (username) => {
  // Make API calls here
};

rowlandekemezie

// Initialize the saga middleware
const sagaMiddleware = createSagaMiddleware();

// Inject middleware to the store
const store = createStore(userReducer, applyMiddleware(sagaMiddleware));

// Run the sagas you defined. 
// You would normally have a rootSaga were you register all your saga 
// Or spread then in the run function. 
sagaMiddleware.run(watchRequest);

rowlandekemezie

// Here, we use ES6 destructuring assignment to extract payload
// from the action object passed to it.
function* loadUserDetails({ payload }) {
  try {
    const user = yield call(gitHubApi, payload);
    // Yields effect to the reducer specifying action type 
    // and user details.
    yield put({type: 'LOAD_USER_SUCCESS', user}); 
  } catch (error) {
    yield put({ type: 'LOAD_USER_FAILURE', error });

rowlandekemezie

// Dependencies
const { applyMiddleware, createStore } = Redux;
const { connect, Provider } = ReactRedux;

// GitHub API
const gitHubApi = (username) => {
   // Put your Api call here
};

// redux-thunk implementation

rowlandekemezie

// UserProfile Component
class UserProfile extends React.Component {
  constructor() {
    super();
    this.state = {
      user: []
    }
  }
  // componentDidMount lifecycle method allows dynamic behaviour, AJAX, 
  // side effects, etc. We issue our API call here and set the