Forem: Bob Ziroll

Here's my new React course that aims to turn you into a professional

Bob Ziroll — Thu, 14 Nov 2019 14:38:06 +0000

Ever since I launched my intro course on React at Scrimba, I've gotten weekly requests from people asking me to create an advanced follow-up course, many of whom have told me that my course was what finally enabled them to grasp React. So over the past six months, I've been working towards giving my students a follow-up course.

Today I'm super excited to finally launch The React Bootcamp — the best and biggest course I've ever created.

Click here to get to the course! (<-- link)

In this article, I'll explain how the course is laid out, how it's built pedagogically, and give you some tips for how you can get the most out of it.

Reaching a hirable level in React

First of all, the goal of this course is to turn you into a hirable React developer. So your first question is probably: how do I know what level is hirable? While there's no black and white answer to this, I have a pretty good idea of what it takes. Over the last six years, I've helped hundreds of students turn into professional front-end developers at V School, the coding bootcamp where I work as the Director of Education. One of our primary focuses in the course is React, and while many of our students end up in dev careers doing something different, many of them end up working in React.

I've seen again and again what kind of skill-level a student needs to have in order to get a job. In this course, I aim to teach you those exact skills.

It's an ambitious goal, and it requires a ton of work from you. You have to dedicate a lot of time and return to the course again and again, as this isn't the type of content you binge-watch once. Secondly, you have to do the interactive code challenges I give you throughout the course. They're even more important than the lectures themselves.

With that in mind, let's have a look at the content itself.

The content: 118 lectures, nine modules

The course contains 118 lectures spread across nine modules. Each module covers one or more core concepts needed on the path of becoming a professional React developer. Here they are:

Introduction
Code Reusability
Performance
React Context
React Hooks
React Router
Capstone Project
Redux
Getting Hired

Some of the bullet points above are links that will take you to the first lecture of the section. That should give you an impression of some of the modules.

In total, the content clocks over 12 hours. However, it's going to take you a lot more than 12 hours to get through this course. This isn't just because you should re-watch the parts you struggle to understand, but also because I'll constantly be stress-testing your skills by giving you interactive challenges, which brings me to the next section.

How the interactive challenges work

The unique thing with Scrimba is that you're able to interact with the code directly inside the screencast. This is unlike any other learning platform out there.

The interactivity is what makes Scrimba the ultimate code-learning tool.

It's almost as if you and I are pair programming together. From my previous React course, I know that students love these challenges. So in this course, I'm focusing even more on this type of interactivity.

Here's how it works: Whenever I teach a concept that I know a lot of students will struggle to grasp, or easily forget, I'll simply ask you to perform a coding challenge directly in the player. You'll hit the pause button and start coding immediately. When you're done, you can hit the play icon again, and I'll show you how I solved it.

Click on the image below to see one of the interactive code challenges. It should give you a better impression of how it works:

You can solve your solutions so that you have something to go back to later as well.

How to succeed with this course

The next thing I want to talk about is how you should approach this course, as you'll have a much greater chance of succeeding if you do it the right way. These tips are rooted in my personal learning philosophy, which I've developed over the years as a teacher at V School.

1. The easy way is the hard way, so do the challenges!

It might seem a bit counter-intuitive, but the easiest way to learn a new skill is actually by forcing yourself to do it the hard way. This means that you're going to have to be comfortable with the feeling of failure, the feeling of being bad at something.

The code you write in the interactive coding challenges is probably going to be bad, and you'll feel like you're not skilled enough to solve them. However, they're absolutely critical if you are to actually learn these concepts. So while the seem hard there and then, they're actually the easiest way to get better.

While it seems easier to just sit back and watch tutorials, and skip ahead to my solutions, it's much harder in the long run, as you won't actually learn it.

2. Spaced learning and repetition is key, so don't binge-watch!

While it can be tempting to binge-watch a course, it's not the best way to learn. Your brain needs time to process all the new information, and you'll retain much more if you space it out over a longer period of time, ideally weeks, or even months.

