A simple guide to learning React from scratch
As a developer, the odds are you have probably heard about React, the modern JavaScript UI library that lots of companies are using to power their applications. Some developers believe React is complicated, mostly because of the terms and technologies you usually hear associated with it — JSX, Webpack, Redux, and so on. While it is true that learning React is not super complicated, and many of these terms are actually simpler than they sound, I do recognise that learning about all the moving parts can be a bit daunting for complete beginners. This guide aims to show you what you need to know, step by step, so the learning process does not get overwhelming, and you don’t end up feeling like this:
So, you have decided to take a step to learn how you can also build powerful applications using React, then this guide will help point you in the right direction, and have you shipping in no time.
Learn JavaScript First
Starting with React should come only after you have an understanding of JavaScript. You do not have to be a JavaScript ninja to start with React, but without any knowledge of JavaScript, learning React will be significantly harder, as you will struggle to figure out a lot of things.
Understanding your level of expertise in JavaScript is also important, as it helps dictate your pace. React encourages ES6 standards, so having an understanding of how to write code in ES6 is advised.
My favourite book to recommend for learning JavaScript is Eloquent JavaScript. It introduces you to the possibilities of JavaScript, and teaches how to think like a programmer quite well.
Some other useful resources for getting started with JavaScript are:
- FreeCodeCamp.
- JavaScript30 by Wes Bos.
- Learn ES6 (ECMAScript 2015) by John Lindquist.
- ES2015 Crash Course by Jeffrey Way.
Start Learning *Only* React
It is easy to get carried away with all the shiny things in the React world, and end up trying to learn React, Routing, Redux, Tooling, and so many other things all at once. This is not recommended, as it makes it harder to understand how/why the different technologies are needed.
The best way to learn React is to start out doing only just that… learning React, and not the other fancy things. A good place to start is the React Documentation — it introduces the core concepts in React such as JSX, components, and so on. The official React tutorial is also great. The tutorial shows you how to build an interactive tic-tac-toe game in React.
The recommended way to get started with React projects is to use the create-react-app tool developed by the guys at Facebook. You can also use CodeSandbox if you prefer to get started coding right within your browser.
It is often not a good idea to learn by creating projects with custom boilerplates as they are most times more complicated than a beginner needs. They also force their own structure, which may or may not be ideal for you. It is better to start with the basics and determine your own needs per project as you progress.
Some great courses you can take a look at to get started with React include:
- React Fundamentals by Tyler McGinnis.
- React for Beginners by Wes Bos.
- A multi-part React tutorial by Toptal.
Build Small Projects
After getting a fairly good understanding of how React works, you can start building your own small apps. Examples of such apps include a Todo list, or a clone of your Facebook feed. It is a good idea to take some parts of apps you use regularly, such as Twitter and Facebook and try to recreate them using only React. Examples of these are the profile or timeline components. This helps you apply the knowledge from the previous tutorials. It also helps you learn how to search for solutions to challenges you will encounter building an app on your own.
As stated earlier it is always a great idea to start with create-react-app. As you get more comfortable with React, you can attempt to start your app from scratch and add in all the things you would need. This would introduce you to build tools such as webpack, and how they work under the hood to power your app.
Learn Other Important Concepts
One of the things that makes React so great is its large community, and tools built around it. Two of such tools include React Router and Redux.
React Router
Almost every modern JavaScript projects has some form of routing implemented to help users move between pages or states. You should learn how to work with React Router before moving on to Redux.
Redux
As your React application grows, the need will arise to do more complex things like manage states across components. This is where Redux and the Flux Architecture comes in.
There’s a danger in introducing Redux too early as it is a complexity that is not needed all the time. It is however necessary for large React applications.
There are many great resources for learning Redux, such as these 2 courses by the creator of Redux, Dan Abramov (Also the person in the tweet above):
You can learn these two concepts (routing and Redux) by building small apps that make use of them. The key takeaway at this stage is to understand these tools, and how you can integrate them within your application.
Important Things To Note
While learning, there are some key things you should be aware of which may improve your learning process:
- Learn the concepts one after the other. Don’t be frustrated if the terms seem so many and complicated. React is a large community, so there are a lot of shiny things that can be distracting. It pays more to keep your head down and take it one step at a time. Learn to build a small project, before you build a medium one, then a large one.
- Avoid boilerplate projects. I stated earlier in the article that boilerplate projects usually contain a lot of stuff, and force a directory structure, which may not be suited for you. It does not give you the room to pick out what exactly you need, and learn why some packages are included in a project. It pays more to just use the create-react-app tool (it is pretty much the standard now for starting up new React projects).
Going Further
For further learning, there are a couple of things you might want to take a look at, which are also part of the React Ecosystem.
Next.js — A server rendering framework built by the guys at Zeit. Server-side rendering involves pre-rendering content on the server, before sending a response to the browser. You can get started on using Next.js for server rendering here.
Note that you can also manually configure your React/Redux app for server-side rendering. Next.js just makes it easier.
React Native — Framework for creating native mobile applications using React. The official docs are a great place to get started.
Conclusion
React has grown to be much more than a UI library over the last couple of years — It has become a large ecosystem. The best way to learn to work with React confidently is to take it one step at a time and just start building apps.
To do a recap of some useful resources:
- FreeCodeCamp.
- React Fundamentals by Tyler McGinnis.
- React for Beginners by Wes Bos.
- A multi-part React tutorial by Toptal.
- Getting Started with Redux and Building React Applications with Idiomatic Redux by Dan Abramov.
Do you have questions, or any other tips or resources that have helped you learn? Please share in the comments, let’s discuss.
