Why

is Awesome

that's the React logo!

Adam MIskiewicz

Interactive Director/Founder @ Chalk + cHISEL

INTRO....WHAT'S REACT?

WHY IS REACT AWESOME?

IS IT BECAUSE IT'S FAST?

is it ACTUALLY fast tho?

paul lewis says "not really".

https://aerotwist.com/blog/react-plus-performance-equals-what/

I PROMISE, IT'S fast enough.

"BUT NOT FOR MY APP", you say.

How do you make it fast?

shouldComponentUpdate()

THE END

(FOR THIS TALK)

Ok fine.

the virtual dom!

ReALLY, REALLY COOL.

You should watch this: https://www.youtube.com/watch?v=-DX3vJiqxm4

...But it's kind of a commodity.

So if react isn't awesome because of it's speed or the fancy schmancy vDOM...

why iS It awesome?

ENCOURAGES Good Programming Practices

React and it's ecosystem have,

Without question,

made me a better developer

HOW HAS IT DONE THIS?

Functional programming

UI iS hard because of state Management.

React components* are:

IDEMPOTENT
COMPOSABLE

* Well-written React Components

Immutability

Shared mutable state is the root of all evil

- Lots of people

IMMUTABLE DATA STRUCTURES AND REACT ARE GOOD GOOD FRIENDS

shouldComponentUpdate()

COMPOSITION > INHERITANCE

Object-oriented programming is an exceptionally bad idea which could only have originated in California

- Edsger W. Dijkstra

Don't

class MyComponent extends React.Component {
    render() {
        return <div>Stuff with {this.props.aProp}</div>
    }
}

class MyOtherMorePowerfulComponent extends MyComponent {
    render() {
        super();
        ...[i don't even know what to do here cuz it's bad and I don't do bad stuff].
    }
}

DO

class MyComponent extends React.Component {
    render() {
        return <div>Stuff with {this.props.aProp}</div>
    }
}

export default wrapComponent(MyComponent);

function wrapComponent(component) {
    return class MyHOC extends React.Component {
        render() {
            return <MyComponent anotherPropINeedToSend="blah!" {...this.props} />
        }
    }
}

Don't ALWAYS FOLLOW THE MANTRA...

BUT FOLLOW IT MOST OF THE TIME.

+ HOT RELOADING

it's not just AMazing. It's useful .

It'd be hard to do this in ember, angular, etc.

May be impossible with their current architectures, but I'm not sure.

Demo

http://gaearon.github.io/react-hot-loader/

Universal/Isomorphic

let's just call it universal, K?

Render it on the server!1!1!!!1!111!

JSX

NOT A TEMPLATING LANGUAGE

React.createElement(props, [child, child...])

DECLARATIVE LANGUAGE

TO DESCRIBE TREE STRUCTURES AND ATTRIBUTES

CAN RENDER TO ANYTHING

I'm ACTUALLY NOT EXAGGERATING.

DOM REALLY IS JUST AN IMPLEMENTATION DETAIL

Another video to watch, yay!

https://youtu.be/Zemce4Y1Y-A

SO, SOME REALLY AWESOME STUFF...

NATIVE MOBILE APPS

not the actual Gibson logo. Couldn't find that. This ones cooler cuz it's from Family Guy.

GET's EVEN COOLER...

return React.createElement(
    ReactTHREE.Scene,
    {
        width: window.innerWidth,
        height: window.innerHeight,
        camera: 'camera',
        antialias: true,
        background: 0xEEEEEE
    },
    CameraElement,
    RobotRobbyElement,
    RobotMechElement,
    AmbientLight,
    DirectionalLight
)