I'd recommend you to set off an hour or two per day (or whatever suits your schedule), and then commit to doing it every day. This way, you'll get into a habit of improving your coding skills.

Repetition is also key. So rewatch sessions when you feel you need a refresher or even go back a couple of lessons every time you return to the course. Finally, a good way to repeat what you've learned is to apply it in projects on your own. You can do that in-between course session, as it'll allow you to stress-test your skills in a different context.

3. Learning shouldn't be lonely, so join the Slack channel!

Finally, learning is always easier when done in collaboration with others. Because of this, we've created a dedicated Slack channel for the course. In it, you can connect with other students, and also ask me questions if you're stuck.

I'd strongly recommend you to take advantage of this. Share your wins in the channel, cheer for others, and you'll feel less lonely when you're sitting hour after hour and churning through the material.

This course will never be completed

On my end, this course will never be finished. I plan to update it on a regular basis with new content. Not only when React launches changes in their APIs so that certain casts need to be renewed, but also with whole new subjects or even sections.

For example, within the next couple of months, I'm going to add a new section about testing. This comes at no extra cost for the people who've already bought the course, you have full access to the updates as well. However, for people who haven't yet bought the course, the list price might increase, as the value increases as well.

What are the pre-requisites?

You should know HTML, CSS, and JavaScript before taking this course, and you should also know basic React. If you're completely new to React, you're better off starting with my free intro React course first. That'll teach you the core concepts that I'm assuming you already know when enrolling in this one.

As for your JavaScript skills, you should be familiar with functions, classes, arrays, objects, and ES6 syntax shouldn't scare you either, as we'll be using that in the course. Scrimba has a free course on modern JavaScript by freeCodeCamp, and if you've completed that one, and understood it, you're good to go for my course as well.

What does it cost?

The list price is $99. However, during the launch period, you'll get it at a 60 percent discount for $39. This is a one-time payment. You pay once and have access to the course forever. There are no constraints in terms of timing or location, take the course whenever and wherever you want. I'd recommend you to take advantage of the offer during this launch period, as the price will increase after it's over. And as I add more content, the list price itself might even increase.

Good luck, and looking forward to meeting you in the Slack channel :)

Bob

Learn React Context in 5 Minutes - A Beginner's Tutorial

Bob Ziroll — Tue, 12 Nov 2019 18:58:57 +0000

React's Context API has become the state management tool of choice for many, oftentimes replacing Redux altogether. In this quick 5-minute tutorial, you'll see an introduction to what Context is and how to use it!

If you want a proper introduction to this subject, you can join the waitlist for my upcoming advanced React course, or if you're still a beginner, check out my free introductory course on React.

Consider this tree, in which the bottom boxes represent separate components:

We can easily add state to the bottom components, but until now the only way to pass data to a component's sibling was to move state to a higher component and then pass it back down to the sibling via props.

If we later find out that the sibling of the component with state also needs the data, we have to lift state up again, and pass it back down:

While this solution does work, problems begin if a component on a different branch needs the data:

In this case, we need to pass state from the top level of the application through all the intermediary components to the one which needs the data at the bottom, even though the intermediary levels don't need it. This tedious and time-consuming process is known as prop drilling.

This is where Context API comes in. It provides a way of passing data through the component tree via a Provider-Consumer pair without having to pass props down through every level. Think of it as the components playing Catch with data - the intermediary components might not even "know" that anything is happening:

To demonstrate this, we will create this funky (and super useful) day-to-night switching image.

If you want to see the full code, be sure to check out the Scrimba playground for this article.

Create Context

To begin, we create a new Context. As we want the entire app to have access to this, we go to index.js and wrap the app in ThemeContext.Provider.

We also pass the value prop to our Provider. This holds the data we want to save. For now, we just hardcode in 'Day'.

import React from "react";
import ReactDOM from "react-dom";
import ThemeContext from "./themeContext";

