Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React and GraphQL - Frontend Besties

React and GraphQL - Frontend Besties

Intro to React and GraphQL, creating a mock GraphQL server, rendering the data from the GraphQL API with Apollo Client

21e0bdf9c7829dc2422de9086a82ced6?s=128

Orjiewuru Kingdom Isaac

October 21, 2017
Tweet

Transcript

  1. Orjiewuru Kingdom Isaac Software Developer - Andela React and GraphQL

    - Frontend Besties
  2. It’s 2017

  3. Introduction Objectives 01 - React 
 02 - GraphQL 03

    - Mocking a GraphQL server 04 - Apollo GraphQL Client
  4. https://react-summit-talk.herokuapp.com/

  5. https://react-summit-talk.herokuapp.com/

  6. https://react-summit-talk.herokuapp.com/

  7. https://react-summit-talk.herokuapp.com/

  8. https://react-summit-talk.herokuapp.com/

  9. https://react-summit-talk.herokuapp.com/

  10. • Declarative React makes it painless to create interactive UIs.

    Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. - reactjs.org Our example app: reactjs.org A JavaScript library for building user interfaces

  11. • Component Based Build encapsulated components that manage their own

    state, then compose them to make complex UIs. - reactjs.org Our example app: reactjs.org A JavaScript library for building user interfaces

  12. • Learn Once, Write Anywhere Integrate React into an existing

    project without rewriting existing code. • Knowledge reuse Our example app: reactjs.org A JavaScript library for building user interfaces

  13. • Describe your data • Ask for what you want

    • Get predictable results graphql.org A query language for your APIs and a Runtime for fulfilling those queries with your existing data
  14. dev.apollodata.com Apollo Client - The flexible, production ready GraphQL client

    for React and native apps. • Advanced data management • Use json-graphql-server to setup a graphql endpoint • Use react-apollo to connect the component to the graphql server • Display the data in the component from Apollo store
  15. https://github.com/kingisaac95/react-summit-talk

  16. Q u e s t i o n s ?

  17. Thank You!