DEV Community

Cover image for Project 7 of 100 - React Meme Generator
James Hubert
James Hubert

Posted on

Project 7 of 100 - React Meme Generator

What happens if you are in the middle of your 100 days of code challenge and you miss a day or two? Do you push out your projected end date and just get there when you can? Or do you try to jam 3 React projects into a single Sunday so you can catch up? I choose the latter.

The Project

I had an absolute blast doing this project. This is the third time I have tried finishing Bob Ziroll's free introductory React course on Scrimba- which I think is probably one of the best online classes out there.

For some reason the first two attempts just didn't pan out- I didn't understand what I was doing as well. Luckily since then I've had about 6 months of internship experience in web dev to hammer in those tricky Javascript bits that may have stopped me before. This meme project is the capstone to that Scrimba course.

Concepts

The main reason I liked this project was the concept. Seriously- how many different online tutorials can a person possibly code a Todo list app for and still feel invigorated about development? The meme generator was a fun use case for the skills we've been learning in that course.

It uses the following:

  1. Functional components
  2. Class-based components
  3. Controlled components (another way of saying an input and the components's state are connected)
  4. The fetch API, which seriously not many courses give you enough chances to use
  5. Javascript ES6 object destructuring
  6. React lifecycle method componentDidMount
  7. A fun memes API

This project reaffirmed for me that the best way to learn something is to pursue projects that excite you personally. I had a good time doing it and might even do it again on my own later tonight just to hammer in the concepts.

5 / 5 stars would code again!

github repo: https://github.com/jwhubert91/100daysofreact/tree/master/day-8-meme-generator
deployed app: https://100-react-projects-day-8-meme-generator.netlify.app/

Follow me on Twitter and I'll follow you back - pretty please :)
https://twitter.com/jwhubert91

Top comments (0)