import App from "./App";

ReactDOM.render(
  <ThemeContext.Provider value={"Day"}>
    <App />
  </ThemeContext.Provider>,
  document.getElementById("root")
);

Consuming Context with contextType

Currently, in App.js, we are simply returning the <Image /> component.

import React from "react";
import Image from "./Image";

class App extends React.Component {
  render() {
    return (
      <div className="app">
        <Image />
      </div>
    );
  }
}

export default App;

Our goal is to use Context to switch the classNames in Image.js from Day to Night, depending on which image we want to render. To do this, we add a static property to our component called ContextType and then use string interpolation to add it to the classNames in the <Image /> component.

Now, the classNames contain the string from the value prop. Note: I have moved ThemeContext into its own file to prevent a bug.

import React from "react";
import Button from "./Button";
import ThemeContext from "./themeContext";

class Image extends React.Component {
  render() {
    const theme = this.context;
    return (
      <div className={`${theme}-image image`}>
        <div className={`${theme}-ball ball`} />
        <Button />
      </div>
    );
  }
}

Image.contextType = ThemeContext;

export default Image;

Context.Consumer

Unfortunately, this approach only works with class-based components. If you've learned about Hooks in React already, you'll know we can do just about anything with functional components these days. So for good measure, we should convert our components into functional components and then use ThemeContext.Consumer component to pass info through the app.

This is done by wrapping our elements in an instance of <ThemeContext.Consumer> and within that (where the children go), providing a function which returns the elements. This uses the "render prop" pattern where we provide a regular function as a child that returns some JSX to render.

import React from "react";
import Button from "./Button";
import ThemeContext from "./themeContext";

function Image(props) {
  // We don't need this anymore
  // const theme = this.context

  return (
    <ThemeContext.Consumer>
      {theme => (
        <div className={`${theme}-image image`}>
          <div className={`${theme}-ball ball`} />
          <Button />
        </div>
      )}
    </ThemeContext.Consumer>
  );
}

// We don't need this anymore
// Image.contextType = ThemeContext;

export default Image;

Note: We also need to wrap the <Button /> component in <ThemeContext.Consumer> - this allows us to add functionality to the button later.

import React from "react";
import ThemeContext from "./themeContext";

