ReactJS.AE1
ReactJS Foundations Course for Beginners
Master the React fundamentals and build intuitive user interfaces from scratch with this hands-on, no-fluff, beginner-friendly course.
- 21 Lecciones interactivas y 124 topics mapped to the official exam objectives
Beginner A tu propio ritmo · 1 año de acceso
01 / Habilidades que obtendrás
What you will be able to do
Tired of applying for React jobs and getting ghosted because you lack the experience? Enroll in our Beginning ReactJS Foundations online course to learn the ReactJS development best practices, develop polished skills, and land a high-paying job.
By the end of this course, you’ll understand React fundamentals (JSX, components, props, hooks routing) , write cleaner code, and gain real-world skills.
No prior experience required to take this training.
- Build functional components using JSX and Props: Understand how to structure UIs using components and manage data with props, core concepts behind every React application.
- Manage applications state with hooks: Learn how to control app behavior using useState, useEffect, and other essential React hooks.
- Work with dynamic data and conditional rendering: Display, update, and render content dynamically based on user interaction and real-time data.
- Implement navigation with React router: Build multi-page and single-page applications using routing techniques that simulate seamless transitions between views.
- Handle events and user input: Capture, validate, and manage user input through controlled components and event handling best practices.
- Style your applications: Apply styles to your components using modern techniques like CSS modules and inline styling.
- Deploy React applications to production: Push your finished projects live using tools like GitHub Pages or Netlify, with best deployment practices.
Course Highlights
-
21 Lecciones estructuradas Cobertura completa de los objetivos principales del curso
-
1 año de acceso completo Aprendizaje a tu propio ritmo, accesible en cualquier momento y en todos los dispositivos
02 / Lecciones y laboratorios
See exactly what you will learn and practice
Plan de estudios
21 Lecciones interactivas · 124 topics01 Introduction 5 topics +
- WHY THIS COURSE?
- WHAT'S COVERED IN THIS COURSE?
- WHAT'S NOT COVERED?
- PREREQUISITES
- INSTALLING REQUIRED DEPENDENCIES
02 Hello, World! 3 topics · 2 Laboratorio en vivo +
- REACT WITHOUT A BUILD TOOLCHAIN
- INTERACTIVE “HELLO, WORLD” WITH CREATE REACT APP AND JSX
- SUMMARY
2 Laboratorio en vivo in this lesson — see the labs panel →
03 The Foundation of React 5 topics +
- WHAT'S IN A NAME?
- UI LAYER
- VIRTUAL DOM
- THE PHILOSOPHY OF REACT
- SUMMARY
04 JSX 4 topics · 4 Laboratorio en vivo +
- JSX IS NOT HTML
- WHAT IS JSX?
- SYNTAX BASICS OF JSX
- SUMMARY
4 Laboratorio en vivo in this lesson — see the labs panel →
05 All About Components 10 topics · 8 Laboratorio en vivo +
- WHAT IS A COMPONENT?
- COMPONENTS VS. ELEMENTS
- BUILT-IN COMPONENTS
- USER-DEFINED COMPONENTS
- TYPES OF COMPONENTS
- REACT COMPONENT CHILDREN
- THE COMPONENT LIFECYCLE
- RENDERING COMPONENTS
- COMPONENT TERMINOLOGY
- SUMMARY
8 Laboratorio en vivo in this lesson — see the labs panel →
06 React DevTools 6 topics · 2 Laboratorio en vivo +
- INSTALLATION AND GETTING STARTED
- INSPECTING COMPONENTS
- EDITING COMPONENT DATA IN DEVTOOLS
- WORKING WITH ADDITIONAL DEVTOOLS FUNCTIONALITY
- PROFILING
- SUMMARY
2 Laboratorio en vivo in this lesson — see the labs panel →
07 React Data Flow 5 topics · 3 Laboratorio en vivo +
- ONE-WAY DATA FLOW
- PROPS
- REACT STATE
- CONVERTING TO CLASS COMPONENTS
- SUMMARY
3 Laboratorio en vivo in this lesson — see the labs panel →
08 Events 7 topics · 3 Laboratorio en vivo +
- HOW EVENTS WORK IN REACT
- WHAT IS SYNTHETICEVENT?
- USING EVENT LISTENER ATTRIBUTES
- THE EVENT OBJECT
- SUPPORTED EVENTS
- EVENT HANDLER FUNCTIONS
- SUMMARY
3 Laboratorio en vivo in this lesson — see the labs panel →
09 Forms 7 topics · 3 Laboratorio en vivo +
- FORMS HAVE STATE
- CONTROLLED INPUTS VS. UNCONTROLLED INPUTS
- LIFTING UP INPUT STATE
- USING UNCONTROLLED INPUTS
- USING DIFFERENT FORM ELEMENTS
- PREVENTING DEFAULT ACTIONS
- SUMMARY
3 Laboratorio en vivo in this lesson — see the labs panel →
10 Refs 9 topics · 2 Laboratorio en vivo +
- WHAT REFS ARE
- HOW TO CREATE A REF IN A CLASS COMPONENT
- HOW TO CREATE A REF IN A FUNCTION COMPONENT
- USING REFS
- CREATING A CALLBACK REF
- WHEN TO USE REFS
- WHEN NOT TO USE REFS
- EXAMPLES
- SUMMARY
2 Laboratorio en vivo in this lesson — see the labs panel →
11 Styling React 7 topics · 4 Laboratorio en vivo +
- THE IMPORTANCE OF STYLES
- IMPORTING CSS INTO THE HTML FILE
- USING PLAIN OLD CSS IN COMPONENTS
- WRITING INLINE STYLES
- CSS MODULES
- CSS-IN-JS AND STYLED COMPONENTS
- SUMMARY
4 Laboratorio en vivo in this lesson — see the labs panel →
12 Introducing Hooks 8 topics · 2 Laboratorio en vivo +
- WHAT ARE HOOKS?
- WHY WERE HOOKS INTRODUCED?
- RULES OF HOOKS
- THE BUILT-IN HOOKS
- WRITING CUSTOM HOOKS
- LABELING CUSTOM HOOKS WITH USEDEBUGVALUE
- FINDING AND USING CUSTOM HOOKS
- SUMMARY
2 Laboratorio en vivo in this lesson — see the labs panel →
13 Routing 5 topics · 1 Laboratorio en vivo +
- WHAT IS ROUTING?
- HOW ROUTING WORKS IN REACT
- USING REACT ROUTER
- REACT ROUTER HOOKS
- SUMMARY
1 Laboratorio en vivo in this lesson — see the labs panel →
14 Error Boundaries 5 topics · 1 Laboratorio en vivo +
- THE BEST LAID PLANS
- WHAT IS AN ERROR BOUNDARY?
- IMPLEMENTING AN ERROR BOUNDARY
- WHAT CAN'T AN ERROR BOUNDARY CATCH?
- SUMMARY
1 Laboratorio en vivo in this lesson — see the labs panel →
15 Deploying React 6 topics +
- WHAT IS DEPLOYMENT?
- BUILDING AN APP
- HOW IS A DEPLOYED APP DIFFERENT?
- DEVELOPMENT MODE VS. PRODUCTION
- PUTTING IT ON THE WEB
- SUMMARY
16 Initialize a React Project from Scratch 5 topics · 1 Laboratorio en vivo +
- BUILDING YOUR OWN TOOLCHAIN
- HOW WEBPACK WORKS
- AUTOMATING YOUR BUILD PROCESS
- STRUCTURING YOUR SOURCE DIRECTORY
- SUMMARY
1 Laboratorio en vivo in this lesson — see the labs panel →
17 Fetching and Caching Data 8 topics · 1 Laboratorio en vivo +
- ASYNCHRONOUS CODE: IT'S ALL ABOUT TIMING
- JAVASCRIPT NEVER SLEEPS
- WHERE TO RUN ASYNC CODE IN REACT
- WAYS TO FETCH
- GETTING DATA WITH FETCH
- GETTING DATA WITH AXIOS
- USING WEB STORAGE
- SUMMARY
1 Laboratorio en vivo in this lesson — see the labs panel →
18 Context API 7 topics · 1 Laboratorio en vivo +
- WHAT IS PROP DRILLING?
- HOW CONTEXT API SOLVES THE PROBLEM
- COMMON USE CASES FOR CONTEXT
- WHEN NOT TO USE CONTEXT
- COMPOSITION AS AN ALTERNATIVE TO CONTEXT
- EXAMPLE APP: USER PREFERENCES
- SUMMARY
1 Laboratorio en vivo in this lesson — see the labs panel →
19 React Portals 3 topics · 2 Laboratorio en vivo +
- WHAT IS A PORTAL?
- COMMON USE CASES
- SUMMARY
2 Laboratorio en vivo in this lesson — see the labs panel →
20 Accessibility in React 4 topics · 1 Laboratorio en vivo +
- WHY IS ACCESSIBILITY IMPORTANT?
- ACCESSIBILITY BASICS
- IMPLEMENTING ACCESSIBILITY IN REACT COMPONENTS
- SUMMARY
1 Laboratorio en vivo in this lesson — see the labs panel →
21 Going Further 5 topics · 1 Laboratorio en vivo +
- TESTING
- SERVER-SIDE RENDERING
- PEOPLE TO FOLLOW
- USEFUL LINKS AND RESOURCES
- SUMMARY
1 Laboratorio en vivo in this lesson — see the labs panel →
03 / Preguntas frecuentes
Preguntas antes de empezar
Can I learn ReactJS as a complete beginner?+
Is React harder to learn than JavaScript?+
What’s the fastest way to learn ReactJS?+
How long does it take to learn ReactJS from scratch?+
Learn React. Build Projects. Get Hired
Gain job-ready skills with our ReactJS course and start building real-world apps with confidence.
- 1 año de acceso completo
- Certificado de finalización
No se requiere tarjeta de crédito