Dev Docs

Dev Docs

  • Intro

›Frontend

General

  • Getting Started
  • Guiding Principles
  • Case for Microservice
  • Case for DDD
  • Tech Stack

Frontend

  • React Basics
  • Styled Components
  • React Hooks

Backend

  • Getting Started with Serverless
  • Serverless and GraphQL
  • Making a Service

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)
← Tech StackStyled Components →
  • Basic React setup
  • Basic React setup with Apollo Client
Dev Docs
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Facebook Open Source
Copyright © 2020 Your Name or Your Company Name