goofballLogic

Event-driven styles

Whether in the browser, on the server or in some other environment (e.g. Electron), the event-driven nature of JavaScript's early years is never that far away.

In the browser, the HTML DOM API provides a wealth of event-based interactions, but there are many other common browser APIs (e.g. Messaging, Indexed DB, XHR, Service Workers) which employ similar patterns.

On the server, in e.g. node.js, HTTP pipelines, streaming APIs and EventEmitters are three massive areas of JavaScript programming which employ event-driven programming heavily.

The DOM

goofballLogic

long[] Consume(long[] source, long quantity)
{
    var acc = 0L;
    bool Accumulate(long x)
    {
        if (acc > quantity) return false;
        acc += x;
        return true;
    }
    return source.SkipWhile(Accumulate).ToArray();

goofballLogic

Create the app:
  npm init

Add React:
  npm install --save react react-dom

Add webpack:
  npm install --save-dev webpack webpack-cli webpack-dev-server

Add babel:

goofballLogic

fetchForLater().then( resp => {

      if ( !resp.ok ) { throw new Error( "Failed to fetch for later people" ); }
      return resp.json();

    } ).then( json => {

      const savedForLater = json.map( ( [ id, person ] ) => person );
      this.setState( { saved: savedForLater } );

goofballLogic

function sendJSON( method, data, url ) {

    return fetch( url, {

        body: data && JSON.stringify( data ),
        method: "POST",
        mode: "cors",
        headers: {

            "Content-Type": "application/json"

goofballLogic

Having dived a bit deeper, I'm concluding that there are some design decisions which need to be made here.

For a normal scenario like:

Feature: my feature
 Scenario: my scenario
  Given step 1
  When step 2
  Then step 3

goofballLogic

Create a folder named "routes", and one named "middleware"

api
   middleware                        <---
   node_modules
   routes                            <---
   .gitignore
   index.js
 package-lock.json

goofballLogic

Add a person details component (with children)

const PersonDetails = ( { person, children } ) => <div className="person-details">

  <p className="name">{person.name} {person.surname}</p>
  <p><span className="label">Region</span>{person.region}</p>
  <img src={person.photo} />
  {children}

goofballLogic

1. Add the People component:

class People extends Component {
  constructor() {
    super();
    this.state = { people: [] };
    this.callAPI();
  }
 callAPI() {

goofballLogic

We're assuming you already have node.js installed

1. Install the create-react-app package:

npm install -g create-react-app

2. Create an application: