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)