React: De cero a experto ( Hooks y MERN ) from Udemy

¿Quieres aprender React Actual o migrarte a trabajar con Hooks?

Este curso tiene por objetivo llevarte de cero conocimiento de React hasta un nivel competitivo en el ambiente laboral de hoy en día. Este curso está construido 100% en Hooks y functional components.

También cuenta con secciones sobre pruebas unitarias y de integración en cada aplicación que hacemos en el curso, esto incluye pruebas en componentes, hooks, customHooks, context, Redux, Fetch, mocks, spies, snapshots y mucho más relacionado al unit test.

Sin olvidar que todos empezamos de cero en un momento, el curso cuenta con una introducción a los conceptos que necesitaremos para entrar en React de la forma más cómoda posible.

Este curso cuenta con mas de 400 lecciones y más de 40 horas de video haciendo aplicaciones y pruebas distintas que nos ayudará a alcanzar el objetivo de dominar React y otras tecnologías que lo rodean, hay muchas tareas y ejercicios que te ayudarán a asimilar los conocimientos necesarios para ser un FullStack Developer utilizando React y Node en el Backend junto con Mongo y Firestore como bases de datos.

Este es un listado de varios de los temas que tocamos en el curso:

React a profundidad
Hooks y Hooks personalizados
Functional Components
HOC - higher-order components
Context API
Redux
MERN - Mongo + Express + React + Node
Router
Diseños diferentes en diferentes rutas
Bootstrap
Mongoose
JWT y su re-validación
Encriptación de contraseñas
Google Sign-in
Autenticación personalizada
Unit Test
Pruebas especializadas en cada aplicación terminada
Despliegues a producción
Enzyme
Jest
React Testing Library
Mocks
Animaciones en componentes
History
QueryStrings
Heroku y Heroku Logs
Git y Github
Redux DevTools
React DevTools

Y mucho más.

Este curso es para todas las personas que quieran aprender React, quieran pasar de Class Base Componentes a Functional Components, quieran especializarse en pruebas, entrar en Redux, Firebase, Context o simplemente aprender algo nuevo de manera completa y funciona.

What's inside

Learning objectives

Aprender react a profundidad
Realizar pruebas unitarias y de integración en todo tu código
Mern - mongo express react node
Autenticación con google y jwts (jsonwebtokens)

Hooks a profundidad
Crear aplicaciones reales
Redux, context y otros manejadores de estado

Aprender react a profundidad
Realizar pruebas unitarias y de integración en todo tu código
Mern - mongo express react node
Autenticación con google y jwts (jsonwebtokens)
Hooks a profundidad
Crear aplicaciones reales
Redux, context y otros manejadores de estado

Syllabus

Introducción

Introducción al curso

¿Cómo funcionará el curso?

¿Cómo hacer preguntas?

Instalaciones necesarias y recomendadas

¡Únete a Nuestra Comunidad de DevTalles en Discord!

Introducción a React y conceptos generales

Introducción a la sección

Temas puntuales de la sección

¿Qué es React?

Primeros pasos en React

Introducción a Babel

Introducción a JavaScript moderno

Inicio de proyecto - Bases de JavaScript

Variables y constantes

Template String

Objetos literales

Arreglos

Funciones

Desestructuración de Objetos

Desestructuración de Arreglos

Import, export y funciones comunes de arreglos

Múltiples exportaciones y exportaciones por defecto

Promesas

Fetch API

Async - Await

Operador condicional ternario

Nota sobre JavaScript

Código fuente de la sección

¿Qué son los componentes?

Primera aplicación de React

Estructura de directorios - CRA

Estructura de directorios - Vite

Hola Mundo en React

Nuestro primer Componente

Tarea - Crear un nuevo componente

Retornar elementos en el Componente - Fragment

Impresión de variables en el HTML

Colocar estilos de CSS

Comunicación entre componentes - Props

PropTypes

DefaultProps

Tarea - Componente CounterApp

Evento click (Eventos en general)

useState - Hook

handleSubtract y handleReset

Pruebas unitarias y de integración - Probando las secciones anteriores

Introducción a las pruebas unitarias y de integración

Inicio de la sección - Pruebas sobre lo aprendido anteriormente

Mi primera prueba y configuraciones iniciales

Jest - Expect - toBe

Nota de Actualización - Extensión de archivos

Pruebas en el archivo 02-template-string.js

toEqual

Pruebas en el archivo 07-deses-arr.js

Pruebas en 08-imp-exp.js - Arreglos

Pruebas con tareas asíncronas

Pruebas con async-await

