I want to learn React… but what should I build?
Front end coding is a skill. Well, maybe more like a bundle of skills. JavaScript, React, HTML, CSS, build tools, command line usage… there’s a lot to know!
Like any skill, you need practice before you dive in and build the next Facebook. The best practice comes from concrete projects that you can start and finish.
So what makes a good learning project?
How To Learn React
Small, bite-size projects are a great way to learn any new language or library. Don’t start with a massive Yelp clone. The huge tutorials will teach you how to copy-paste code, but rarely how to use that new knowledge on your own.
Even a ToDo list might not make a great choice for the very first thing you build – it all depends on you.
In general: Learn one technology at a time, and stack them. Learn JavaScript pretty well, then learn some React until you can make components and make them talk to each other, and so on. Check out my Timeline for Learning React for a full rundown.
New to JS?
Have you done very little JavaScript? Maybe you’re coming from HTML and CSS and want to learn to bring your designs to life? If you’re new to logic and programming in general, I suggest starting small – smaller than you think. Get a good handle on JS before you learn React. Learning the basics can be tricky. Don’t overcomplicate it.
The site exercism.io has a bunch of great little exercises. They’re more like programming problems than frontend apps – no DOM manipulation or graphics – but they’re still worthwhile. Kind of like how learning scales on an instrument isn’t the same as learning real songs, but mastering the scales will give you a solid foundation.
Seasoned Pro?
Do you have prior programming experience? Got a few languages under your belt? If you can visualize how you’d build a simple ToDo list in a language you know well, then that might be a perfect intro project. If that seems too easy, try something a little bigger: a shopping site with a list of items and a cart, or a simple chat app.
Somewhere In Between?
Got some JS under your belt? Maybe not too much experience, or it’s mostly with something like jQuery? I suggest starting by copying pieces of apps that you know, or have built before. Notice I said pieces though: clone a form, clone a header… then a tweet, and a Facebook post.
These little building blocks are good to start with, and you can compose them into lists. An awful lot of web apps are just a bunch of lists: Twitter, Facebook, Reddit, Trello, Pinterest… It’s fun because you get something small working right away, and can pretty easily built it up into a real thing and start adding more features.
How Not To Learn React
No matter your level, there are some things to be avoided.
Avoid posts that throw everything at you all at once: React, Redux, Routing, Express, Webpack… It can be totally overwhelming (no shame in admitting that).
It’s like that old question, “How do you eat an elephant?”
…
…
…
“One bite at a time.”
I try to tell everyone who will listen: don’t try to learn React and Redux simultaneously. They’re both good, and you should learn both eventually. But seriously, just start with React. It works great by itself.
Similarly, setting up your own Webpack build is not a prerequisite to building something with React. Use the Create React App tool from Facebook to generate a project, and then dive in learning how to create components.
Do I Need This Now?
Always ask yourself, “do I need this now”? The answer is often “no.”
Many of us developers want to know every piece of the puzzle before laying down the first one. It’s not necessarily bad to give some thought to the future, but it can be paralyzing. Beware of this tendency – it’s like quicksand for your learning process.
Things like…
“How will I make AJAX requests?” – Have you built the components with static data yet? Have you built any components at all? Get something working. Add AJAX later.
“I need SASS/LESS!” – Have you written any components yet? Plain CSS will be fine. Figure out how to add preprocessors later.
“How will React handle routing? Authentication? Data models?” – All good questions. Let me assure you, there are answers for all of them. You won’t hit a wall on day 37 of the project because React or its ecosystem is lacking a certain capability. But: you don’t need those things right now. Build some components, fake everything with static data.
“My project is gonna be huge! I need all those things up front.” – If you’ve already built some small things with React, and decided you like it, and are now gearing up to build your masterpiece? Then sure, that’s a good time to learn about those other puzzle pieces. But if you’ve built nothing yet? Trying to get a “best practices” stack in place before you’ve even written “Hello World” will just slow you down.
This question of “do I need this now” is a good thing to ask repeatedly throughout a project. It’s a close cousin of YAGNI (You Ain’t Gonna Need It).