2 sample apps using create-react-app

January 11th, 2017

React starter projects can be super helpful, but they also tend to have a lot of dependencies and it can be difficult to get updates.

Facebook created create-react-app to solve these problems. It only has a few dependencies, and its easy to get updates.

If you create a new app with create-react-app, you won’t have a lot to start with though. At first, your app will look like this:

cra

You might not know where to go from here. But if you’re like me, seeing a finished example can help a lot.

That’s why I created two complete create-react-app apps. I’ll share both with you now, with code. Both apps are extremely simple, so browsing the code should be relatively easy.

App #1: Calculator

This is a full-screen, mobile-friendly calculator app similar to the iOS calculator: ahfarmer.github.io/calculator.

calculator app

Here’s the complete source code: github.com/ahfarmer/calculator.

You can either clone it and browse it on your machine, or browse the commits. The commits are in reverse chronological order, so if you want to follow along with how it was built, start at the bottom and work your way up. You can see what steps I take (and in what order) when creating a simple app like this.

This app is for searching emoji. It is not meant to be useful, but was super fun to build, and I really like how it turned out: ahfarmer.github.io/emoji-search.

emoji app

What's next?

I believe the best way to start learning React is to build a tiny app like one of the examples above.

For concrete directions on how to do that check out my ebook: Your First React App. It will walk you through the process of creating your very own unique tiny app, from start to launch.

JavaScript Stuff in Your Inbox

Get tips, lists and guides to help you learn complex web development topics.