How to Level Up your React Skills

last updated: Aug 7th, 2018


React is pretty awesome, am I right?

Even if you've been struggling a bit. You believe deep down that it could be awesome... it will be awesome once you've mastered it.

And there are so many great resources out there. Places like Codecademy and freeCodeCamp are two very popular free resources for beginners. Who doesn't love free stuff? But you're not a beginner anymore.

You've been working with React for months... a year... two years, even. You know you're good at React... but you want to be great. If only you could get there.

Here's the burning question: how is a mid-level React developer supposed to level up when it's so difficult to find intermediate and advanced resources? Mostly you keep finding content written for complete newbies.

Well first of all, you might like to familiarize yourself with Mark Erikson's react-redux-links. He's a maintainer of Redux and has painstakingly curated years of content. But be warned, there is a lot of content. It's ideal for self-directed learners who know what they're looking. Otherwise, it can be quite overwhelming.

Here are some less-intimidating suggestions for leveling up your skills. Some are specific to React and others are general web development skills. Of course, to master React you're going to have to be well-rounded in all things web.

Suggestions for a novice developer

Solidify your understanding of HTML & CSS

Do you know the difference between display: block and display:inline? Do you know all the ways to center something vertically? Have you started using CSS Grids? There are so many features in CSS... I'm convinced it's impossible to know it all because I'm still learning new things after several years.

Solidify your understanding of JavaScript

How well do you know the fundamentals? Make sure you know how to use map, filter, and reduce. Know the difference between strict equality (===) and loose equality (==). Know how closures work. Know how to use Promise but actually async/await instead. etc. This is definitely not an exhaustive list.

Suggestions for an intermediate developer

Learn a new third-party React library

The ReactJS ecosystem is massive. Pick something you don't know and read through its documentation. Build a sample app using it. Are you into Redux? Maybe try MobX. Do you use redux-thunk? take a look at redux-saga. Have you tried Formik for forms?

Start automated testing

Adding testing into your routine will make you a stronger programmer because it forces you to think about your code in ways that you wouldn't normally when writing it. You think more about edge cases and handling error conditions. It also pushes you to write better code using techniques like dependency injection because testing poorly-written code is much harder than testing well-written code.

Upgrade from JavaScript to TypeScript

Once you know the basics of JavaScript, you're ready to take the next step into TypeScript. TypeScript is a superset of JavaScript, which means that any valid JavaScript program is also a valid TypeScript program. The value add is in the type annotations that allow the compiler to perform static type checking.

Have you ever misspelled a variable name or changed a variable somewhere (but not everywhere) and you don't realize it until you're running the code (or a user is running the code?). Guess what? TypeScript solves that problem and more. Bonus: you'll never have to write propTypes again!

Read someone else's code

Suggestions for an advanced developer

Think about usability and user experience

I'm not talking about whether you should use Bootstrap, Material UI, Semantic UI, etc. versus custom CSS. I'm talking about making larger architectural choices based on the needs of your users. How can you make the user accomplish his/her tasks as easily as possible? and how can you make the experience more enjoyable.

Learn functional programming

Haskell and F# are two popular functional languages. Learning how to write code in a functional style will make your code cleaner and easier to test.

As far as React is concerned, the important concepts are immutability, pure functions, and higher-order functions. These come in handy for understanding Redux, stateless functional components, and higher-order components.