Become a Front-end Engineer with React - Official Anthropos Skill Path
Intermediate122h 44minLast updated 08/2025
18
SkillsThis 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.
Content (112)
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!
CSS
JavaScript
ReactJS
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.
In this article Kent C. Dodds explains why he loves React and which are the main points that convince him to bet on it.
This page will give you an introduction to the 80% of React concepts that you will use on a daily basis.
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.
This article explains how to add css classes to React components
You will build a small tic-tac-toe game during this tutorial.
In this video, the authors shows how javascript applications works at Facebook.
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.
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.
Let's practice and Build a React info site
In this video we challenge ourselves to build an event calendar in React from scratch!
Relive our Q&A with the founding team of React and learn what moment convinced them that "React was the real deal".
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.
Career Development Planning
Communication
Podcast
28minIntermediate
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.
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!
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.
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.
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.
Conducting Interviews
Interview Conducting
Setting Personal Goals
Let's watch how Clément Mihailescu handle an intermediate React coding interview managed by Ben Awad.
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.
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.
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.
API Testing
JavaScript
Web Application Testing
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.
Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
There’s another very simple and concise syntax for creating functions, that’s often better than Function Expressions. It’s called “arrow functions”.
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
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.
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.
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.
This video explains how a Promise works in javascript in a visualized way in order to be more comprehensible and make it stick.
There are multiple ways to send a network request and get information from the server. The fetch method is modern and versatile.
Learn how the browser event loop, task queue, microtask queue, and Web APIs work together to enable non-blocking, asynchronous JavaScript.
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.
ReactJS
In this chapter, you’ll learn how to write components that handle interactions, update their state, and display different output over time.
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.
Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.
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.
useState is a React Hook that lets you add a state variable to your component.
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.
useEffect is a React Hook that lets you synchronize a component with an external system.
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.
useContext is a React Hook that lets you read and subscribe to context from your component
useRef is a React Hook that lets you reference a value that’s not needed for rendering
Michael Chan talks about co-location, encapsulation, and CSS grid.
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.
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.
JavaScript
ReactJS
useReducer is a React Hook that lets you add a reducer to your component.
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.
useMemo is a React Hook that lets you cache the result of a calculation between re-renders.
useCallback is a React Hook that lets you cache a function definition between re-renders.
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.
React comes with several built-in Hooks, but if possible to create your own Hooks for your application’s needs.
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.
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.
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.
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.
ReactJS
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.
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.
The compound component pattern allows you to create components that all work together to perform a task.
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!
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.
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.
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.
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.
A render prop is a prop on a component, which value is a function that returns a JSX element.
In Client-Side Rendering (CSR) only the barebones HTML container for a page is rendered by the server.
Single Responsibility Principle in React
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.
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.
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.
Evaluating JavaScript Rendering
Web Performance Optimization
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.
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.
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.
An easy way to dynamically import components in React is by using React Suspense.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
Cypress
Testing APIs
Web Application Testing
Link
12minIntermediate
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.
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.
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.
In this article we will explore React Testing Library. A library that is the most used for unit testing in React ecosystem.
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.
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.
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.
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.
Talia Nassi chats with Kent about knowing the product as a tester, testing in production, and tools for 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.
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.
Full-Stack Development Fundamentals
ReactJS
Web Development Fundamentals
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.
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.
A comprehensive video tutorial on Next.js 13 (App Router) with TypeScript, perfect for beginners.
Explore the latest paradigm shift in React—Server Components, where React components can run exclusively on the server.
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.
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!
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.
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.
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!
Just another tutorial to keep learning how to build real projects while you are learning React.
React tools
A set of tools and additional things you should consider to improve your code and make your coding easier with React.
TypeScript
Get hands-on interactive practice with this free TypeScript tutorial and learn the foundational knowledge and skills you need to become a TypeScript Wizard.
In this tutorial, you'll find challenges centered around reading error messages and practical solutions to solving the issues they describe.
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.
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.
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.
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.
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.
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
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.
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.
In this article, we will explore the architecture, prerequisites, and underlying implementation of Module Federation.
Introduction
Gerson EnriquezSenior Frontend Engineer @ Edreams Odigeo / Co-organizer React.js Milan
Gerson Enriquez, the curator of this Skill Path at Anthropos, is a Sr. Front-end Engineer with years of experience in using React and building full-stack web applications. He is also one of the co-organizers and founders of the React js community in Milan.
Skill objectives
Explore more simulations by category and topic: Technology & Engineering > Coding, Software & Engineering ‧ AI, Machine Learning & Gen AI ‧ Cybersecurity & Information Security ‧ Data Analytics & Business Intelligence ‧ Cloud, DevOps & IT Systems | Product & Delivery > Project Management ‧ Product Management | Leadership & organization > Change Management & Digital Transformation | Customer facing roles > Customer Support & Customer Success ‧ Sales & Account Management ‧ Marketing & Digital Marketing | People & culture > Soft Skills, Communication & Interpersonal ‧ Talent Acquisition & Development ‧ Team Management | Business Operations > Operations and Supply Chain Management ‧ Finance & Financial Analysis