A React Beginners Roadmap through the React Eco System

React beginners often have a hard time learning React, since the React ecosystem seems huge. You will inevitably stumble upon stuff like Redux, Webpack or Babel very early. At this point I was so overwhelmed because I had no clue where to start first.

It was even more confusing that I didn’t even know the problems that those tools tried to solve. Today I know better and I’m going to tell you that there is no need for any of these – at least not yet.

This post appeared first on my blog.

Introduction

I’m writing this for everyone who is just starting out – React beginners, or newbies in web development. However, I assume that you have at least some basic knowledge of HTML, CSS and JavaScript.

This post is designed to be a roadmap that guides you step by step from the entry level to more sophisticated topics – it helps you to focus on things that matter – instead of wasting time worrying about things that you don’t need yet. The roadmap will not contain detailed explanations of all of the different topics. In-depth content will be covered in future posts and extra detailed content about all of this will be part of my new project: React for Noobs – a no-confusion guide for React beginners.

But enough of that – the next sections will show you, what to focus on to improve your knowledge in React and it’s eco system without pain.

Prerequisites

Before starting with React, you should have at least a basic knowledge about HTML, CSS and JavaScript. That said, have a look at ECMAScript6 (ES6) – when working with react, you will need at least

• Arrow Functions
• Classes
• Template Literals
• let
• const

This should be enough to begin with the basics.

Basics for React Beginners

When getting started with React, I strongly suggest that you start with the official tutorial. You’ll learn everything you need to understand the bare basics of React.

In the next sections, I’ll provide some additional thoughts to some of the stuff that you see in said tutorial.

create-react-app

This awesome tool makes bootstrapping a new application a LOT easier. It saves you from fiddling around in configurations that might just confuse you a lot. So for now, stick with create-react-app and be happy to bootstrap a new application with just one command.

Components

In React, everything is structured in components. So as soon as you know how to work with JSX, make yourself comfortable with passing data into components:  props , managing  state inside a component and also  lifting state to a parent component. Learn how to properly handle events or pass functions as props (see “Lifting State Up”). Also don’t forget that a little styling won’t hurt :)

The next step is then to learn how to do conditional rendering and how to render Lists and Forms, as well as how to compose your components.

If you learned all of the above, you should create a small application on your own to strengthen what you’ve learned. Something small and simple. Back then, I just built a Tweet component that should look exactly like the one you see on Twitter. All you have to do is to create the necessary components, put in some static data and play around with it. You could also extend it to be a list of tweets.

If you feel comfortable enough, you can focus on more advanced stuff.

Advanced React

Now that you’re able to create useful components, it’s time to have a look at PropTypes. Also, as you might want to get your data from a remote server or API, make yourself familiar with Life Cycle Methods and how to fetch data from a server. Note: You can use React with any REST backend / API you want – there is no restriction.

You might want to split your app into different screens. To handle the transitions, you will need React Router. Alternative solutions for that exist, however, I suggest to start with react router, which seems to be the go-to solution in the community.

If you don’t have already, also have a look at how to handle forms, especially have a look at uncontrolled components, which you’ll need most of the time when working with forms.

Tip: Use functional components over class components everywhere you can. This also means, you should try to keep as many components stateless as you can. You’ll be thankful later when you didn’t spread your state over your whole application – especially if you have to do some refactoring. For further reading, I recommend Dan Abramov’s article about Presentational and Container Components.  

Error Boundaries were introduced with React 16. They catch JavaScript errors and avoid crashing the whole application. Instead, React will display a fallback UI instead of the failed child component tree.

To avoid errors in the first place, have a look at Jest – . All the apps that were created with create-react-app support testing with Jest. The cool thing with Jest is, that you can test snapshots of React component trees. That makes creating tests a lot easier.

What now?

Now you know a lot about React. You should be able to create some complex applications that are communicating with a backend server or API.

At a certain point you might realise that managing state gets harder, the more complex your application is. You should now have a look at state management with Redux or MobX.  I’d suggest you try both and decide what fit’s best. Many React Beginners stumble over Redux relatively early in their React career and then try to put it into all of their applications. Most of the time this will just add complexity – instead of taking it away.

In some cases you want to render your React App at a Server. This might be necessary out of SEO or performance reasons. I put this here, because I truly believe that React Beginners shouldn’t be thinking about Server Side Rendering.

If you want to change something in the build process or in the hidden configuration files (thanks to create-react-app), you can eject it. I do not suggest that for React Beginners, because you will instantly add a lot of complexity to your application. So prepare yourself for that by familiarizing yourself with Webpack and Babel. Their configuration files will lie around in your application folder, you should know what they do.

Wrapping Up

React Beginners often have a hard time getting into it. Once you got the basics and an idea how to proceed step by step, it gets a lot easier. I hope that this guide helped you to understand what you – as a beginner – really need, and what you should postpone to later.

I want to make the life of React beginners a bit easier. That’s why I recently started working on React For Noobs. It is a step by step guide that takes React Beginners by the hand and guides them step by step from Noob to Pro.

React for Noobs - A Guide from Noob to Pro

There is even more ...

Do you want to learn more about React and it's ecosystem? Good news! Subscribe to my newsletter to get more articles delivered right into your inbox, for free!

Thanks for reading the article until the end! I would appreciate if you let me know what you think. Leave a comment, contact me on Twitter or send an email to hi@andreasreiterer.at – I’m happy to respond to any message I get.