How i learned React?
Tags: react, typescript
Published: 2021-01-08 00:32:20

---
title: How i learned React?
published: true
date: 2021-01-05 00:00:00 UTC
tags: react,TypeScript
canonical_url: https://larsroettig.dev/how-i-learned-react
---

![How i learned React](https://dev-to-uploads.s3.amazonaws.com/i/hplunupx21ee36qm79cn.jpg)

In 2019 I resolved to learn React because I have seen that PWA will be one of the critical technologies of the future.

In 2020 has shown that it was the right decision because the headless hype train will roll in soon.

I know React is not a golden hammer and is maybe not the right choice for your Project.
If you want to more when you should select a PWA Approche, you should read [Getting started with Magento PWA Studio](https://larsroettig.dev/getting-started-with-magento-pwa-studio).

Now when you get into headless architecture, there is significantly much to learn and understand.
Because the development of backend and frontend is independent.

From my perspective, an advantage new frontend developers can use already known technologies like ReactJS without going through the learning curve of Magento.

But without data from Back-End is not possible to build an online store with actual inventory. So we also need developers to build API between head and backend.

After almost two years working in React and TypeScriprt in my spare time i am ready to summarize what help me to tame the technology stack.

## The Foundation before you start with React

If you are not familiar with all ES6 (ECMAScript 2015) Features you should check out


{% youtube WZQc7RUAg18 %}


## Good Ressources to learn TypeScript

In my experience with a nice TypeScript Setup, you found already many bugs in development also It reduces the technical dep.
If you haven't used it yet, I strongly recommended you should give it a shot, and you will never use plain JavaScript again if you can prevent it.

Also, there is a Big shift in React Community Trainers like Kent C. Dodds, Sebastian Springer also recommends using TypeScript.

**TypeScript in 50 Lessons by Stefan Baumgartner (39.00 €)**

> Stefan Baumgartner breaks down the quirks of TypeScript into short, manageable lessons.

I would call it the TS Bible a Complete guide for TypeScript.
I highly recommended to read it, especially the chapters on generics and conditional types.

https://www.smashingmagazine.com/printed-books/typescript-in-50-lessons/

## Good Ressources to learn React.JS
There are incredibly many courses and books to learn to React.
Unfortunately, many are outdated or do not explain enough.

### Foundation materials

**The Beginner's Guide to React (Free)**

This course requires little knowledge of Javascript but shows everything newbies need to know to build a small React application.
If you're working longer with React, you can learn a solid foundation of React, so I recommending don't skip it!

https://egghead.io/courses/the-beginner-s-guide-to-react

**React Hooks in Action ($39.99)**

> Build interfaces in React without writing custom classes.
> React Hooks in Action teaches you to use pre-built hooks like useState, useReducer and useEffect, and build your own hooks.

I really enjoyed the clear examples you also find many Graphic Materials what descript flow and how to React hooks works.
In this book, you also learn about all the essential things to write maintainable React Code.

https://www.manning.com/books/react-hooks-in-action

### Advanced Materials

**TypeScript Plus React = Love (Free)**

{% youtube xfcPUP2_J9E %}

**Fullstack React with TypeScript ($39.99)**

I practical guidelines you learn building professional React Application with TypeScript.

I find the examples very practical and help one deepen the React Pattern and remember My opinion often missing explanations for the basics like how the pattern works in theory with graphics. Without React knowledge, you will not understand many important topics.

Mainly for 39 $ but is extremely good if you do not know what to build with the newly acquired knowledge.

https://www.newline.co/fullstack-react-with-typescript


### Full Course

**Epic React (599$)**

This course is a 19-hour collection of an interactive self-paced workshop exercise.

I finish the first 5 sections of it.
From my point of view it has excellent Examples I think you can spend
four full days to understand all sections and build all things with all extra credits, which helps real applications.

https://epicreact.dev/

### Helpful React, Blogs and posts to understand:

* https://epicreact.dev/articles
* https://kentcdodds.com/blog/
* https://overreacted.io/a-complete-guide-to-useeffect/
* https://overreacted.io/writing-resilient-components/

## Summerize

In my experience, if you learn a new language or it is essential to train it to get Professional. Train in the Job is not really an option. Mostly it leads to a not maintainable code base, and your Team and customer will be unhappy. From my point of view, it is beneficial to start with contributions to project like [PWA-Studio](https://github.com/magento/pwa-studio).
I can recommend before you start a Headless Project, make sure your Team know about all Technologies.
This means your Frontend Team should spend  2-3 days to get familiar with React. Also, you need an Expert what your Team lead and train show the gaps.