function Button(props) {
  return (
    <ThemeContext.Consumer>
      {context => (
        <button className="button">
          Switch
          <span role="img" aria-label="sun">
            🌞
          </span>
          <span role="img" aria-label="moon">
            🌚
          </span>
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

export default Button;

Extract Context Provider

We are currently passing a hard-coded value down through the Provider, however, our goal is to switch between night and day with our button.

This requires moving our Provider to a separate file and putting it in its own component, in this case, called ThemeContextProvider.

import React, { Component } from "react";
const { Provider, Consumer } = React.createContext();

class ThemeContextProvider extends Component {
  render() {
    return <Provider value={"Day"}>{this.props.children}</Provider>;
  }
}

export { ThemeContextProvider, Consumer as ThemeContextConsumer };

Note: the value property is now being handled in the new file ThemeContext.js, and should, therefore, be removed from index.js.

Changing Context
To wire up the button, we first add state to ThemeContextProvider:

import React, { Component } from "react";
const { Provider, Consumer } = React.createContext();

// Note: You could also use hooks to provide state and convert this into a functional component.
class ThemeContextProvider extends Component {
  state = {
    theme: "Day"
  };
  render() {
    return <Provider value={"Day"}>{this.props.children}</Provider>;
  }
}

export { ThemeContextProvider, Consumer as ThemeContextConsumer };

Next, we add a method for switching between day and night:

toggleTheme = () => {
  this.setState(prevState => {
    return {
      theme: prevState.theme === "Day" ? "Night" : "Day"
    };
  });
};

Now we change our value property to this.state.theme so that it returns the info from state.

 render() {
    return <Provider value={this.state.theme}>{this.props.children}</Provider>;
  }
}

Next, we change value to an object containing {theme: this.state.theme, toggleTheme: this.toggleTheme}, and update all the places where we use a single value to look for theme in an object. This means that every theme becomes context and every reference to theme as value becomes context.theme.

Finally, we tell the button to listen for the onClick event and then fire context.toggleTheme - this updates the Consumers which are using the state from the Provider. The code for the button looks like this:

import React from "react";
import { ThemeContextConsumer } from "./themeContext";

function Button(props) {
  return (
    <ThemeContextConsumer>
      {context => (
        <button onClick={context.toggleTheme} className="button">
          Switch
          <span role="img" aria-label="sun">
            🌞
          </span>
          <span role="img" aria-label="moon">
            🌚
          </span>
        </button>
      )}
    </ThemeContextConsumer>
  );
}

export default Button;

Our button now switches the image between night and day in one click!

Context caveats

Like all good things in code, there are some caveats to using Context:

Don't use Context to avoid drilling props down just one or two layers. Context is great for managing state which is needed by large portions of an application. However, prop drilling is faster if you are just passing info down a couple of layers.
Avoid using Context to save state that should be kept locally. So if you need to save a user's form inputs, for example, use local state and not Context.
Always wrap the Provider around the lowest possible common parent in the tree - not the app's highest-level component. No need for overkill.
Lastly, if you pass an object as your value prop, monitor performance and refactor as necessary. This probably won't be needed unless a drop in performance is noticeable.

Wrap up

This example is pretty simple and it would probably be easier to put state in the app and pass it down via props. However, it hopefully shows the power of having Consumers which can access data independently of the components above them in the tree.

To learn more about React Context and other great features of React, you can join the waitlist for my upcoming advanced React course. Or if you're looking for a more beginner friendly you can check out my free introductory course on React.

Happy coding :)

Learn React Hooks in 5 Minutes - A Beginner's Tutorial

Bob Ziroll — Mon, 11 Nov 2019 19:37:57 +0000

Sometimes 5 minutes is all you've got. So in this article, we're just going to touch on two of the most used hooks in React: useState and useEffect.

If you're not familiar with hooks, here's the TL;DR: because of hooks, there's almost no more need for class-based components. Hooks let you "hook into" the underlying lifecycle and state changes of a component within a functional component. More than that, they often also improve readability and organization of your components.

If you want a proper introduction to this subject, you can join the waitlist for my upcoming advanced React course, or if you're still a beginner, check out my introductory course on React.

`useState`

Let's begin with a functional component.

import React from 'react';

function App() {
  return (
    <div>
      <h1>0</h1>
      <button>Change!</button>
    </div>
  );
}

As you can see, nothing fancy at the moment. We're just rendering some text and a (useless) button.

Now let's import our very first hook, useState to learn how to handle state in our functional component.

As this hook is a function, let's console.log what we get returned from it.

import React, { useState } from 'react';

function App() {
  const value = useState();
  console.log(value);

  return (
    <div>
      <h1>0</h1>
      <button>Change!</button>
    </div>
  );
}

In the console, we get an array

> [null, ƒ()]

And when we pass an argument to useState

const value = useState(true);

In the console, we get an array with our value as the first member.

> [true, ƒ()]

Now, in our component, we can access our state at value[0] and render it in <h1> instead of a hardcoded value.

import React, { useState } from 'react';

function App() {
  const value = useState(0);
  console.log(value); // [0, ƒ()]

  return (
    <div>
      <h1>{value[0]}</h1>
      <button>Change!</button>
    </div>
  );
}

We can improve our code by using array destructuring to store the value from useState hook. It's similar to object destructuring, which tends to be a bit more commonly seen. In case you're not super familiar with object destructuring, here's a quick recap:

const person = {
  name: 'Joe',
  age: 42
};

// creates 2 const values from person object
const { name, age } = person;
console.log(name); // 'Joe'
console.log(age); // 42

Array destructing is almost the same, but uses square brackets [] instead of curly braces {}.

A quick tip: in object destructuring, the names of created variables must match the names of properties in the object. For array destructuring, that's not the case. It's all about the order. The benefit here is we can name the items whatever we want.

Using array destructuring, we can get the initial value of state from the useState() hook.

import React, { useState } from 'react';

function App() {
  // remember, there's a second item from the array that's missing here, but we'll come right back to use it soon
  const [count] = useState(0);  

  return (
    <div>
      <h1>{count}</h1>
      <button>Change!</button>
    </div>
  );
}

OK, we've got the initial state value. How do we change the value in the state with hooks?

Remember that useState() hook returns an array with 2 members. The second member is a function that updates the state!

const [count, setCount] = useState(0);

You can, of course, call it what you wish, but by convention, it's normally called with prefix "set-", and then whatever state variable we wish to update was called, so setCount it is.

It's simple to use this function. Just call it and pass the new value you want that state to have! Or, just like this.setState in a class component, you can pass a function that receives the old state and returns the new state. Rule of thumb: do this anytime you need to rely on the past state to determine the new state.

To call it, we'll pass it to the onClick event listener. And just like with a regular setState in a class-based component, we can pass our state update to setCount.

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
        Change!
      </button>
    </div>
  );
}

