Become a Front-end Engineer with React - Official Anthropos Skill Path

This skill path will teach you how to become a Frontend Engineer using React JS, the famous framework that today is used to build millions of web applications. This path is designed for people that have a strong programming knowledge and some experience in the frontend or backend world and it's focused on teaching you how to start using React to build small and large web applications. We also cover several additional things, from Typescript to using Next.js to go full stack with your application.

Inside the path we also tell you how to build your personal brand, go through interviews for similar roles and other non technical skills that really matter for engineers. 

By Gerson Enriquez · Senior Frontend Engineer @ Edreams Odigeo / Co-organizer React.js Milan

Skill objectives

Chapter 01

Learn the React fundamentals

In this initial chapter you will learn everything about React: from where it started to how it works and its fundamentals. Pay attention, this is a critical path to start the right way!

Skills: React, CSS, JavaScript

Video1h 18min

React Documentary

The Documentary brings you the full story behind the early days of React, focusing on the dedicated group of developers who helped bring it to the world stage. 

Link10min

Why I love React

In this article Kent C. Dodds explains why he loves React and which are the main points that convince him to bet on it. 

Link20min

Quick Start with React

This page will give you an introduction to the 80% of React concepts that you will use on a daily basis. 

Video30min

Pete Hunt: Rethinking best practices

React, the new open-source JS library from Facebook and Instagram, is a different way to write JavaScript apps. When it was introduced at JSConf US in May, the audience was shocked by some of its design principles. 

Link10min

Styling and CSS

This article explains how to add css classes to React components 

Link10min

Tutorial: build a small Tic-Tac-Toe game

You will build a small tic-tac-toe game during this tutorial. 

Video19min

Tom Occhino and Jordan Walke: JS Apps at Facebook

In this video, the authors shows how javascript applications works at Facebook. 

Video15min

How does React actually work?

Have you ever wondered, how does React actually work? In this video, we will explore what is really happening behind the scenes. First, we will learn about React elements, components and React Reconciliation. 

Link10min

Why React needs a Key prop

In this article you will understand why the key prop is necessary in React. The key prop has less to do with arrays, and more to do with controlling when a component is reused or disposed of and created anew. 

Link5h

Build a React info site

Let's practice and Build a React info site 

Video24min

Building an event calendar – React Challenge

In this video we challenge ourselves to build an event calendar in React from scratch! 

Video1h 3min

Q&A with the cast of React.js: The Documentary

Relive our Q&A with the founding team of React and learn what moment convinced them that "React was the real deal". 

Chapter 02

Focus on non-tech skills: how to become a better developer

Now that you know a bit more about React, we will spend this chapter focusing on the soft skills that will make you a better Frontend Engineer and will help you accelerate your career.

Skills: Career Development Planning, Communication

Podcast28min

How to stand out as a new developer (and ask amazing questions) with Dan Moore from FusionAuth

What do you wish someone had told you when you were just starting out? If you are a new developer, there are skills you have, skills you can transfer from somewhere else, and skills you don’t even know you need. 

Video13min

Intentional Career Building with Kent C. Dodds

Kent C. Doods gives us his point of view on to build an intentional career. Kent has authored 180 blog posts, created courses on React and unit teseting, hosted podcasts like JavaScript Air and Angular Air. He's also given countless talks and eppared on presentations. From the outside lookign in, it's hard to imagine how he gets so much done! 

Link31min

Learn strategies on how to effectively teach yourself

Learn strategies on how to effectively teach yourself in this great interview that will give you a lot of ideas on how you can constantly improve. 

Podcast44min

How to create a web dev portfolio that companies and other devs will love

You'll learn why you need to have a portfolio, how to make one, and is there a formula that works. Josh will teach you how to steal a design for your portfolio website and not get caught and how to develop an eye for design in the long run. 

Chapter 03

Preparing for React JS interviews and building a personal brand

In this chapter we will teach you a bit more about interviewing for Frontend Engineer roles with React. This is critical to improve your ability to explain your experience, even if you are not looking for a job but want to better explain your skills.

