sebjwallace

import {createStore} from 'redux';

const counter = (state = 0, action) => {
  const index = {
    'INCREMENT': () => {
        return state+1;
    },
    'DECREMENT': () => {
        return state-1;
    },

sebjwallace

// http://jsbin.com/giluzi/edit

const traverseElement = (node,callback) => {
    
    let level = 0;
    
    const traverse = (node) => {
        
      if(!node.nodeName) return;

sebjwallace

// #document/HTML/BODY/BODY/DIV/DIV

var getElementPath = function(el){
  var path = el.nodeName;
  var parent = el.parentNode;
  while(parent){
    path = parent.nodeName + '/' + path;
    parent = parent.parentNode;
  }
  return path;

sebjwallace

virtual-dom CDN

virtual-dom CDN

Raw link: https://gitcdn.xyz/repo/Matt-Esch/virtual-dom/master/dist/virtual-dom.js

From this raw git file: https://raw.githubusercontent.com/Matt-Esch/virtual-dom/master/dist/virtual-dom.js

sebjwallace

This was a small challenge to write a standard and unstyled todos app within 100 lines of code, while maintaining readability.

It can be found on JS Bin

This project was to also prove that components are nothing more than a function that returns a vTree. The only purpose of creating an instance of the component is to maintain internal state. If there is none, then a component can just be a pure function.

Although a trivial application, it might also demonstrate that such things can be built without frameworks or virtual-dom libraries - only the virtual-dom is needed.

I did use my own fork from the virtual-dom repo for this project so that I could use the vDOM object.

sebjwallace

Writing hyperscript can get tedious when repeating this syntax for every element.

h('div', 'this is an element', [
  h('ul', [
    h('li', 'writing all these h calls')
    h('li', 'can get boring...')
  ])  
])

sebjwallace

function mergeObjects(merger,mergee){
  var mergent = {};
  for(var prop in mergee){
    mergent[prop] = mergee[prop]
  }
  for(prop in merger){
    if(mergent[prop])
        mergent[prop] = mergeObjects(mergent[prop],merger[prop])
    else mergent[prop] = merger[prop]

sebjwallace

// https://jsfiddle.net/reactjs/5vjqabv3/

var Hello = React.createClass({
  displayName: 'Hello',
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

ReactDOM.render(

sebjwallace

function Hello(name){
  return React.createElement("div", null, "Hello " + name);
}

ReactDOM.render(
  Hello("World"),
  document.getElementById('container')
);

sebjwallace

function Hello(name){
  return ["div", null, "Hello " + name];
}

ReactDOM.render(
  React.createElement.apply(this, Hello('world')),
  document.getElementById('container')
);