We take developers from good to great

WE ARE THE JSLEAGUE

DApps with React

2-4th April

We expect cooperation from all participants to help ensure a safe environment for everybody.

We treat everyone with respect, we refrain from using offensive language and imagery, and we encourage to report any derogatory or offensive behavior to a member of the JSLeague community.

We provide a fantastic environment for everyone to learn and share skills regardless of gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion (or lack thereof), or technology choices.

We value your attendance and your participation in the JSLeague community and expect everyone to accord to the community Code of Conduct at all JSLeague workshops and other events.

Code of conduct

Whoami

Sabin Marcu

Developer at R/GA

Been working in web since '09

React Dev since 2015

Basic ES6

Module 1

Lambda (arrow) Functions


// Classical

function myNamedFunction(a, b) {
  return a + b;
}
function myNamedExtractor(x) {
  return x.myProperty;
}

// Lambda Functions

const myNamedFunction = (a, b) => a + b;
const myNamedExtractor = x => x.myProperty;

// Or, with destructuring (more on that later)
const myNamedExtractor = ({ myProperty }) => myProperty;

Module 1

Destructuring


// Given
const x = { root: 5, foo: { bar: { baz: 25, baaz: 30 } }, a: { b: { c } } };


// Classical
function myCalculator(param) { 
  return param.root + param.foo.bar.baz +
    param.foo.bar.baaz + param.a.b.c;
}


// With destructuring and lambda functions
const myCalculator = ({ 
  root,
  foo: { bar: { baz, baaz } }, 
  a: { b: { c } } 
}) => root + baz + baaz + c;

Module 1

Template Strings


// Given
var x = "Hello";
var y = "World";
var z = "!";


// Classical
console.log(x + " " + y + z);


// Template Strings
console.log(`${x} ${y}${z}`);

Module 1

Lambda Functions Autobind


// Classical Way
{
    ...
    getValue: function() {
        return 5;
    },
    myFunction: function(a) {
        let self = this;
        setTimeout(function() { alert(self.getValue() + a); }, 500 );
    },
}


// Lambda Functions
{
    ...
    getValue = () => 5,
    myFunction = a => setTimeout(() => alert(this.getValue() + a), 500),
}

React

Module 2

Fundamentals

Module 2

But first, a few considerations...

Module 2

Templating and state management

Module 2

Templating and state management

Cannot stress this enough.
Everything is JS

Module 2

First stop: Components

Two types of components:

"Dumb Components"
"Stateful Components"

Module 2

First stop: Components

Two types of components:

"Dumb Components"
"Stateful Components"

Usually

Module 2

First stop: Components

Two types of components:

"Dumb Components"
"Stateful Components"

First stop: Components

Two types of components:

"Class Components"
"Functional Components"

Module 2

Dumb Component





import React from 'react';

export default ({ counter, setCounter }) => (
    <div>
        <span>Count: {counter}</span>
        <button onClick={() => setCounter(counter + 1)}>+1</button>
    </div>
);

Module 2

Dumb Component

export default function() {
    var _component = function() {
        var _this;
        
        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }
    
        return _this;
    }

  Object(babel_runtime_helpers.createClass(_component, [{
    key: "render",
    value: function render() {
      var counter = this.props.counter;
      var setCounter = this.props.setCounter;
      return React.createElement(React.div, {
          children: React.createElement(...),
      });
    }
  }]);

  return _component;
}

Module 2

Stateful Component



import React, { Component } from 'react';
import CounterComponent from './counter';

export default class MyComponent extends Component {
    state = { counter: 0 }

    updateCounter = value => this.setState({ counter: value });
    
    render() {
        const { counter } = this.state;
        return (
            <CounterComponent 
                counter={counter} 
                setCounter={this.updateCounter} 
            />
        );
    }
}

Module 2

Stateful Component (don't)

import React, { Component } from 'react';
import CounterComponent from './counter';

export default class MyComponent extends Component {
    constructor() {
        super();
        this.state = { counter: 0 };
        this.updateCounter = this.updateCounter.bind(this);
    }

    updateCounter(value) { this.setState({ counter: value }); }
    
    render() {
        const { counter } = this.state;
        return (
            <CounterComponent 
                counter={counter} 
                setCounter={this.updateCounter} 
            />
        );
    }
}

Module 2

State?


class MyComponent extends Component {
    ...
    render() {
        const { isEditing } = this.state;
        const { data, updateData } = this.props;
        ...
    }
}

class RootComponent extends Component {
    ...
    render() {
        return <MyComponent data={...} updateData={...} />
    }
}

Module 2

Lifecycle



class MyComponent extends Component {

    // on initial render
    componentWillMount() //deprecated
    componentDidMount()
    
    // props changes
    componentWillReceiveProps()
    componentShouldUpdate()
    componentWillUpdate()

    // state changes
    componentWillUpdate()

    // component is no longer being rendered
    componentWillUnmount()

    ...
}

Module 2

React Hooks


export default (props) => {
    const [counter, setCounter] = useState(0);
    useEffect(
        () => document.head.title = "Ready to count", 
        [],
    );
    useEffect(
        () => document.head.title = `Counted ${counter} times`, 
        [counter],
    );
    return (
        <div>
            <h2>Counter App</h2>
            <div>Counted {counter} times!</div>
            <button onClick={() => setCounter(counter + 1)}>Add one</button>
            <button onClick={() => setCounter(counter + 5)}>Add five</button>
            <button onClick={() => setCounter(counter - 1)}>Subtract one</button>
        </div>
    );
}

DApps

Module 2

Let's get to it!

Module 2

Things we'll need: (check slack)

MetaMask
Project (github)

We take developers from good to great

DApps with React

2-4th April

Thank you!

React DApp

React DApp

Sabin Marcu

We take developers from good to great

DApps with React

2-4th April

Thank you!

React DApp

More from Sabin Marcu