PerIf you've ever wondered how to connect React.js & GraphQL, then Scrimba's hot one hour course is for you! The course jumps right into using a wide range of technologies to build a fast application with a concise amount of code - what's not to love?
Why learn React and GraphQL?
GraphQL has a faster build and iteration time than REST APIs and reduces the amount of data sent from the server. This means faster and more responsive apps - a must for any React developer.
Intro to the instructor
This course is brought to you by Karl Hadwen - a JavaScript and React developer with over ten years of experience. Karl also runs a YouTube channel teaching React, JavaScript, and GraphQL, so he's just the person to help you level up your React and GraphQL skills.
What's covered in the course?
In this course, we'll learn how to build a fun front-end application that uses React, GraphQL, and Apollo to display Pokemon characters, facts and images! The course is interactive and to-the-point, meaning you'll build something like this in no time:
Click the image to access the course.
In true Scrimba tradition, Karl's course is jam-packed with interactive coding challenges to help you apply your knowledge and embed your learning, so head over to Scrimba now and read on to find out more.
Welcome to the course
In the first scrim, Karl introduces us to the technologies we'll use in the course, which are:
- React
- GraphQL
- Apollo
- CSS
- the Pokemon open API.
Installing our dependencies & creating our skeleton project
Click the image to access the course.
Now it's time to start our project. First things first, we install the Apollo, GraphQL and React dependencies. Next up, we build up the files and folders we need for our project:
import React from "react";
import { render } from "react-dom";
import { App } from "./App";
render(<App />, document.getElementById("root"));
Giving our application life!
Now it's time to give our application life by adding to our app file and hitting the GraphQL server:
export function App() {
const client = new ApolloClient({
uri: "https://graphql-pokemon.now.sh",
});
return <p>I am a Pokemon</p>;
}
This scrim takes us through the following steps to allow our user to interact with our application:
- setting up the Apollo client
- building the
ApolloProviderand passing in the client as a prop - adding our
<main>tag andPokemonsContainer
Let's talk about GraphQL
Click the image to access the course.
This scrim takes a look at the GraphQL server that we'll be using in our app. The great thing about GraphQL is that it allows us to request just the fields we need from the object, unlike REST which sends all the information available. Karl shows us this in action by walking us through building and running our first GraphQL query.
Using our container component to map over our Pokemons!
In the next scrim, we build out our main container so we can loop over our Pokemons.
Karl kicks us of by showing us how to get the data from the Pokemon API:
const { data: { pokemons = [] } = {} } = useQuery(GET_POKEMONS, {
variables: { first: 9 },
});
Next, it's time for an interactive challenge: passing two props, the key and pokemon. Head over to the course to give the challenge a try for yourself.
Adding a GraphQL query and creating our Pokemon component!
Click the image to access the course.
In this scrim, we start by building our graphQL query:
import gql from "graphql-tag";
export const GET_POKEMONS = gql`
query pokemons($first: Int!) {
pokemons(first: $first) {
id
name
image
maxHP
maxCP
attacks {
special {
name
damage
}
}
}
}
`;
Next, Karl gives us the bare bones of our Pokemon component:
export function Pokemon({ pokemon }) {
return <p>{pokemon.name}</p>;
}
Our challenge now is to build up the Pokemon component so it displays all the information retrieved from the API. Click through to the course now to give it a try.
Finishing our Pokemon component
Next up, Karl talks us through how to map over up to three of a Pokemon's multiple attacks:
{
pokemon.attacks.special.slice(0, 3).map((attack) => <span></span>);
}
We also have a mini-challenge of adding a key within our pokemon__attacks div. Click through now to give it a try.
Let's style our application!
Click the image to access the course.
Now that we've created our app, it's time to style it. In this bumper scrim, Karl talks us through styling all the elements of our Pokemon app and gives us a few CSS challenges along the way. Of course, Karl's suggested styles are his personal preference - you could style your app however you like!
.container .pokemon {
width: 49%;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
overflow: hidden;
margin-bottom: 20px;
}
Responsively styling our application
Click the image to access the course.
In the last scrim of the course, we find out how to responsively style our app with media queries:
@media (max-width: 800px) {
.container .pokemon {
width: 100%;
}
}
@media (max-width: 400px) {
.container .pokemon__attacks,
.container .pokemon__meta {
flex-wrap: wrap;
}
.container .pokemon__meta span,
.container .pokemon__attacks span,
.container .pokemon {
width: 100%;
}
.container .pokemon__meta span {
margin-bottom: 10px;
}
}
Now that's done, our app looks great across all browser sizes.
Well done for completing the course - you've created and styled a fully working React app that hits a GraphQL server, which is a great achievement!
Hopefully, you've learned a lot throughout this course and you'll have a chance to apply your new knowledge to other applications soon. In the meantime, why not head over to Scrimba to see what other courses are on offer? You could even catch 'em all :)
Whatever you decide to learn next, happy programming!
