Menu Close
The Essential Resources To Learn React For Beginners
Development Technology

The Essential Resources To Learn React For Beginners

Posted on 22/03/2019
2 min read

So you want to learn React? It is a clever decision because React is just the right JavaScript library for creating single-page applications. There is a lot of learning resources on the Internet, but finding high-quality materials can be problematic.

Here is my proposal to start with React the right way.

First of all, you need basic knowledge of HTML and CSS. If you don’t have any idea what it is, I think that this online course at W3 is the best source to start with.

React is just a library, so JavaScript is crucial for you (in short JS). For now, let’s focus on JS. From my perspective, the best sources for JS learning are books by Kyle Simpson. He has a series of books called “You Don’t Know JS”. There are materials about scopes, types, ES6 syntax, asynchronous functions. I really recommend reading them. 

React Entry-level

Writing code in Notepad is not the best solution for a developer. You need IDE (Integrated Development Environment), which colours your code, gives you hints and helps with formatting. I prefer WebStorm, but you must know it is a paid tool. For learning React, Visual Studio Code will be enough though. You can also start with an online IDE like JSFiddle or Codepen.

learn react with briisk

source: codepen.io 

After a successful configuration of IDE, the next step is simple — read the documentation. The official resources from React authors are really valuable (much better than Angular official documentation, in my opinion).

For beginners, the best solution to learn React is watching tutorials. There are a few platforms with high-quality content, for example, egghead.io or Pluralsight. These platforms will show you React structure, life hacks, etc. – I mean there is everything you need to know before you start working with React. You can also look at free React basic courses from Egghead.

After this, you should gain at least basic knowledge on how to create the simplest React App. The next tutorial on my list is also an official tutorial from React. This one explains specific topics like creating components with state more clearly.

One of the most important things here is integrating a React app with API. For that, I can suggest — Fetching API with React.js by Ethan Jarrell – it is very simple and easy to understand.

React Mid-level

When you know the basics, it is time for you to find out how to create more complicated apps with more views. I think it is a good moment to learn React Router. It helps create routes for Single Page Application. For this, there is the official documentation and I can also suggest an online video tutorial: React Router and intro to SPA by Learn Code Academy.

In almost every app there are forms, so I think it is a good point to know how it works in React. For simple forms, there is a tutorial from an official React documentation.

When you master React components and routing you can write code to build your first Single Page Application. After that, you are ready to move to a more complex level of React.

React High-level

In this section, I want to focus on Redux – a JavaScript library developed for maintaining application states. You don’t need to fetch data directly to Components, but fetch what you want to Redux state and then you can just connect specific data from store to Component. The store is available for every Component that you have. Redux works excellently with React. For beginners, I suggest Redux tutorial by Learn Code Academy.

In my opinion, observables are better for async communication between API and Redux store than Promises. You can manage actions, switch them to another action, manipulate data in one Epic. For more details, here is a link to GitHub package.

Redux Forms allow you to keep your forms in Redux. You can manage your forms from every Component in your app. You can also create reusable components for Fields and wrap them in Redux Form. At Briisk, Mirosław Bogacz, a senior front-end developer, wrote an example of how to use Redux Form. You can read it here.

redux form

All the materials I presented above are good for beginners and mids, however, without practice, they may not give you too many results. What I recommend to you to learn React, is to practice, practice and practice more.

Experience is the best teacher, but you need to have something to start with, and I believe the above materials will do the job. Try to avoid StackOverflow at the beginning, because there is a lot of bad practices and unstructured knowledge. However, reading the documentation again, and again will also make you a better developer. That is it from me, I hope I helped. Good luck and enjoy React!


About the author

Rafal Maszkowski
Rafal Maszkowski
Frontend developer

Creates modern web applications using React, Angular. Enthusiast of hybrid mobile apps in React Native and functional programming.

See other blog categories

Business

Tips, trends and business insights for startups and growing companies.

Culture

Team building, team development and values that build a conscious organisation.

Development

Top frameworks, technologies and development tips from our team.

Project management

Everything you need to know about project management to make your projects successful.

Let's talk!

Get an estimate of your project’s time and costs.