Skills: Interview Conducting, Interviewing, Setting Personal Goals

Video59min

Intermediate React.js Coding Interview

Let's watch how Clément Mihailescu handle an intermediate React coding interview managed by Ben Awad. 

Video58min

Coding interview with Dan Abramov at Meta and creator of Redux

This is a great and very honest coding interview with Dan Abramov, you can use it to learn and review several concepts about React. Dan is a famous team member of the React team at Meta. 

Link32min

Build your personal brand and your reputation

Whether you know it or not, we all have a "personal brand". It's the summary of the part of yourself that you present to the public. And while there are negative connotations to the term, it doesn't have to be that way. 

Chapter 04

Modern Javascript

In this chapter we will review a bit of Javascript and learn how to write it in a modern and effective way. This is a great chapter if you are learning Javascript or if you want to get better at it.

Skills: JavaScript, Web Application Testing, API Testing

Link30min

Leveling up your Javascript

The JavaScript ecosystem is vast and solves a wide array of problems. Because of this, it is key that you have a foundational understanding of JavaScript if you want to be able to work across the JS spectrum. 

Link20min

Template Strings

Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates. 

Link15min

Arrow Functions

There’s another very simple and concise syntax for creating functions, that’s often better than Function Expressions. It’s called “arrow functions”. 

Link30min

Destructuring Assignments

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. 

Link20min

Javascript Modules

As our application grows bigger, we want to split it into multiple files, so called “modules”. A module may contain a class or a library of functions for a specific purpose. 

Link15min

Rest parameters and Spread operator

Many JavaScript built-in functions support an arbitrary number of arguments. In this chapter we’ll learn how to pass arrays to such functions as parameters. 

Link20min

Async and Await

There’s a special syntax to work with promises in a more comfortable fashion, called “async/await”. It’s surprisingly easy to understand and use. 

Video9min

Javascript Visualized - Promise Execution

This video explains how a Promise works in javascript in a visualized way in order to be more comprehensible and make it stick. 

Link15min

Network Request: Fetch

There are multiple ways to send a network request and get information from the server. The fetch method is modern and versatile. 

Video13min

Javscript Visualized - Event Loop, Web APIs, (Micro)task Queue

Learn how the browser event loop, task queue, microtask queue, and Web APIs work together to enable non-blocking, asynchronous JavaScript. 

Chapter 05

Learning React Hooks

Learning React Hooks is crucial as they simplify state management and side effects in functional components, leading to cleaner, more efficient, and reusable code. Hooks promote better code organization and align with modern React practices.

Skills: React

Link30min

Adding Interactivity

In this chapter, you’ll learn how to write components that handle interactions, update their state, and display different output over time. 

Link30min

Managing state and data flows between components

In this chapter, you’ll learn how to structure your state well, how to keep your state update logic maintainable, and how to share state between distant components. 

Link15min

Rules of Hooks

Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called. 

Video3min

What are React Hooks?

This video is the introduction of a series of videos focused on React Hooks. In this episode, the author explains why React hooks exist, what they do and what hooks are there. 

Link40min

React Hooks: useState

useState is a React Hook that lets you add a state variable to your component. 

Link36min

How to separate UI State and Server State

Your UI state is not the same as your server state and they should be separate things. By keeping these types of state separated from each other you can simplify your app. Server state is different enough in structure, persistence strategy, consumption, and lifecycle to be managed in smarter systems that are configurable to an apps needs of data freshness. 

Link1h

React Hooks: useEffect

useEffect is a React Hook that lets you synchronize a component with an external system. 

Link20min

The problem with useEffect

useEffect doesn't make it easy for us to follow its rules correctly, and that usually leads to developers taking shortcuts and shipping bugs in production. 

Link30min

React Hooks: useContext

useContext is a React Hook that lets you read and subscribe to context from your component 

Link20min

React Hooks: useRef

useRef is a React Hook that lets you reference a value that’s not needed for rendering 

Link39min

Encapsulate State by Michael Chan

Michael Chan talks about co-location, encapsulation, and CSS grid. 