We can clean this up a bit, by extracting our state update to a separate function.

function App() {
  const [count, setCount] = useState(0);

  function change() {
    setCount(prevCount => prevCount + 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={change}>Change!</button>
    </div>
  );
}

Great! And now when we can see the counter going up when we click the button.

Of course, useState can get a lot more complicated than this, but we've only got 5 minutes here, so let's move on to the next hook for now.

`useEffect`

Hooks have simplified quite a few things, compared to the way things were in class-based components. Previously we needed to know a bit about lifecycle methods and which one is best suited for which situation. useEffect hook simplified this situation. If you wish to perform side effects, network request, manual DOM manipulation, event listeners or timeouts and intervals.

useEffect hook can be imported just like useState.

import React, { useState, useEffect } from 'react';

To make useEffect do something, we pass it an anonymous function as an argument. Whenever React re-renders this component, it will run the function we pass to useEffect.

useEffect(() => {
  /* any update can happen here */
});

This is what the whole code might look like.

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  function change() {
    setCount(prevCount => prevCount + 1);
  }

  useEffect(() => {
    /* any update can happen here */
  });

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={change}>Change!</button>
    </div>
  );
}

export default App;

As an example, we will use a nice npm package that generates a random color. Feel free to write your own if you wish of course, but for this tutorial, we will just install it, npm i randomcolor, and import.

import randomcolor from 'randomcolor';

Let's now use our knowledge about useState hook to store some random color in the state.

const [color, setColor] = useState(''); // initial value can be an empty string

We then can then assign the color of the counter we already have.

<h1 style={{ color: color }}>{count}</h1>

Now, just for the sake of it, let's change the color of the counter on every click of the Change! button. useEffect will run every time the component re-renders, and the component will re-render every time the state is changed.

So if we write the following code, it would get us stuck in an infinite loop! This is a very common gotcha with useEffect

useEffect(() => {
  setColor(randomcolor());
});

setColor updates state, which re-renders the component, which calls useEffect, which runs setColor to update the state, which re-renders the component... Yikes!

We probably only want to run this useEffect when the count variable changes.

To tell useEffect which variable(s) to keep track of, we give an array of such variables as a second argument.

useEffect(() => {
  setColor(randomcolor());
}, [count]);

This basically says "only run this effect if the count state changes. This way we can change the color and not cause our effect to run infinitely.

Conclusion

There's a lot more to learn about hooks, but I hope you've enjoyed this quick 5-minute peek into hooks.

To learn more about React Hooks and other great features of React, you can join the waitlist for my upcoming advanced React course. Or if you're looking for a more beginner friendly you can check out my introductory course on React.

Happy coding 🤠

