React Basics

Basic React setup

If you are starting a new project, do the following:

index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { Helmet } from 'react-helmet'
import Home from './pages/'

ReactDOM.render(
    <div>
        <Helmet>
            <meta charSet="utf-8" />
            <title>Name Of App</title>
            <link
                rel="stylesheet"
                href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
            />
        </Helmet>
        <Home />
    </div>,
    document.getElementById('root')
)

Define a React component like this:

import React, { Component } from 'react'
import styled from 'styled-components'

export default () => (
    <div>
        <p>Hi</p>
    </div>
)

Basic React setup with Apollo Client

index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { Helmet } from 'react-helmet'
import Home from './pages/'

import { ApolloClient } from 'apollo-client'
import { ApolloProvider } from 'react-apollo'
import { createHttpLink } from 'apollo-link-http'
import { setContext } from 'apollo-link-context'
import { InMemoryCache } from 'apollo-cache-inmemory'

const url = process.env.REACT_APP_GRAPHQL_ENDPOINT
const httpLink = createHttpLink({ uri: url })

const authLink = setContext((_, { headers }) => {
    // get the authentication token from local storage if it exists
    const token = localStorage.getItem('jwt')
    // return the headers to the context so httpLink can read them
    return {
        headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : ''
        }
    }
})

const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
})

const App = () => (
    <ApolloProvider client={client}>
        <div>
            <Helmet>
                <meta charSet="utf-8" />
                <title>Name of App</title>
                <link
                    rel="stylesheet"
                    href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
                />
            </Helmet>
            <Home />
        </div>
    </ApolloProvider>
)

ReactDOM.render(<App />, document.getElementById('root'))

Define a React component with graphql query like this:

import React from 'react'
import styled from 'styled-components'
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'

const GET_BOOKS = gql`
    query allBooks {
        allBooks {
            id
            name
        }
    }
`

const Component = props => {
    if (props.data.loading) {
        return <p>Loading</p>
    }

    if (props.data.error) {
        return <p>Error</p>
    }

    const books = props.data.allBooks.map(x => <p>{x.name}</p>)
    return <div>{books}</div>
}

export default graphql(GET_BOOKS)(Component)