Triangle JavaScript meetup - The React.js Ecosystem

Tirell Mckinnon @TirellMckinnon

GitHub: tdmckinn

Slides: https://reactecosystemmeetup.herokuapp.com/

React.js

UI data & rendering

Alternatives to JSX

React hyperscript

React Uber r-dom

JS Destructuring

Styling options

Inline styles

Inline Styles @Radium

Require and extract

CSS modules

GraphQL

http://www.graphql.org

Data query language and runtime

Hierarchical Product centric Strong typing Client specified queries Introspective

Includes graphical explorer

Gettings started

Schema - description of data mode with associated set of resolve methods that know how to fetch any data that application might need.

Server - Any server can be taught to load schema and speak GraphQL.

Relay - Speaks to GraphQL servers through

Apollo Client - Alternative by MeteorJS team, allows for use with Redux

Example

Query

{
    hero(id: 2001) {
        id
        name
        friends {
          id
          name
          dogs
        }
    }
}

Response

{
    "data": {
        "hero": {
            "id": "2001",
            "name": "R2-D2",
            "friends": []
        }
    }
}

Schema

const Root = new GraphQLObjectType({
    name: 'Query',
})

Why?

Reduce round trips

Client to server validation

Less worry about endpoints

Flexibility

Type system

User defined

Optional or required fields

Self documenting

Alternative schema implementations

Graph.QL

Apollo

Relay

Client for GraphQL

React Component data declaration and co-location

Declarative Co-location Mutations Auto-fetch Caching Error handling

Relay.createContainer(DinoCard, {
    fragments: {
        dinosaur: () => {}
    }
})

Redux

Client-side state management

Single source of truth State is read only, immutable objects Changes are made wit pure functions

Actions ('like-article')

Honorable mentions

React Native Flow Typescript Falcorjs - data fetching by Netflix Apollo Stack by MeteorJS team