Learn React by Building a Meme Generator

Bob Ziroll — Thu, 24 Oct 2019 19:40:36 +0000

Memes are great - they're such a fun way of describing ideas and opinions. So it's no coincidence that I picked a meme generator app as the capstone project in my free React course on Scrimba. The app works by pulling a random meme image from an API and placing your text over the top of it to create your very own, personalized meme.

So in this article, I'll give you a step-by-step guide to creating the app. If you ever get confused, you can also follow these steps in the Scrimba course, starting at this lecture.

And then if you like my teaching style and are in the mood for a tougher challenge after you complete this tutorial, please check out my upcoming advanced course on Scrimba.

Note: You should already be fairly familiar with some of the fundamental concepts of React, like components, state, props, and lifecycle methods. Also, this tutorial doesn't use Hooks, but in my upcoming course we'll cover Hooks in depth and get tons of practice using them.

1. Creating the boilerplate and rendering an App component

The first thing we need to do is to create the boilerplate code for the app. To do this, we import React and ReactDOM and use ReactDOM to render a component called App, which we will create later. We then put the App component at the 'root'. We also import App from its file "./App", which we will create shortly.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

We then create our App.js file. In it, we create a functional component called App which, for now, returns a simple <h1>. We then export it. The <h1> allows us to check that the app is displaying correctly to the screen.

import React from 'react';
function App() {
  return <h1>Hello world!</h1>;
}
export default App;

The resulting output is this:

2. Creating the Header and MemeGenerator components

Next up, we create the Header and MemeGenerator components. The Header will only display elements, while MemeGenerator will call to the API and retain the data in state.

Let's start by creating the Header.js file. Since Header is a component which is only used to display, it should be a functional component. For now, the component should return a simple <h1>. After creating it, we then export Header.

import React from 'react';
function Header() {
  return <h1>HEADER</h1>;
}
export default Header;

Next, we create the MemeGenerator.js file. As the MemeGenerator component will be holding data and making calls to an API, it needs to be a class component. We still need to import React, and since it is going to be a class component, we'll import Component as well (which is a named import).

MemeGenerator needs a constructor() which calls super() and as it will be holding state, we add some empty state to it now. Like in the Header component, we render a simple <h1> to start with. We then export MemeGenerator.

import React, { Component } from 'react';
class MemeGenerator extends Component {
  constructor() {
    super();
    this.state = {}; //empty state
  }
  render() {
    return <h1>MEME GENERATOR SECTION</h1>;
  }
}
export default MemeGenerator;

Now, we import both Header and MemeGenerator into App.js and create an instance of each one in our App component. In order to display the components correctly, we wrap them in a <div>.

import React from 'react';
import Header from './Header';
import MemeGenerator from './MemeGenerator';
function App() {
  return (
    <div>
      <Header />
      <MemeGenerator />
    </div>
  );
}
export default App;

3. Completing the Header component.

To complete the <Header> component, we add a trollface image by inserting an <img> tag and setting the src to the image's URL. We then add a <p> tag with the name of our app and wrap them both in the semantic HTML5 <header> tag.

function Header() {
  return (
    <header>
      <img
        src='http://www.pngall.com/wp-content/uploads/2016/05/Trollface.png'
        alt='Problem?'
      />
      <p>Meme Generator</p>
    </header>
  );
}

As styling is outside the scope of this course, the CSS styles have already been created and applied to the <header> tag. The result is this:

That said, learners can always play around with the styling and hone their CSS skills by themselves. With the <Header/> now complete, the rest of the challenge will take place in <MemeGenerator/>

4. Initializing state

We now have to initialize state so that it saves a top text, a bottom text and a random image, which is already supplied.

To do this, we build up the empty object we placed in the <MemeGenerator/> when we originally built it. We initialize topText and bottomText as empty strings and randomImg as the provided URL.

class MemeGenerator extends Component {
  constructor() {
    super();
    this.state = {
      topText: '',
      bottomText: '',
      randomImg: 'http://i.imgflip.com/1bij.jpg'
    };
  }
}