Link5h 26min

Build a meme generator

This is another practical session from Scrimba specific to learn React: you will be guided in building a meme generator step by step using React. 

Chapter 06

Advanced React Hooks

We will now do a step further and learn a few more React Hooks that are quite advanced but useful for your React knowledge.

Skills: JavaScript, React

Link1h

React Hooks: useReducer

useReducer is a React Hook that lets you add a reducer to your component. 

Video14min

A simple way to learn how to use useReducer

You will learn the difference between useReducer and useState, how to create your reducer function, how to define your actions and return a mutated copy of the state in your application. 

Link1h

React Hooks: useMemo

useMemo is a React Hook that lets you cache the result of a calculation between re-renders. 

Link1h

React Hooks: useCallback

useCallback is a React Hook that lets you cache a function definition between re-renders. 

Video3h 55min

How Hooks have changed how we write React

In this episode, Kent and Dan talk about the ways in which you'll have to reconstruct your mental model of how React works in order to get the hang of hooks, and how hooks more closely align with React's intended model. 

Link1h

Reusing Logic with Custom Hooks

React comes with several built-in Hooks, but if possible to create your own Hooks for your application’s needs. 

Link1h

Custom Hooks in React

Custom Hooks in React allow you to extract logic in a shared hook that can be re-used across multiple components. It helps encapsulate logic in an efficient way, and helps build clean React applications that scale really well. 

Link2h 15min

Build an AirBnb Experiences clone

In this tutorial you will learn how to build an AirBnB clone using React: you will learn how to use in practice a lot of things we have learned so far in the path. 

Link40min

Lessons learned from 4 major projects with Shirley Wu

Shirley Wu has been freelancer since 2016, creating data visualizations for her clients. In this episode, Shirley talks about the four projects that had the most significant impact on her. The most recent influential project was Legends. 

Chapter 07

React Patterns

Learning React patterns is essential for scalable and maintainable code. They provide solutions for common issues, enhance readability, and promote best practices. These patterns helps build robust applications and ensures efficient team collaboration.

Skills: React

Link31min

Using Patterns.dev for building your web apps

Patterns.dev is free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React. In this episode the authors tell us more about this project. 

Link30min

Container/Presentational Pattern

In React, one way to enforce separation of concerns is by using the Container/Presentational pattern. With this pattern, we can separate the view from the application logic. 

Link30min

Compound Pattern

The compound component pattern allows you to create components that all work together to perform a task. 

Video15min

Design patterns in React

This video show you a couple of React design patterns. These are great patterns to use to build scalable React applications and will help you write better React code, and will teach you how to create components that are clear to understand and work with, and that allow you to add as much complexity as you want to your React application! 

Link1h

HOC Pattern

One way of being able to reuse the same logic in multiple components, is by using the higher order component pattern. This pattern allows us to reuse component logic throughout our application. 

Link1h

Hooks Pattern

React 16.8 introduced a new feature called Hooks. Hooks make it possible to use React state and lifecycle methods, without having to use a ES2015 class component. 

Video15min

React component patterns

In this video, Michael Chan talks about 5 different types of components. In each component he will explore a particular React pattern that makes our code cleaner and reusable. 

Link1h 30min

Introduction to Rendering Patterns

Choosing the most suitable rendering pattern can make a world of difference to the Developer Experience (DX) you create for the engineering team and the User Experience(UX) you design for your end users. 

Link1h

Render Props pattern

A render prop is a prop on a component, which value is a function that returns a JSX element. 

Link30min

Client-side Rendering (CSR)

In Client-Side Rendering (CSR) only the barebones HTML container for a page is rendered by the server. 

Video17min

Single Responsibility Principle in React

Single Responsibility Principle in React 

Link30min

Progressive Hydration

A server rendered application uses the server to generate the HTML for the current navigation. Once the server has completed generating the HTML contents, which also contains the necessary CSS and JSON data to display the static UI correctly, it sends the data down to the client. 

Link30min

Server-side Rendering (SSR)

