DISCLAIMER 1/42

DISCLAIMER

Everyone learns uniquely.

Start on a complete 20-day journey to master React

through this doc.

Get ready to explore key topics, and get practical

interview questions to test your knowledge and skills.

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 1 2/42

Introduction to React

Goals
Understand what React is and why it is used.
Set up the development environment for React projects.

Topics
Overview of React and its core principles.
Setting up a new React project using Create React App.

Resources
[React Official Documentation - Getting Started]
[Create React App Documentation]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 3/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. What are the major features of React?</h2>
<h2>2. Explain the virtual DOM and how React uses it.</h2>
<h2>3. Describe the process of setting up a new React project.</h2>
</>
); REACT

export default Questions;

Code QUIZ QUESTIONS

1. What are the major features of React?

2. Explain the virtual DOM and how React

uses it.

3. Describe the process of setting up a new

React project.

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 2 4/42

JSX and Elements

Goals
Understand the syntax and purpose of JSX.
Learn how to define and render elements in React.

Topics
Introduction to JSX and its compilation process.
Creating and using React elements.

Resources
[Introducing JSX - React Documentation]
[Babel - JSX Compiler]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 5/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Convert an HTML snippet to JSX.</h2>
<h2>2. How does a React element differ from a browser DOM element?</h2>
<h2>3. Create a React element for a user profile card.</h2>
</>
); REACT

export default Questions;

Code QUIZ QUESTIONS

1. Convert an HTML snippet to JSX.

2. How does a React element differ from a

browser DOM element?

3. Create a React element for a user profile

card.

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 3 6/42

Components and Props

Goals
Learn to define React components.
Understand how to pass data to components via props.

Topics
Function components vs. Class components.
Passing and accessing props in components.

Resources
[Components and Props - React Documentation]
[React Functional Components vs. Class Components]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 7/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Create a component to show user info from props.</h2>
<h2>2. Compare class and functional components in React.</h2>
<h2>3. Describe the function of props in React components.</h2>
</>
); REACT

export default Questions;

Code QUIZ QUESTIONS

1. Create a component to show user info

from props.

2. Compare class and functional

components in React.

3. Describe the function of props in React

components.

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 4 8/42

Component State and

Lifecycle

Goals
Understand how state is managed in React components.
Learn about the lifecycle of a React component.

Topics
Using state in class components.
The lifecycle methods of class components and how to
use them.

Resources
[State and Lifecycle - React Documentation]
[React Component Lifecycle - Diagram]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 9/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. How to add state to a class component?</h2>
<h2>2. Describe a React component's lifecycle.</h2>
<h2>3. Write a lifecycle method to log messages on component updates.</h2>
</>
);
} REACT

Code
export default Questions;
QUIZ QUESTIONS

1. How to add state to a class component?

2. Describe a React component's lifecycle.

3. Write a lifecycle method to log messages

on component updates.

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 5 10/42

Handling Events

Goals
Learn how to handle events in React.
Understand the nuances of event handling in JSX.

Topics
React event handling vs. DOM event handling.
Binding event handlers in class components.

Resources
[Handling Events - React Documentation]
[React Events Cheat Sheet]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 11/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. How to prevent default actions in React function components?</h2>
<h2>2. Write an onClick handler that toggles state in a component.</h2>
<h2>3. Why is binding event handlers in class components important?</h2>
</>
); REACT

export default Questions;

Code QUIZ QUESTIONS

1. How to prevent default actions in React

function components?
2. Write an onClick handler that toggles
state in a component.

3. Why is binding event handlers in class

components important?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 6 12/42

Conditional Rendering

Goals
Learn to dynamically render a list based on state or props
Explore conditional rendering patterns in React

Topics
Conditional rendering techniques include if/else
statements, the ternary operator, and logical &&.
Binding event handlers in class components.

Resources
[Conditional Rendering - React Documentation]
[Styling and CSS - React]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 13/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Show a login/logout button depending on the user's auth status</h2>
<h2>2. Use the ternary operator to render different components based on a
state variable.</h2>
<h2>3. Use a state variable to toggle the element's visibility.</h2>
</>
REACT
);
}
Code QUIZ QUESTIONS

export default Questions;

1. Show a login/logout button depending on
the user's auth status.
2. Use the ternary operator to render different
components based on a state variable.

3. Use a state variable to toggle the

element's visibility.

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 7 14/42

Lists and Keys

Goals
Master rendering lists of data in React.
Understand the importance of keys in lists.

Topics
Rendering multiple components from data arrays.
Correct usage of keys in list elements to optimize
performance.

