Build Dynamic Web Apps with React & Firebase
Learn React from the ground up to make dynamic websites (includes Context, Hooks, Reducers, Routing, Auth, Databases)
Lo que serás capaz de hacer
React is a hugely popular front-end library and React developers are always in high demand in the web dev job market. In this course you'll learn how to use React from the ground-up to create dynamic & interactive websites, and by the time you finish you'll be in a great position to succeed in a job as a React developer. You'll also have 4 full React projects under your belt too, which you can customize and use in your portfolio! Throughout the course you'll learn exactly what React is and why it's such a popular choice to make interactive & dynamic websites. You'll learn how to set up a React website from scratch, how to create React components , how to use state to manage component data & how to work with interactive events such as click events & form submissions . You'll also get hands-on practise with the React Router (which is used in React to create website with "multiple pages") and you'll see how these are actually known as Single Page Applications (or SPA's for short). We'll dive into React Hooks such as useState, useEffect, useParams & useHistory and use them to help us create 4 full React projects from scratch - a memory game, a recipe website, a finance tracker & a project management application. You'll also learn some more avanced topics such as the React Context API to handle global state & reducers (including the useReducer hook) to help manage more complex state. Once you've mastered React, we'll take our websites to the next level by integrating them with Firebase - a backend as a service. You'll learn how to add services such as a real-time database & authentication into your React sites as well as how to allow end-users to upload files from their computers with the help of Firebase Storage . Finally, I'll teach you how to build & deploy your React sites to the web using Firebase Hosting. By the end of the course you'll have a solid understanding of React & be able to make your own production-ready websites!
- Learn how to create modern & dynamic React websites from the ground up
- Learn about Components, Props, Hooks, Context, State, Reducers & the React Router
- Learn how to implement a database, authentication & file uploads with React & Firebase
- Create & deploy fully fledged user-based React websites
Temario
UNIDAD 1 - Introduction & Setup · 6 leccionesUNIDAD 1 - Introduction & Setup
UNIDAD 1 - Introduction & Setup
- Welcome to the Course
- React at a Glance
- What You Should Already Know
- Environment Setup
- Using the Course Files
- Extra Resources & Tutorials
UNIDAD 2 - React Basics · 5 leccionesUNIDAD 2 - React Basics
UNIDAD 2 - React Basics
- Using React with a CDN
- Making a React Component
- JSX & Templates
- Template Expressions & Variables
- Click Events & Event Handlers
UNIDAD 3 - Using Create-React-App · 5 leccionesUNIDAD 3 - Using Create-React-App
UNIDAD 3 - Using Create-React-App
- Making a React Site (create-react-app)
- Project Structure Walkthrough
- Running the Application
- Using Images
- Using Stylesheets
UNIDAD 4 - Intro to State & useState · 7 leccionesUNIDAD 4 - Intro to State & useState
UNIDAD 4 - Intro to State & useState
- Why We Need State
- Using the useState Hook
- How State & Rendering Works
- Outputting Lists
- Using the Previous State
- Conditional Templates
- useState Limitations
UNIDAD 5 - Components & Props · 10 leccionesUNIDAD 5 - Components & Props
UNIDAD 5 - Components & Props
- Using Mutliple Components
- Creating a Title Component
- Intro to Props
- React Fragments
- Children Prop (Making a Modal Component)
- Functions as Props
- CHALLENGE - Showing the Modal
- Portals
- CHALLENGE - Reusable Event List Component
- Class Components Overview
UNIDAD 6 - Styling React Applications · 6 leccionesUNIDAD 6 - Styling React Applications
UNIDAD 6 - Styling React Applications
- Using Global Stylesheets
- Component Stylesheets
- Using Inline Styles
- Dynamic Inline Styles
- Conditional CSS Classes
- CSS Modules
UNIDAD 7 - User Input & Events · 7 leccionesUNIDAD 7 - User Input & Events
UNIDAD 7 - User Input & Events
- Forms & Labels in React
- The onChange Event
- Controlled Inputs
- Submitting Forms (onSubmit)
- Adding Events to the Event List
- Using the useRef Hook
- Select Boxes
UNIDAD 8 - Fetching Data & useEffect · 11 leccionesUNIDAD 8 - Fetching Data & useEffect
UNIDAD 8 - Fetching Data & useEffect
- New Project & JSON Server
- Why We Need useEffect
- Fetching Data with useEffect
- The useEffect Dependency Array
- useCallback for Function Dependencies
- Creating a Custom Fetch Hook
- Adding a Loading/Pending State
- Handling Errors
- Why We Need a Cleanup Function
- Aborting Fetch Requests
- useEffect Gotcha - Infinite Loops
UNIDAD 9 - PROJECT BUILD - Memory Game · 11 leccionesUNIDAD 9 - PROJECT BUILD - Memory Game
UNIDAD 9 - PROJECT BUILD - Memory Game
- Project Preview & Setup
- Setting up & Shuffling Cards
- Creating a Card Grid
- CHALLENGE - Creating a Card Component
- Making Card Choices
- CHALLENGE - Comparing Choices
- Adding a 'matched' Property to Cards
- Flipping Cards
- Flipping Animation (CSS)
- Making Cards "disabled"
- Finishing Touches
UNIDAD 10 - The React Router · 10 leccionesUNIDAD 10 - The React Router
UNIDAD 10 - The React Router
- Multi-Page React Sites
- React Router Setup
- Switch & Exact Match
- Links & Nav Links
- Fetching Data
- Route Parameters
- The useParams Hook
- Programmatic Redirects
- Redirect Component
- Query Parameters
UNIDAD 11 - PROJECT BUILD - Recipe Directory · 14 leccionesUNIDAD 11 - PROJECT BUILD - Recipe Directory
UNIDAD 11 - PROJECT BUILD - Recipe Directory
- Project Preview & Setup
- Router & Pages Setup
- Making a Navbar Component
- Fetching Data
- Recipe List Component
- CHALLENGE - Fetching a Single Recipe
- Recipe Details Template
- Making a "Create Recipe" Form
- Adding Multiple Ingredients
- Making a POST Request
- CHALLENGE - Redirecting the User
- Making a Search Bar Component
- Search Results Page
- Finishing Touches
UNIDAD 12 - React Context & Reducers · 9 leccionesUNIDAD 12 - React Context & Reducers
UNIDAD 12 - React Context & Reducers
- Prop Drilling
- What is the Context API?
- Creating a Context & Provider
- Accessing Context Values
- Creating a Custom Context Hook
- Reducers & useReducer
- Making a Color Theme Selector
- Light & Dark Mode Selector
- Styling Light & Dark Modes
UNIDAD 13 - Firebase Firestore · 10 leccionesUNIDAD 13 - Firebase Firestore
UNIDAD 13 - Firebase Firestore
- What is Firebase?
- Firestore Databases
- Connecting to Firebase
- Fetching a Firestore Collection
- Fetching a Firestore Document
- Adding Firestore Data
- Deleting Firestore Data
- Real-Time Collection Data
- Updating Documents
- Real-Time Document Data
UNIDAD 14 - PROJECT BUILD - Finance Tracker (with Firebase Authentication) · 30 leccionesUNIDAD 14 - PROJECT BUILD - Finance Tracker (with Firebase Authentication)
UNIDAD 14 - PROJECT BUILD - Finance Tracker (with Firebase Authentication)
- Project Preview & Setup
- CHALLENGE - Creating Pages & Routes
- Creating a Navbar
- Making the Login Form
- CHALLENGE - Making the Signup Form
- Firebase Setup
- Firebase Authentication Setup
- Creating a Signup Hook
- Using the Signup Hook
- Creating an Auth Context
- Dispatching a Login Action
- Creating a Logout Hook
- Using the Logout Hook
- Adding Cleanup Functions
- Creating a Login Hook
- Using the Login Hook
- Conditionall Showing User Content
- Firebase Auth State Changes
- Waiting Until Auth is Ready
- Route Guarding
- Making a Transaction Form
- Creating a useFirestore Hook
- Adding Firestore Documents
- Firestore Timestamps
- Using the useFirestore Hook
- Creating a useCollection Hook
- Listing Transactions
- Firestore Queries
- Ordering Firestore Queries
- Deleting Transactions
UNIDAD 15 - Firestore Rules · 4 leccionesUNIDAD 15 - Firestore Rules
UNIDAD 15 - Firestore Rules
- What Are Firestore Rules?
- The Firebase CLI
- Securing Collection Data
- Deploying Firestore Rules
UNIDAD 16 - Building & Deploying · 4 leccionesUNIDAD 16 - Building & Deploying
UNIDAD 16 - Building & Deploying
- Building a React App
- Deploying to Firebase
- Updating the Site & Re-Deploying
- Rolling Back Deployments
UNIDAD 17 - PROJECT BUILD - Project Management Site · 43 leccionesUNIDAD 17 - PROJECT BUILD - Project Management Site
UNIDAD 17 - PROJECT BUILD - Project Management Site
- Project Preview & Setup
- Firebase Setup
- Firebase Init (Rules, Hosting & Storage)
- Re-using Firebase Hooks & Auth Context
- Router & Pages Setup
- Navbar Component
- Sidebar Component
- Creating a Signup Page
- Handling File Inputs
- Firebase Storage Setup
- Uploading Profile Images
- Signing a User Up
- Creating User Documents
- Logging Users Out
- Making a Login Page
- CHALLENGE - Logging Users In
- Redirects & Route Guards
- CHALLENGE - Conditional Navbar Links
- User Avatar Component
- Fetching Users
- Showing Users Online
- Making the "Create Project" Form
- Using React-Select
- Assigning Users
- Setting Form Errors
- Creating a Project Object
- CHALLENGE - Saving New Projects
- Fetching Projects
- Making a Project List / Grid
- Making a useDocument Hook
- Project Details Page (fetching a project)
- Project Summary Component
- Making a Comments Form
- Updating Firestore Documents
- Adding Comments
- Listing Comments
- Completing / Deleting Projects
- Making a Filter (part 1)
- Making a Filter (part 2)
- Making a Filter (part 3)
- Adding Firestore Rules
- Final Touches
- Deploying the App
UNIDAD 18 - React with Firebase Version 9 · 16 leccionesUNIDAD 18 - React with Firebase Version 9
UNIDAD 18 - React with Firebase Version 9
- Intro & Starter Project
- Firebase Config File
- Getting Documents
- Real-Time Collection Data
- Adding Data
- Deleting Data
- Setting Up Firebase Auth
- Signing Users Up
- Logging Users Out
- Logging Users In
- Adding Auth Context
- Dispatching Actions
- Route Guards & Redirects
- Assigning Users to Books
- Firestore Queries
- Firebase Further Reading
UNIDAD 19 - React Router Version 6 · 6 leccionesUNIDAD 19 - React Router Version 6
UNIDAD 19 - React Router Version 6
- Introduction to React Router 6
- The Route Component
- Redirects & useNavigate
- Nested Routes
- Refactoring the Recipe Site
- Refactoring the Project Management Site
UNIDAD 20 - Extra Resources & JavaScript Helper Videos · 10 leccionesUNIDAD 20 - Extra Resources & JavaScript Helper Videos
UNIDAD 20 - Extra Resources & JavaScript Helper Videos
- Extra JavaScript Lessons
- Destructuring
- Import & Exports
- Filter & Map Methods
- Spread Syntax
- Template Strings
- Arrow Functions
- Fetch API and Promises
- Async & Await
- More Tutorials
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
20 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
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 The Net Ninja (Shaun Pelling).
- 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.
- 20 unidades · 224 lecciones · 60 h
- 12 meses de acceso
- 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 The Net Ninja (Shaun Pelling); 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.
