Learn React JS the fast way
Develop React JS web applications including components, state, effect, hooks, React router, reducer, context, etc.
Lo que serás capaz de hacer
Learn React with a course that respects your time! Summing up, this course allows you to learn React JS (v18 - 2024 and v19 - 2025) in depth , from scratch, and in only a few hours. It's the best React course choice for every busy developer or individual in general. Enroll in this course now and learn how to: Create comprehensive front-end applications using React Use React components, routing, and states to create maintainable applications Use the most important features of the React framework to build real-world applications Build clean and scalable React applications by using reducers Implement global state management using the Context API Deal with real-world data Consume a web API using axios from within your React applications Create unit tests using vitest Add user management and JWT authorization to react applications Store data in databases without building a backend What's inside this course: Setting up Development Environment for React projects Components React Hooks (e.g. useState, useEffect, useReducer) States Effects React Router including query parameters and private routes Reducers Context API and Providers (useContext and createContext) JSX Filtering Searching Dynamically assigning styling Reacting to HTML events Forms Validation Data Binding Adding Packages React Dev Tools The popular build-tool Vite Unit Testing Authorization and User Management using Clerk Database Integration using Supabase In addition, you will easily apply and understand more advanced concepts like: Error Handling Sending Data to child components Sending Data to parent components Creating controlled components Building scalable react applications by improving state handling (reducers and context) 30 Day Full Money Back Guarantee This course comes with a 30-day full money-back guarantee. Take the course, watch every lecture, and do the exercises, and if you feel like this course is not for you, ask for a full refund within 30 days. All your money back, no questions asked. Enroll now, take the fast lane, and master React JS in only a few hours.
- Learn React in-depth in a short amount of time
- Build comprehensive web apps like a modern video platform
- Learn how to deal with data within your React applications
- Use React components, React router, and state to create a maintainable code base
- Learn how to use reducers for building scalable applications
- Learn how to consume a RESTful Web API from your React Application using axios
Temario
UNIDAD 1 - React Fundamentals · 20 leccionesUNIDAD 1 - React Fundamentals
UNIDAD 1 - React Fundamentals
- Project "Moviedux" Introduction
- Sourcecode: Moviedux
- React 101: React itself
- Installing Visual Studio Code
- Installing NodeJS
- React extensions that make our life easier
- React 18 and React 19
- Creating a React project and handling package versions
- Cheat Sheet: React Introduction
- Exploring our ReactJS project
- Download: Moviedux Project Resources (Images, Logos, Css, etc.)
- Importing the Moviedux project resources
- Modifying the app component
- Heads up
- React 101 - Components
- Creating the Header component
- Footer component with dynamic date and JSX
- Assignment - React Components
- Quiz Components
- Cheat Sheet: React Components
UNIDAD 2 - JavaScript for React Part 1: Scope, Arrow Functions and more · 7 leccionesUNIDAD 2 - JavaScript for React Part 1: Scope, Arrow Functions and more
UNIDAD 2 - JavaScript for React Part 1: Scope, Arrow Functions and more
- JavaScript for React Intro
- Scope of var, let and const
- Arrow functions
- Functions as declarations or expressions
- Rest Operator
- Spread Operator
- Quiz: JS for React
UNIDAD 3 - Handling state with React · 11 leccionesUNIDAD 3 - Handling state with React
UNIDAD 3 - Handling state with React
- Creating the MoviesGrid component
- React 101 - State
- Creating the movies state with UseState
- Setting the movies state with UseEffect
- Using the react developer tools
- Loading movies from JSON
- Rendering the movies in cards
- A small request
- Quiz State
- Assignment - React State
- Cheat Sheet: React State and Effect
UNIDAD 4 - Events, Searching, Refactoring and Domain Logic · 7 leccionesUNIDAD 4 - Events, Searching, Refactoring and Domain Logic
UNIDAD 4 - Events, Searching, Refactoring and Domain Logic
- React 101 - Props
- Refactoring to a MovieCard and component properties
- Error handler for image loading
- Dynamic rating color
- Search state and search bar
- Search bar logic
- Quiz Props
UNIDAD 5 - Filtering with advanced UI and events · 3 leccionesUNIDAD 5 - Filtering with advanced UI and events
UNIDAD 5 - Filtering with advanced UI and events
- Filter bar
- Filter event handling
- Filter logic
UNIDAD 6 - React Router, Watchlisting, Lifting State and Props · 9 leccionesUNIDAD 6 - React Router, Watchlisting, Lifting State and Props
UNIDAD 6 - React Router, Watchlisting, Lifting State and Props
- React 101: Router
- Installing React Router
- Configuring the router
- Lifting the movie state
- Watchlist state
- Watchlist component props
- Watchlist UI toggle
- Quiz Router
- Cheat Sheet: React Router
UNIDAD 7 - JavaScript for React Part 2: Modules, Interpolations and Array Methods · 8 leccionesUNIDAD 7 - JavaScript for React Part 2: Modules, Interpolations and Array Methods
UNIDAD 7 - JavaScript for React Part 2: Modules, Interpolations and Array Methods
- Default export of modules
- Named export of modules
- Template literals, string interpolations and multi-line strings
- Array find()
- Array filter()
- Array forEach()
- Array map()
- Quiz JS for React
UNIDAD 8 - Building a web application with React Reducers · 21 leccionesUNIDAD 8 - Building a web application with React Reducers
UNIDAD 8 - Building a web application with React Reducers
- Project "Bug Blaster" Introduction
- Source Code: Bug Blaster
- Resources for "Bug Blaster" Project
- Setting up the bug blaster project
- Creating the ticket form logic
- Building the ticket form
- Building the priority selection
- Building a ticket from the form
- React 101 - Reducer
- Creating the ticket reducer
- Quiz: Reducer
- Implementing the ticket reducer actions
- Dispatching the ADD_TICKET action using the useReducer hook
- Creating the TicketItem component
- Creating the TicketList component and conditional rendering
- Deleting tickets
- Editing Tickets
- Deleting an "under-edit" ticket
- Canceling an edit procedure
- Sorting tickets by priority
- Cheat Sheet: React Reducer
UNIDAD 9 - Using the context API for global state · 10 leccionesUNIDAD 9 - Using the context API for global state
UNIDAD 9 - Using the context API for global state
- React 101 - Context
- Example of prop drilling for context
- Creating your first context
- Blog application with Context API
- Combining context and prop drilling
- Combining state and context part 1
- Combining state and context part 2
- Congratulations! You have finished the section
- Cheat Sheet: React Context
- Quiz: context API
UNIDAD 10 - JavaScript for React Part 3: Promises, Async and Await · 3 leccionesUNIDAD 10 - JavaScript for React Part 3: Promises, Async and Await
UNIDAD 10 - JavaScript for React Part 3: Promises, Async and Await
- Promises
- Promises fetch example
- Async and await
UNIDAD 11 - Consuming a web API using axios in React · 15 leccionesUNIDAD 11 - Consuming a web API using axios in React
UNIDAD 11 - Consuming a web API using axios in React
- Intro consuming an API
- Mock API
- React 101: HTTP requests and responses
- Project creation
- Creating a service layer with axios
- Creating the post component
- Getting posts and promises
- Displaying posts
- Deleting posts
- Creating a new post
- Post form
- Post state after creating a new one
- Updating an existing post
- Update post logic part 1
- Update post logic part 2
UNIDAD 12 - React Router In-Depth · 11 leccionesUNIDAD 12 - React Router In-Depth
UNIDAD 12 - React Router In-Depth
- Setting up the project
- Book context
- Component to show all books
- Default router setup
- Router redirection
- Dynamic route parameter part 1
- Dynamic route parameter part 2
- Not found route (404)
- Reading query parameters part 1
- Reading query parameters part 2
- Private routes
UNIDAD 13 - Creating new React 19 projects using Vite in 2025/2026 · 7 leccionesUNIDAD 13 - Creating new React 19 projects using Vite in 2025/2026
UNIDAD 13 - Creating new React 19 projects using Vite in 2025/2026
- What is Vite?
- Installing the node packages for Vite
- Creating a project using Vite
- Manually starting React projects using Vite
- Buillding a Vite React application
- Adding configurations to Vite
- Extra: Setting up and reading environment variables using Vite
UNIDAD 14 - Building a stock app including authentication, databases and API calls · 24 leccionesUNIDAD 14 - Building a stock app including authentication, databases and API calls
UNIDAD 14 - Building a stock app including authentication, databases and API calls
- Chapter Project Introduction
- Source Code: GitHub Repository
- The authentication provider Clerk
- Setting up the Finora React project and adding clerk
- Adding the clerk provider in react
- Adding Signup, Login and Logout using Clerks React Components
- Grabbing an API Key for the Stock-Data-API Alphavantage
- Quick Note: 25 Request per day
- Developing the Alphavantage service
- Loading the performance of a single stock
- Finishing the alphavantage service
- Building the stock list react component
- Building a form to load stock data
- CSS code HERE (Copy it)
- Styling the app
- Creating a database at Supabase
- Creating a supabase table and pasting the api keys
- Submitting the first test data to store in the db
- Building the complete supabase watchlist service
- Implementing the supabase service into the react component
- Setting up effects to handle stock data updates
- Finishing the stock watchlist html and styling
- Enabling RLS and JWT in Supabase to improve Database security
- Adding supabase authentication using clerk in the react project
UNIDAD 15 - Unit Testing React Applications using Vitest · 15 leccionesUNIDAD 15 - Unit Testing React Applications using Vitest
UNIDAD 15 - Unit Testing React Applications using Vitest
- Unit Testing Introduction
- Setting up a project and Vitest
- Test Packages Explaination
- Configuring Vitest
- Writing and running your first react unit testing
- Keeping the imports short (vite globals)
- Creating a shared test-setup file
- Source Code for the next lesson
- Creating a test-worthy react component
- Creating a unit test group for the invoice component
- Testing if the invoice component render correctly
- Testing if a specific element/class is assigned (paid/overdue)
- Modifying test-mock-data for specific test scenarios
- The definition of a unit test
- Creating a unit test group for logic (not rendering)
UNIDAD 16 - Completing the course · 1 leccionesUNIDAD 16 - Completing the course
UNIDAD 16 - Completing the course
- Finishing the course
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
16 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
8 cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Jannick Leismann.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 16 unidades · 172 lecciones · 60 h
- 12 meses de acceso
- 8 cuestionarios de evaluación
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Jannick Leismann; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