5. Making the API call

Next, we make an API call to the provided URL and save the data returned (which is an array found in response.data.memes) to a new state property called allMemeImgs.
When we need to load data from an endpoint to use in our component, a good place to make the request is the componentDidMount() lifecycle method. As soon as the component mounts, we use the native fetch() function to call to the provided URL.

componentDidMount() {
  fetch("https://api.imgflip.com/get_memes")
}

This returns a promise which we turn into a Javascript object with the .json() method.

componentDidMount() {
  fetch("https://api.imgflip.com/get_memes")
    .then(response => response.json())
}

Then we get the response which is useful to us by pulling the memes array from response.data.

componentDidMount() {
fetch("https://api.imgflip.com/get_memes")
  .then(response => response.json())
  .then(response => {
  const { memes } = response.data
  })
}

Now, we save the results to a new state property called allMemeImgs. To do this, we initialize allMemeImgs as an empty array.

this.state = {
  topText: '',
  bottomText: '',
  randomImg: 'http://i.imgflip.com/1bij.jpg',
  allMemeImgs: []
};

Now, back in componentDidMount(), we set state. As we are not interested in what the previous state was, we set allMemeImgs to memes.

componentDidMount() {
  fetch("https://api.imgflip.com/get_memes")
    .then(response => response.json())
    .then(response => {
  const { memes } = response.data
  this.setState({ allMemeImgs: memes })
  })
}

To ensure that it works, we console.log the first item, which looks something like this:

Here's an overview of the entire componentDidMount() function.

componentDidMount() { //ensure that data is fetched at the beginning
  fetch("https://api.imgflip.com/get_memes") //call to URL
    .then(response => response.json()) //turn promise into JS object
    .then(response => {
  const { memes } = response.data //pull memes array from response.data
  console.log(memes[0]) // check data is present
  this.setState({ allMemeImgs: memes }) // set allMemeImgs state
})
}

6. Creating the input form

We now want to create a form which will eventually allow the user to input the top and bottom texts. We do this with an HTML <form> tag and a simple <button> which says 'Gen'. We style it with the pre-provided CSS.

render() {
  return (
    <div>
      <form className="meme-form">
        <button>Gen</button>
      </form>
    </div>
  )
}

7. Adding input fields to the form

Next, it is up to us to add the two input fields (one for the top text and one for the bottom text). The form should be a controlled form, so we will need to add all the attributes needed in order for that to work. We will create the onChange handler later.

We create two input fields which both have the type text and appropriate name attributes (topText and bottomText). Rather than using labels, we use placeholders: 'Top Text' and 'Bottom Text'.

Lastly, in order to make this a controlled form, we set the value as equal to the current value in state with {this.state.topText} and {this.state.bottomText}.

render() {
  return (
    <div>
      <form className="meme-form">
        <input
          type="text"
          name="topText"
          placeholder="Top Text"
          value={this.state.topText}
        />
        <input
          type="text"
          name="bottomText"
          placeholder="Bottom Text"
          value={this.state.bottomText}
        />
        <button>Gen</button>
      </form>
    </div>
  )
}

8. Creating the onChange handler.

Now, we create the onChange handler, which will update the corresponding state on every change of the input field.

First, we create a handleChange() function which receives an event.

handleChange(event) {

}

Now, we set the onChange of both input fields to equal handleChange.

<form className='meme-form'>
  <input
    type='text'
    name='topText'
    placeholder='Top Text'
    value={this.state.topText}
    onChange={this.handleChange}
  />
  <input
    type='text'
    name='bottomText'
    placeholder='Bottom Text'
    value={this.state.bottomText}
    onChange={this.handleChange}
  />
  <button>Gen</button>
</form>

We need to remember to bind the method in the constructor — a common gotcha for React developers.

