more setup

README.md

@@ -1,9 +1,18 @@
 # React-GraphQL
 
-How to follow along:
+Hi there! Let's learn some more about React and GraphQL. If you want to follow along, do the following:
 
+0. Check out [this Apollo Launchpad](https://launchpad.graphql.com/0vp11m31k5). We will use this as our server to pull data.
 1. Clone this repository
 2. `yarn install` or `npm install`
 3. `yarn start` or `npm start`
 4. Go to `localhost:3000` in your browser
 5. Follow along or forge your own path :)
+
+--------------------
+
+### More about this repo
+
+* This is effectively `creat-react-app` with a little clean up, some styles, and some packages to make getting up and running with GraphQL easier.
+* All code regarding making queries and rendering stuff goes down in the `/components` folder.
+* All code regarding setting up the app goes down in `index.js` and `App.js`.

src/App.css

@@ -1,17 +1,17 @@
-.App {
+.app {
   text-align: center;
 }
 
-.App-header {
+.header {
   background-color: #222;
   padding: 2rem 0rem;
   color: white;
 }
 
-.App-title {
-  font-size: 1.5em;
+.title {
+  font-size: 2em;
 }
 
-.App-intro {
-  font-size: 1.25em;
+p {
+  font-size: 2em;
 }

src/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import ApolloClient from 'apollo-boost';
 import { ApolloProvider } from 'react-apollo';
 
@@ -12,13 +12,10 @@ const client = new ApolloClient({
 
 const App = () => (
   <ApolloProvider client={client}>
-    <div className="App">
-      <header className="App-header">
-        <h1 className="App-title">Welcome to React with GraphQL</h1>
+    <div className="app">
+      <header className="header">
+        <h1 className="title">Welcome to React with GraphQL</h1>
       </header>
-      <p className="App-intro">
-        This should be fun!
-      </p>
       <Workshops />
     </div>
   </ApolloProvider>

src/components/Workshop.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+// Let's build this out some more
+// Doesn't do too much at the moment
 const Workshop = () => (
   <p>This is the best workshop ever!</p>
 );

src/components/Workshops.js

@@ -1,19 +1,21 @@
 import React from 'react';
+
+// This is a component we import to make queries with GraphQL
 import { Query } from 'react-apollo';
+
+// We use this to actually type and format our query
 import gql from 'graphql-tag';
 
 const Workshops = () => (
   <Query query={gql`
     {
-      workshops {
-        title
-      }
+      hello
     }
   `}>
     {({ loading, error, data }) => {
-      if (loading) return (<p>Loading...</p>);
-      if (error) return (<p>There was an error :(</p>);
-      return (<p>We have some data! 🧚‍🐄🍻</p>)
+      if (loading) return (<p>Loading... 😕</p>);
+      if (error) return (<p>There was an error 😩</p>);
+      return (<p>{data.hello} 🤠</p>)
     }}
   </Query>
 );