DEV Community

Dave Ceddia
Dave Ceddia

Posted on • Originally published at daveceddia.com

5 Projects to Help You Learn React

After you've got a handle on React's basics, what do you build next? A "real" project seems too big, but another todo app won't cut it. You need something you can bite into -- something that will take more than 5 minutes, but not more than a few days.

In this post I'll show you 5 projects that will be fun to build, stretch your abilities a bit, and do not involve any todos.

Tooling

I suggest using Create React App to bootstrap these projects.

Social Card

We'll start off with an easy one. This is more of a component than a full-blown app, but it's a good place to start.

social card

Variations of this UI can be found all over the web -- Twitter, Facebook, Pinterest, Airbnb, Redfin, and so on -- and it serves as a solid building block for the sort of app where you want to display an image + some data.

It's also good practice for breaking down a UI into React components.

Once you have a single SocialCard component rendering, try making a list of them with some fake data.

Weather App

Display a 5-day weather forecast, where each day shows the high and low temperatures, and an image for sunny/rainy/cloudy/snowy. Use fake, hard-coded data until you've got everything rendering correctly.

Weather app

You might notice that the "days" look a lot like social cards...

For added practice, here are a few ways you could expand on the app:

  • Add the ability to click on a day, and see its hourly forecast. You can just maintain the current view in the top-level App state.
  • Add React Router to the project (npm install react-router) and follow the quick start guide here to add routes, such that / shows the 5-day forecast, and /[name-of-day] shows the hourly forecast for a particular day.
  • Sign up for a free API key from Open Weather Map, fetch a real 5-day forecast, and feed that data into your app.
  • Want to get really fancy? Add a graphics library like vx and follow the examples here to add a graph of the temperature over the course of a week or day.

You can see how this app starts off simple, but can be expanded at will to increase the challenge and the learning.

Hacker Hunt

Hacker Hunt is an aggregator of Hacker News stories with categories, but more importantly, it's a good app to build for React practice.

Hacker Hunt screenshot

It has been said that all web apps are basically just lists. This app will give you some practice with lists of components that are a little more complicated than todos.

Use static data at first, and if you want a little more of a challenge, fetch stories from their API. From what I can glean from devtools, this is just a single route, https://hackerhunt.co/api/daily/0, and you can replace the 0 with a different page number.

You could go a step further and replicate their routing structure with React Router.

Calculator

Calculator mockup

You probably already know how these work. Add, subtract, multiply, divide... Clicking the numbers or the operations should perform the action.

For added challenge, respond to keyboard input too. You shouldn't need to add an <input> element to make this work. If you do use an <input>, make it so that the user doesn't need to focus the input control to type into it.

Spend a little time thinking about how the state will be represented. Do you need to store more than just the numbers on the display? When you type a new number, does it replace the display with that number, or append it to the end?

Add some snapshot tests with Jest to test that the calculator works correctly.

Github Issues Page

Make a simplified version of Github's Issues page. Here's an example. To keep the scope small, just focus on implementing the list of issues, and ignore the stuff in the header (search, filtering, stars, etc).

Github issue list

Start by fetching open issues from Github's API and displaying them in a list. You could use static data for this too.

Then add a pagination control to allow navigating through the entire list of issues. You might find it useful to add React Router too, so that you can navigate directly to a given page.

For added difficulty, implement the issue detail page too. Render the issue's Markdown text and its comments using something like react-markdown.

Github issue detail

Here is a working example using React, Redux, and React Router that implements the features above plus a few more.

What Next?

Hopefully I've given you some ideas for the kinds of things to build to help advance your React skills. For more along these lines, read about Learning with Copywork and follow along to build a metronome in React.

Originally posted at daveceddia.com.

Latest comments (4)

Collapse
 
bossajie profile image
Boss A

I'll try this. Thank you so much for this. I hope you can add more for beginners in react.

Collapse
 
masticore252 profile image
Albert Vásquez

this post is exactly what I needed, I'm currently learning react and I was just thinking what to build for practice

Collapse
 
stst31415 profile image
Stefan Steinbauer

This is cool. Exactly what I missed.

Collapse
 
Sloan, the sloth mascot
Comment deleted