Evaluar el Catch en el async-await

Pruebas sobre componentes de React

Pruebas en FirstApp - Componentes de React

Probar FirstApp

getByTestId y otras props

Screen - Testing Library

Pruebas básicas del CounterApp

Simular eventos - Click

GifExpertApp - Aplicación

Resultado al final de la sección

Inicio de proyecto - GifExpertApp

GifExpertApp - Component

Creando una lista de categorias

Agregar una nueva categoría

Componente AddCategory

Comunicación entre componentes

Emitir un evento al padre

Validar que sean únicos los nombres

GifGrid - Nuevo componente

Fetch API - Obtener las imágenes deseadas

useEffect

Demostración de producción rápido

Mostrar los títulos de las imágenes

className - Clases de css

Custom Hook - useFetchGifs

Mostrar mensaje de carga

Archivos de barril

Generando el build de producción y despliegues

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Se centra en React Actual, que es el estándar de la industria para la creación de aplicaciones web

Enseña Hooks, un concepto clave en React actual que simplifica la creación de componentes funcionales

Desarrolla conocimientos sobre pruebas unitarias y de integración, habilidades esenciales para el desarrollo de software robusto

Incluye secciones sobre pruebas en cada aplicación creada, lo que garantiza una comprensión práctica

Cubre una amplia gama de tecnologías relacionadas con React, como Redux, Context y MERN

Dirigido por Fernando Herrera, un instructor experimentado con un sólido conocimiento de React

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React: De cero a experto ( Hooks y MERN ) with these activities:

Revise JavaScript fundamentals

Show steps

Understanding JavaScript fundamentals is essential for succeeding in this course. This activity will help you refresh your knowledge and ensure you have a solid foundation.

Browse courses on JavaScript

Show steps

Review JavaScript variables, data types, and operators.
Practice writing simple JavaScript functions.
Create a small JavaScript project to apply your knowledge.

Complete React tutorials

Show steps

This course assumes some familiarity with React. Completing tutorials will help you build a stronger foundation and accelerate your progress.

Browse courses on React

Show steps

Follow a beginner-friendly React tutorial.
Complete a more advanced React tutorial covering Hooks and functional components.

Form a React study group

Show steps

Collaborating with peers can reinforce your understanding, provide different perspectives, and foster a sense of community.

Browse courses on React

Show steps

Find other students in your course or online who are interested in forming a study group.
Establish regular meeting times and set goals for each session.
Discuss course topics, work on projects together, and provide feedback to each other.

Three other activities

Expand to see all activities and additional details

Show all six activities

Practice writing React components

Show steps

Regular practice is crucial for developing proficiency in React. This activity will help you reinforce your understanding and improve your coding skills.

Browse courses on React

Show steps

Create a simple React component from scratch.
Build a React component that interacts with state.
Create a React component that uses props.

React Hooks Masterclass

Show steps

Explore an external resource that delves deeper into the functionalities and best practices of React Hooks.

Browse courses on Hooks

Show steps

Identify an authoritative source for React Hooks tutorials.
Review the tutorials and take notes on the key concepts and techniques.
Experiment with the Hooks covered in the tutorials in your own React projects.
Share your learnings with the community by writing a blog post or contributing to open-source projects.

Attend React workshops or meetups

Show steps

Attending workshops or meetups can provide valuable opportunities to connect with experienced React developers, learn from their insights, and stay up-to-date with industry best practices.

Browse courses on React

Show steps

Research and find React workshops or meetups in your area.
Attend the workshop or meetup and actively participate.
Connect with other React developers and share knowledge.

Career center

Learners who complete React: De cero a experto ( Hooks y MERN ) will develop knowledge and skills that may be useful to these careers:

Front-End Developer

Front-End Developers are responsible for the coding and programming behind the design of a website or webpage. They translate ideas into a user interface, and write the code that makes that interface interactive and user-friendly. This course would be extremely useful, as it would help you learn React, a popular and in-demand JavaScript library for building user interfaces. You would also learn about functional components, hooks, context, and other essential React concepts.

See salaries and explore the career path for Front-End Developer

Full-Stack Developer

Full-Stack Developers are responsible for both the front-end and back-end of a website or application. They work on the design, implementation, and maintenance of both the client-side and server-side of a web application. This course would be very helpful, as it would help you learn React, a popular JavaScript library for building user interfaces, as well as Node.js, a popular JavaScript runtime environment for building back-ends. You would also learn about MongoDB, a popular database for storing data.

See salaries and explore the career path for Full-Stack Developer

React Developer