constructor() {
  super()
  this.state = {
    topText: "",
    bottomText: "",
    randomImg: "http://i.imgflip.com/1bij.jpg",
    allMemeImgs: []
  }
  this.handleChange = this.handleChange.bind(this)
}

To test the new handleChange() function, we add a simple console.log:

handleChange(event) {
  console.log("Working!")
}

If it is correctly firing, you'll see something like this:

Now to fill in the handleChange() function. To do this, we want to pull the name and value properties from event.target so that we can get the name of the state we are supposed to update (topText or bottomText) and the value which is typed into the box.

handleChange(event) {
  const { name, value } = event.target
}

We will now use these to update state. As we are not interested in what the previous state was, we can just provide an object in which we set the [name] to the value typed into the input field.

handleChange(event) {
const {name, value} = event.target
this.setState({ [name]: value })
}

9. Displaying a meme image alongside the top and bottom text

We now want the app to display a meme image alongside the top and bottom text. We insert an <img> tag underneath the <form> and set the randomImg which we initialized as its source by using src={this.state.randomImg}. We then add two <h2> tags which display the corresponding text which is also saved in state. All of this is wrapped in a div and styled with the pre-provided meme class.

<div className='meme'>
  <img src={this.state.randomImg} alt='' />
  <h2 className='top'>{this.state.topText}</h2>
  <h2 className='bottom'>{this.state.bottomText}</h2>
</div>

We can now test the app by typing into the text boxes. As state is being correctly set on every keystroke, the text displayed on the image changes each time we type.

10. Displaying a random meme image alongside the Top and Bottom text

Now, we need to create a method which displays a meme image which it randomly chooses from our allMemeImgs array when the Gen button is clicked. The property on the chosen image in the array is .url.
We can break this task down into smaller parts.

Firstly, we set the form's onSubmit to equal the name of our new method, which we will call handleSubmit().

<form className="meme-form" onSubmit={this.handleSubmit}>

We now create the handleSubmit() function above the render() function. We need to preventDefault on the event, otherwise, the method will try to refresh the page.

handleSubmit(event) {
  event.preventDefault()
}

We also need to bind handleSubmit() in our constructor().

constructor() {
  super()
  this.state = {
    topText: "",
    bottomText: "",
    randomImg: "http://i.imgflip.com/1bij.jpg",
    allMemeImgs: []
  }
  this.handleChange = this.handleChange.bind(this)
  this.handleSubmit = this.handleSubmit.bind(this)
}

Now, we need to get a random number, get the meme from that index and set randomImg to the .url of the random item.

handleSubmit(event) {
  event.preventDefault()
  // get a random int (index in the array)
  // get the meme from that index
  // set `randomImg` to the `.url` of the random item I grabbed
}

To get a random number, we use Math.floor(Math.random). To make sure that it is one of the indices in our allMemeImgs array, we multiply by the length of the array.

const randNum = Math.floor(Math.random() * this.state.allMemeImgs.length);

We now set randMemeImg to equal allMemeImgs, with the index of allMemeImgs as the randNum we just got. We then add .url to the end of it.

const randMemeImg = this.state.allMemeImgs[randNum].url;

Now, all we need to do is update the state by updating the randomImg property with randMemeImg.

this.setState({ randomImg: randMemeImg });

Our completed handleSubmit() function looks like this:

handleSubmit(event) {
  event.preventDefault()
  const randNum = Math.floor(Math.random() * this.state.allMemeImgs.length)
  const randMemeImg = this.state.allMemeImgs[randNum].url
  this.setState({ randomImg: randMemeImg })
}

Completed Meme Generator

We now have completed the meme generator app, and get a different image every time we hit the Gen button, which is then overlaid with the text we input.

To further our learning, we could play with code and see whether we can improve it, or try to get images from a different API. For some really heavy-duty practice, we could even delete all the code and try building it again from scratch.

Congratulations on following through the tutorial and learning all the skills used in this project.

And if you're ready for it, do check out my upcoming advanced course, as it'll take you to a professional level in React!