Resources
[Lists and Keys - React Documentation]
[A Practical Guide to Keys in React - Blog Post]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 15/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Create a component to display email subjects from a list. </h2>
<h2>2. What issues might arise from using indices as keys in lists? </h2>
<h2>3. How do keys aid React component rendering? </h2>
</>
); REACT

export default Questions;

Code QUIZ QUESTIONS

1. Create a component to display email

subjects from a list.
2. What issues might arise from using
indices as keys in lists?

3. How do keys aid React component

rendering?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 8 16/42

Forms and Controlled

Components

Goals
Understand how to manage form inputs with React.
Learn about controlled components.

Topics
Creating and handling forms in React.
Controlled vs Uncontrolled components.

Resources
[Forms React Documentation]
[Controlled Components in React]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 17/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Build a form with controlled text input for comments. </h2>
<h2>2. What’s the difference between controlled and uncontrolled
components? </h2>
<h2>3. What are the benefits of using controlled components in forms?</h2>
</>
REACT
);
}
Code QUIZ QUESTIONS

export default Questions;

1. Build a form with controlled text input for
comments.
2. What’s the difference between controlled
and uncontrolled components?
3. What are the benefits of using controlled
components in forms?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 9 18/42

Component Composition
and Children

Goals
Learn to compose components effectively.
Understand how to utilize `props.children`.

Topics
Patterns for component composition.
Using props.children` for flexible component APIs.

Resources
[Composition vs Inheritance - React Documentation]
[Guide to Component Composition in React]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 19/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Create a Layout component with children and consistent style. </h2>
<h2>2. How can composition be used to build a modal component? </h2>
<h2>3. Why is composition preferred over inheritance in React? </h2>
</>
);
REACT
}

export default Questions; Code QUIZ QUESTIONS

1. Create a Layout component with children

and consistent style.
2. How can composition be used to build a
modal component?
3. Why is composition preferred over
inheritance in React?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 10 20/42

Lifting State Up and

State Sharing

Goals
Understand when and how to lift state up among components.
Learn techniques for sharing state across the component tree
without props drilling.

Topics
Lifting state up.
Techniques to avoid "prop drilling".

Resources
[Lifting State Up - React Documentation]
[React Context for Beginners - The Practical Guide]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 21/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. When is lifting state up useful? </h2>
<h2>2. What is "prop drilling" and how can you avoid it in React? </h2>
</>
);
REACT
}

export default Questions; Code QUIZ QUESTIONS

1. When is lifting state up useful?

2. What is "prop drilling" and how can you

avoid it in React?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 11 22/42

Advanced Hooks -
‘useReducer’

Goals
Understand the ‘use Reducer’ hook for managing more
complex state logic.
Learn how to use ‘use Reducer’ in combination with
context.

Topics
Basics of ‘use Reducer’.
Practical examples of ‘use Reducer’ for state management.

Resources
[Hooks API Reference - ‘useReducer’]
[Using ‘useReducer’ in React Applications]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 23/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Refactor state management from useState to useReducer. </h2>
<h2>2. When would you choose useReducer over useState? </h2>
</>
);
REACT
}

export default Questions; Code QUIZ QUESTIONS

1. Refactor state management from

useState to useReducer.

2. When would you choose useReducer

over useState?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 12 24/42

Advanced Hooks -
‘useCallback’ and ‘useMemo’

Goals
Master performance optimizations in React components.
Understand the usage of `useCallback` and `use Memo`.

Topics
When to use `useCallback` and `use Memo`.
Performance considerations in React.

Resources
[React Hooks API Reference - `useCallback' and `useMemo`]
[Using ‘useReducer’ in React Applications]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 25/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Give an example of useCallback to avoid unnecessary re-renders./h2>
<h2>2. How does useMemo improve performance? </h2>
</>
);
REACT
}

export default Questions; Code QUIZ QUESTIONS

1. Give an example of useCallback to avoid

unnecessary re-renders.

2. How does useMemo improve performance?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 13 26/42

Context API and State

Management

Goals
Learn how to use the Context API for global state management.
Understand patterns and practices for effective state
management with context.

Topics
Setting up Context API.
Use cases for context in large applications.

Resources
[Context React Documentation]
[A Deep Dive into the React Context API]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 27/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Create a theme context to toggle dark and light mode. /h2>
<h2>2. What are the pros and cons of using Context API over Redux? </h2>
</>
);
REACT
}

export default Questions; Code QUIZ QUESTIONS

1. Create a theme context to toggle dark

and light mode.

2. What are the pros and cons of using Context

API over Redux?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 14 28/42

React Router and

SPA Routing

Goals
Understand the fundamentals of routing in single-page
applications.
Learn to set up and use React Router.

Topics
Basics of React Router.
Dynamic routing and route parameters.

