How I learned React?

2021-12-12 — 5 min read

Edit post on GitHub

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 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 backend is not possible to build an online store with actual inventory. So we also need developers to build API between frontend and backend.

From my point of view makes this approach essayer to hire developers but this is a different story.

When you start working with React, you will find that there is an extreme amount of material. Unfortunately many are books quickly become outdated or not good enough to learn. After also most two years working in React and TypeScriprt in my spare time.I will summarize In this Blogpost what help me to tame the technology stack.

The foundation before you start with React

Before you start with a framework like React, it is essential to understand the language basics, in this case, JavaScript. If you are not familiar with all ES6 (ECMAScript 2015) features, you should check out:

Good Ressources to learn TypeScript

In my experience with a nice TypeScript Setup, I found many bugs in development because of the type system also it reduces the technical debt. 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.

A 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/

TypeScript kickstart bundle by Todd Motto $149

This video course is split into two parts: teach bases like setup TypeScript and foundational things, the second part shows you advanced technics like Generics and Overloads.

Todd Motto is a great Teacher who uses more of a front-teaching method in the course. After each lesson, I recommend making a short break and memorizing the syntax and pattern by building what you have seen.

https://ultimatecourses.com/courses/typescript

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)

Fullstack React with TypeScript ($39.99)

I practical guidelines you will learn building professional React Application with TypeScript. I find the examples very practical and help one deepen the React Pattern and remember.

I miss explanations for the basics like how the pattern works in theory with graphics. without React knowledge, you will not understand some 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.

From my point of view it has excellent Examples. I think you can spend weeks to understand all sections and build all things with all extra credits, which helps for real applications.

To summerize for me, it was worth spending the money as I gained a deeper understanding of React.

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 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. 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.