Server-side rendering (SSR) is one of the oldest methods of rendering web content. SSR generates the full HTML for the page content to be rendered in response to a user request. The content may include data from a datastore or external API. 

Link2h

React patterns by Michael Chan

This article from Michael Chan puts together a lot of patterns that we can use in our codebase. For example we can have: Conditional rendering, Children types, Array as children, Function as children, Render prop, Proxy component and more! 

Chapter 08

Managing and optimizing React performance

This chapter is fully dedicated to the understanding and optimization of your React web applications for speed and better performance. We will review some basic and fundamental aspects of web performance and learn how to speed up your React web apps.

Skills: Web Performance Optimization, Evaluating JavaScript Rendering

Video16min

Performance in React and Next.js (Lydia Hallie)

In this video, Lydia Hallie talks about the concurrent features that were introduced in React 18 and how Nextjs leverage these features to provide a better performance. 

Link20min

Bundle Splitting

When building a modern web application, bundlers such as Webpack or Rollup take an application’s source code, and bundle this together into one or more bundles. When a user visits a website, the bundle is requested and loaded in order to display the data to the user’s screen. 

Link45min

Compressing Javascript

JavaScript is the second biggest contributor to page size and the second most requested web resource on the internet after images. We use patterns that reduce the transfer, load, and execution time for JavaScript to improve website performance. Compression can help reduce the time needed to transfer scripts over the network. 

Link30min

Dynamic Import

An easy way to dynamically import components in React is by using React Suspense. 

Video25min

Test your knowledge on web performance by Lydia Hallie

Participate and test your knowledge on web performance by playing trivia with the rest of the audience! Answer multiple choice questions, from more basic to advanced, and learn more about the topics as I'll explain their answers thoroughly. 

Link30min

Import on Interaction

Your page may contain code or data for a component or resource that isn’t immediately necessary. For example, part of the user-interface a user doesn’t see unless they click or scroll on parts of the page. This can apply to many kinds of first-party code you author, but this also applies to third-party widgets such as video players or chat widgets where you typically need to click a button to display the main interface. 

Link30min

Resumable vs Hydration

A key concept of Qwik applications is that they are resumable from a server-side-rendered state. The best way to explain resumability is to understand how the current generation of frameworks are replayable (hydration). 

Link45min

Optimize your loading sequence

In every successful web page load, some critical components and resources become available at just the right time to give you a smooth loading experience. This ensures users perceive the performance of the application to be excellent. This excellent user experience should generally also translate to passing the Core Web Vitals. 

Link20min

Prefetch

Prefetch (<link rel="prefetch">) is a browser optimization which allows us to fetch resources that may be needed for subsequent routes or pages before they are needed. 

Video13min

What is React Suspense?

In this video, we will learn what is React Suspense, how to use it with React.lazy() and how to use it for data fetching. We are also going to build a small app for fetching posts that will make use of Suspense for data fetching and we create a "skeleton screen" as a fallback. 

Link45min

Optimize the loading of your third-parties

It would be hard to find a modern site that operates in silos. Most sites coexist and depend on several other sources on the web for data, functions, content, and much more. Any resource located on another domain and consumed by your site is a third-party (3P) resource for your site. 

Link15min

Tree shaking

It can happen that we add code to our bundle that isn’t used anywhere in our application. This piece of dead code can be eliminated in order to reduce the size of the bundle, and prevent unnecessarily loading more data! The process of eliminating dead code before adding it to our bundle, is called tree-shaking. 

Link45min

List Virtualization

In this guide, we will discuss list virtualization (also known as windowing). This is the idea of rendering only visible rows of content in a dynamic list instead of the entire list. The rows rendered are only a small subset of the full list with what is visible (the window) moving as the user scrolls. This can improve rendering performance. 

Chapter 09

Testing React Apps

In this chapter you will learn why testing is important and how you can make it part of your coding routine. In addition we will learn how to start testing your React applications with a few tools and specifically using Cypress.

Skills: Web Application Testing, Cypress, API Testing

Link12min

Reinventing API Design, Testing, and Mocking: An Interview with Artem Zakharchenko