Resources
[React Router Documentation]
[A Practical Guide to React Router]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 29/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Set up routes for a multi-step form app. /h2>
<h2>2. What are the pros and cons of using Context API over Redux? </h2>
</>
);
REACT
}

export default Questions; Code QUIZ QUESTIONS

1. Set up routes for a multi-step form app.

2. How do route parameters function in

React Router?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 15 30/42

Advanced React Router

Techniques

Goals
Master advanced features of React Router.
Learn about nested routes and programmatically navigating.

Topics
Nested routing.
Programmatic navigation.

Resources
[Advanced Routing Techniques in React Router]
[Programmatic Navigation in React Router]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 31/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Set up nested routes for a product catalog with categories. /h2>
<h2>2. Use useHistory to navigate on an event trigger. </h2>
</>
);
REACT
}

export default Questions; Code QUIZ QUESTIONS

1. Set up nested routes for a product

catalog with categories.

2. Use useHistory to navigate on an event

trigger.

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 16 32/42

Fetching Data in React

Goals
Learn how to fetch data from APIs in React applications.
Understand best practices for data fetching and handling
asynchronous operations.

Topics
Using fetch and Axios to make HTTP requests.
Handling loading states and errors.

Resources
[Using the Effect Hook - Data Fetching]
[Axios in React - The Modern Guide]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 33/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Retrieve and display user data from a public API. /h2>
<h2>2. What are strategies for handling API errors in React? </h2>
</>
);
REACT
}

export default Questions; Code QUIZ QUESTIONS

1. Retrieve and display user data from a

public API.

2. What are strategies for handling API

errors in React?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 17 34/42

State Management with

Redux

Goals
Get introduced to Redux as a state management tool.
Understand how Redux works with React.

Topics
Basics of Redux and the Redux data flow.
Connecting Redux with React using react-redux.

Resources
[Redux Essentials, Part 1: Redux Overview and Concepts]
[React Redux Tutorial for Beginners]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 35/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. What are the three core principles of Redux? /h2>
<h2>2. Set up a Redux store to manage user session state. </h2>
</>
);
REACT
}

export default Questions; Code QUIZ QUESTIONS

1. What are the three core principles of Redux?

2. Set up a Redux store to manage user session state.

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 18 36/42

Advanced Redux:
Middleware and Async Actions

Goals
Understand how to handle asynchronous actions in Redux.
Learn about middleware in Redux, focusing on Redux Thunk.

Topics
Using Redux Thunk for asynchronous workflows.
Setting up middleware in a Redux store.

Resources
[Redux Async Logic and Data Fetching]
[Redux Middleware: Behind the Scenes]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 37/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Create an async action creator to fetch posts from an API. /h2>
<h2>2. What is the role of middleware in Redux? </h2>
</>
);
REACT
}

export default Questions; Code QUIZ QUESTIONS

1. Create an async action creator to fetch posts from an API.

2. What is the role of middleware in Redux?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 19 38/42

Deploying
React Applications

Goals
Learn the steps to build and deploy a React application.
Understand deployment options and considerations.

Topics
Building for production.
Deployment options (Vercel, Netlify, GitHub Pages).

Resources
[Create React App - Deployment]
[Deploying a React App to Vercel]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 39/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. How do you deploy a React app created with Create React App? /h2>
<h2>2. What are common issues when deploying a React app? </h2>
</>
);
REACT
}

export default Questions; Code QUIZ QUESTIONS

1. How do you deploy a React app created with

Create React App?

2. What are common issues when deploying a

React app?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
Day 20 40/42

Final
Project and Review
Goals
Consolidate the knowledge acquired over the past 19 days by
building a comprehensive project.
Review key concepts and prepare for technical interviews.

Topics
Selecting a project idea that encompasses major
React concepts.
Reviewing and documenting the project for potential
interview discussions.

Resources
[React Project Ideas for Portfolio]
[React Interview Questions]

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
 Practice Questions 41/42

Code Quiz Questions

import React from 'react';

function Questions() {
return (
<>
<h1>Code Quiz Questions</h1>
<h2>1. Describe the design and key features of your final project. /h2>
<h2>2. How can you optimize performance in a React app? </h2>
</>
);
REACT
}

export default Questions; Code QUIZ QUESTIONS

1. Describe the design and key features of your

final project.

2. How can you optimize performance in a

React app?

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla
CONCLUSION 42/42

Conclusion

This 20 day guide is designed to take

you from beginner to advanced React
developer, preparing you for front-end
challenges at top tech companies.
Each day builds on the last, providing
a thorough and hands-on
understanding of
React and its ecosystem.

Felipe Tarla
@felipetarla | www.linkedin.com/in/felipe-tarla