React Developers are responsible for building and maintaining user interfaces using the React JavaScript library. They work on the front-end of web applications, and are responsible for the design, implementation, and maintenance of the user interface. This course would be extremely useful, as it would help you learn React, a popular and in-demand JavaScript library for building user interfaces. You would also learn about functional components, hooks, context, and other essential React concepts.

See salaries and explore the career path for React Developer

Web Developer

Web Developers are responsible for the coding and programming behind the design of a website or webpage. They translate ideas into a user interface, and write the code that makes that interface interactive and user-friendly. This course would be very helpful, as it would help you learn React, a popular and in-demand JavaScript library for building user interfaces. You would also learn about functional components, hooks, context, and other essential React concepts.

See salaries and explore the career path for Web Developer

Software Engineer

Software Engineers are responsible for the design, development, and maintenance of software systems. They work on a variety of projects, from small personal projects to large enterprise applications. This course would be helpful, as it would help you learn React, a popular JavaScript library for building user interfaces. You would also learn about functional components, hooks, context, and other essential React concepts.

See salaries and explore the career path for Software Engineer

JavaScript Developer

JavaScript Developers are responsible for developing and maintaining web applications using the JavaScript programming language. They work on a variety of projects, from small personal projects to large enterprise applications. This course would be helpful, as it would help you learn React, a popular JavaScript library for building user interfaces. You would also learn about functional components, hooks, context, and other essential React concepts.

See salaries and explore the career path for JavaScript Developer

Back-End Developer

Back-End Developers are responsible for the coding and programming behind the scenes of a website or application. They work on the server-side of a web application, and are responsible for the implementation and maintenance of the database, as well as the logic that powers the application. This course may be helpful, as it would help you learn Node.js, a popular JavaScript runtime environment for building back-ends. You would also learn about MongoDB, a popular database for storing data.

See salaries and explore the career path for Back-End Developer

Database Administrator

Database Administrators are responsible for the design, implementation, and maintenance of database systems. They work on a variety of projects, from small personal projects to large enterprise applications. This course may be helpful, as it would help you learn MongoDB, a popular database for storing data.

See salaries and explore the career path for Database Administrator

Data Scientist

Data Scientists are responsible for the collection, analysis, and interpretation of data. They work on a variety of projects, from small personal projects to large enterprise applications. This course may be helpful, as it would help you learn React, a popular JavaScript library for building user interfaces. You would also learn about functional components, hooks, context, and other essential React concepts.

See salaries and explore the career path for Data Scientist

Machine Learning Engineer

Machine Learning Engineers are responsible for the design, development, and maintenance of machine learning systems. They work on a variety of projects, from small personal projects to large enterprise applications. This course may be helpful, as it would help you learn React, a popular JavaScript library for building user interfaces. You would also learn about functional components, hooks, context, and other essential React concepts.

See salaries and explore the career path for Machine Learning Engineer

Product Manager

Product Managers are responsible for the planning, development, and launch of new products or features. They work on a variety of projects, from small personal projects to large enterprise applications. This course may be helpful, as it would help you learn React, a popular JavaScript library for building user interfaces. You would also learn about functional components, hooks, context, and other essential React concepts.

See salaries and explore the career path for Product Manager

Project Manager

Project Managers are responsible for the planning, execution, and completion of projects. They work on a variety of projects, from small personal projects to large enterprise applications. This course may be helpful, as it would help you learn React, a popular JavaScript library for building user interfaces. You would also learn about functional components, hooks, context, and other essential React concepts.

See salaries and explore the career path for Project Manager

Business Analyst

Business Analysts are responsible for the analysis of business processes and systems. They work on a variety of projects, from small personal projects to large enterprise applications. This course may be helpful, as it would help you learn React, a popular JavaScript library for building user interfaces. You would also learn about functional components, hooks, context, and other essential React concepts.

See salaries and explore the career path for Business Analyst

Technical Writer

Technical Writers are responsible for the creation and maintenance of technical documentation. They work on a variety of projects, from small personal projects to large enterprise applications. This course may be helpful, as it would help you learn React, a popular JavaScript library for building user interfaces. You would also learn about functional components, hooks, context, and other essential React concepts.

See salaries and explore the career path for Technical Writer

Technical Support Specialist

Technical Support Specialists are responsible for providing technical support to users of a product or service. They work on a variety of projects, from small personal projects to large enterprise applications. This course may be helpful, as it would help you learn React, a popular JavaScript library for building user interfaces. You would also learn about functional components, hooks, context, and other essential React concepts.

See salaries and explore the career path for Technical Support Specialist