2 sample apps using create-react-app


January 11, 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:

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.

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.

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.

ABOUT THE AUTHOR

Andrew H Farmer
Hey, I'm Andrew. Welcome to my blog on Modern JavaScript with React. I'm constantly searching the web to stay up-to-date on the latest frontend web tools so you don't have to. Got a question? Tweet me @ahfarmer!