Artem Zakharchenko, a software engineer specializing in API design and testing, discusses his journey transitioning to open-source contributions and highlights his upcoming workshop on automated testing at the Epic Web Conference. 

Link5h

Learn the basics of testing between UI, API and database

This is an introduction by Cypress to the importance of testing, it's particularly helpful if you want to learn more about testing in general and why it matters. 

Link20min

The true purpose of Testing

Whether you’ve written some tests in the past or not, you’ve likely heard that tests can be useful. And I know you’ve also heard stories about tests that are more of a chore and nuisance than any help. Frankly, I believe both parties are right! But to understand why, I will first let you in on a little secret. 

Video41min

Testing Modern React Apps by Luke Ghenco

Learn how to test your React app like a user would interact with it. Overcome the barrier of complexity in testing React hooks, async code, and user interactions. 

Video7min

What Is the React Testing Library?

In this article we will explore React Testing Library. A library that is the most used for unit testing in React ecosystem. 

Link7min

Anatomy of a Test

As humans, we are bound to chase understanding, and so we are also bound to seek structure and logic in things. Both give us a sense of order that, in turn, inspires and encourages us that everything can be learned, explained, and understood. 

Podcast6min

The Golden Rule of Assertions

What if I told you there was a single rule that can reliably tell apart a good test from a bad one?
This is not a trick, not a sales pitch. It’s a rule I’ve been using for years to help me refine my tests, make them less flaky and more valuable countless times. In fact, it’s such an indispensable rule in practice that I hereby coin it The Golden Rule of Assertions. 

Link5h

UI Testing - best practices

In this article, you will learn some of the best practices on UI testing. The article series explore arguments like: Testing strategies, Server communication testing, Tools and more. 

Link5h

Using Cypress to test your application

Cypress is a modern end-to-end testing framework designed for web applications. It provides a fast, reliable, and easy-to-use environment for writing and running tests directly in the browser. Cypress simplifies test setup, debugging, and offers real-time reloads, making it efficient for developers. It's useful for testing because it ensures the functionality, performance, and user experience of web applications, leading to higher quality and more reliable software. 

Link29min

Test your applications in production

Talia Nassi chats with Kent about knowing the product as a tester, testing in production, and tools for testing. 

Link5h 30min

Cypress Fundamentals for testing

An official course by Cypress to learn the fundamentals to use it for testing your applications. 

Link1h 10min

Advanced Cypress testing

In this course, we're going to explain some of the concepts that might become useful once you have all the basics covered. We'll be talking about advanced assertions, different ways of testing API, network mocking, creating custom commands, and so much more. We'll talk about Node.js and how it is utilized in Cypress. We'll talk about how to properly authenticate, and we'll finish off with a basic setup of GitHub Actions. 

Chapter 10

Full stack React with Next.js and more

This chapter is dedicated to Full stack React and how you can take advantage of Next.JS and other solutions to build full-stack applications. We also explore several additional things like multi-region apps and server components.

Skills: React, Full-Stack Development Fundamentals, Web Development Fundamentals

Video5min

Incrementally Adopting Next.js - Lydia Hallie

Learn how the new Redirects and Rewrites features make it easier to incrementally adopt Next.js, control what kind of content is served based on the incoming request path, and efficiently configure redirects. 

Link5h

Learn Next.js with an interactive course

This is a Next JS interactive course that will introduce you to this framework by building a full-stack web application. This course is step by step and you can follow it pretty easily while building your application. 

Video1h 3min

Next.js Tutorial for Beginners

A comprehensive video tutorial on Next.js 13 (App Router) with TypeScript, perfect for beginners. 

Link1h 30min

Making Sense of React Server Components

Explore the latest paradigm shift in React—Server Components, where React components can run exclusively on the server. 

Video42min

React from another dimension by Dan Abramov at Meta

A live demo of React Server Components and Server Actions by Dan Abramov at Meta. He explains a lot of concepts from the early days of the web and how they can be reinvented in today's Javascript world. 

Video3h 55min

Dive deep into React Server Components

