A short Story...

I want to learn react

I play dungeons and dragons

Most online DND tools want to do everything

I wanted a simple app to compliment my pen and paper

Introducing Initiate

http://initiate.joshuamlee.com.s3-website-us-east-1.amazonaws.com/

Just

One

Thing...

Composability

composability

Composability is a system design principle that deals with the inter-relationships of components. A highly composable system provides components that can be selected and assembled in various combinations to satisfy specific user requirements.

Ok, that was dense...

breaking it down

A Composable System is one where:

• Things can be combined and recombined to make new things

Or in React terms:

• Components can be combined and recombined to make new components

There's nothing boaty or airplaney or helicoptery about any of the bricks, but they can be combined to make any of those things or more...

HTML is composable

HTML is composable

• Each HTML Element is a component, and together they are recombinable in infinite variations (web pages)
• Think about the various uses for tags like <a>, <div>, <span>, <li>
• The now humble <table> was once the most reused element, implementing entire layouts

CSS IS Composable

• The structure of CSS encourages composability
• Examples: OOCSS, Bootstrap, Foundation
• (or your own custom style framework)

Javascript Can be  Composable

• Bootstrap JS is composable — classnames trigger js functionality
• Frameworks like jQuery can help in creating composable chunks of js functionality.
• * You can do HTML and CSS wrong too...

So what's the problem?

Why are we even here?

Problems that arise in front-end development

• HTML/JS/CSS Soup
• Conflicting asynchronous requests lead to wonky UX and misaligned state.
• DOM updates are difficult to manage and expensive for the browser in larger applications.
• Recreating our backend models in an MVC-style manner is just plain cumbersome, and certainly not DRY.

Front-end soup

Scope creep, deadlines, hacky bug-fixes, and even well-intentioned feature development all lead to an inevitably brittle result.

React turns this...

Into this...

<div class="blog-post">
  <h1 class="blog-title">Lorem ipsum dolor</h1>
  <h2 class="byline">by Josh Lee</h2>
  <p class="lede">Once upon a midnight dreary...</p>
  <p>No, I'm not a poet</p>
</div>

<blogPost post={post} />

A blog post component

const blogPost = (props) => {
  return 
    <div className="blog-post">
      <h1 className="blog-title">{props.post.title}</h1>
      <h2 className="blog-byline">by {props.post.author}</h2>
      ...
    </div>;
}

Another way to make a component

class blogPost extends React.component {
  function render() {
    return 
      <div className="blog-post">
        <h1 className="blog-title">{this.props.post.title}</h1>
        <h2 className="blog-byline">by {this.props.post.author}</h2>
        ...
      </div>;
  }
}

Really all it is...

rendered_componented = f(data)

So why is it called react?

Let's add some state (data)...

The official example

Halfway to tic-tac-toe

More at the official tutorial

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        ...
      </div>
    );
  }
}

Whenever the state updates

React knows which elements need to change

And it updates the dom for you

So what's this redux thing?

Redux manages state for you

It asks you to:

• Describe application state as plain objects and arrays.*
• *(in a single, nested store)
• Describe changes in the system as plain objects.
• Describe the logic for handling changes as pure functions.

Initiate's redux state

{
  "counters":
  {
    "byId":
    {
     "6":{"label":"hp","creatureId":"7","id":"6","count":0},
     "7":{"label":"hp","creatureId":"2","id":"7","count":200},
     "5":{"label":"hp","creatureId":"3","id":"5","count":10}
    },
    "allIds":["6","7","5"]},
  "creatures":
  {
   "byId":
    {"7":{"name":"Josh","id":"7","counterIds":["6"]},
     "2":{"name":"Kim","id":"2","counterIds":["7"]},
     "3":{"name":"Sam","id":"3","counterIds":["5"]}},
   "allIds":["3","2","7"]
  }
}

(The duplication is because JSON doesn't enforce order on object keys)

Dumb  vs. Smart  components

component state vs. redux state

only the parent component should be "connected" to the redux state

Middleware