Dan Abramov and Ben Holmes were on a mission to explain React Server Components. They came away with diagrams, code, and a real-world app! 

Link2h 30min

Zod Tutorial

In this tutorial, you’ll gain hands-on practice with Zod by working through a series of exercises that demonstrate how useful runtime checking is. 

Link37min

Remix: Simplifying Modern Web Development

Modern web development offers powerful abstractions, but often reinvents browser functionality. Remix combines dynamic page benefits with PHP-like simplicity, eliminating full page reloads. By using Remix, developers naturally enhance their understanding of browser capabilities. 

Link2h 30min

How to deploy applications across multiple regions worldwide

Deploying distributed apps is actually a pretty complicated thing in general, but Fly makes it really straightforward. In this tutorial, Kent C. Doods will guide you on how to do it! 

Link5h

Tutorial: build a notes app and Tenzies game

Just another tutorial to keep learning how to build real projects while you are learning React. 

Chapter 11

React tools

A set of tools and additional things you should consider to improve your code and make your coding easier with React.

Skills: TypeScript

Link5h

Typescript for beginners

Get hands-on interactive practice with this free TypeScript tutorial and learn the foundational knowledge and skills you need to become a TypeScript Wizard. 

Link4h 10min

Solving Typescript errors

In this tutorial, you'll find challenges centered around reading error messages and practical solutions to solving the issues they describe. 

Link5h 50min

React with Typescript

Starting from the very beginning of bringing TS support to a React project, you'll soon find yourself properly typing hooks and mastering components. You’ll learn everything you need to know to get productive with React and TypeScript. 

Link30min

How to add ESLint to your React project

As a React developer, maintaining code quality is essential for building robust and maintainable applications. Fortunately, there's a powerful tool called ESLint that can significantly improve the quality of your React projects. 

Link20min

Installing Prettier: a code formatter for better code style

Prettier is an opinionated code formatter for various programming languages, including JavaScript, TypeScript, HTML, CSS, and more. It enforces a consistent code style by parsing your code and reprinting it with its own rules, ensuring that the output is clean and uniform. Prettier helps in maintaining readability and reducing debates about code style in a project. 

Link8h 20min

How to start using Webpack for bundling

Webpack simplifies web development by solving a fundamental problem: bundling. The purpose of this guide is to help you get started with webpack and go beyond the basics. 

Chapter 12

Micro-frontends: learn how to adopt them and why

Micro frontends are important because they allow teams to work independently on different parts of a large application, improving scalability and maintainability.

Skills: Micro Frontends

Link1h 30min

Introduction to Micro Frontends

In this article we'll describe a recent trend of breaking up frontend monoliths into many smaller, more manageable pieces, and how this architecture can increase the effectiveness and efficiency of teams working on frontend code. 

Video44min

How to enable Frontend teams with Micro-frontends - Max Gallo @ DAZN

In this episode, Max Gallo, Distinguished Engineer at DAZN, shares his experience on how DAZN implemented micro-frontends on living room devices and web platforms 

Video1h 57min

Micro-Frontends Course - Beginner to Expert

Don't know what a Micro-Frontend, but you've heard the buzz and you want to learn it. Let me take you from just starting out, to understanding asynchronous loading, error handling, shared state, cross platform micro-frontends, how to route multiple applications together, and even how to test Micro-Frontend code. 

Link1h 30min

Micro Frontends: extending the microservice idea to frontend development

In this article, Michael Geers explains what means to extend the microservice idea to frontend development. 

Video44min

Micro-Frontends made simple - Piral, Blazor and the micro-frontends conference with Florian Rappl

In this episode, we dive deep into the benefits of Piral, a micro-frontends framework. With Florian, we explore how it's simplifying the way developers approach building micro-frontends applications. 

Link1h

Webpack 5 Module Federation: A game-changer in JavaScript architecture

Module federation allows a JavaScript application to dynamically run code from another bundle/build, on both client and server. 

Link1h

Understanding Module Federation: A Deep Dive

In this article, we will explore the architecture, prerequisites, and underlying implementation of Module Federation. 