React JS: La biblioteca de JS creada por Facebook
SOBRE EL CURSO
Gracias a este curso aprenderás desde los conceptos básicos de React JS, hasta los Hooks para crear una páginas webs completa desde cero.
¿QUE APRENDEREMOS?
- Aprenderemos que es React Js y por qué es tan famoso y potente.
- React JS, la librería de Javascript más demandada en el mercado laboral actualmente.
- Aprenderemos a usar los Hooks de React, useState y useEffect.
- Aprenderemos una nueva forma de trabajar más ordenada, limpia y declarativa por componentes.
- Conocer todo lo que tiene React y lo que podemos hacer con el
- Conocer qué es el State, Props, Tipos de Componentes en React y mucho más!
- Escribiremos código React que siga las buenas prácticas.
- Gracias a todo este contenido podremos conseguir trabajo como desarrollador ReactJS
Introducción
Presentación de curso.
Preparación del entorno
Seleccionaremos el navegador que vamos a utilizar durante todo el curso.
Instalaremos el Editor de Código Visual Studio Code y las Extensiones que vamos a utilizar.
Instalaremos Node.js para poder luego crear Apps con React.
Instalaremos YARN para descargar todas las dependencias de terceros que usaremos en nuestros proyectos.
Vamos ha instalar una extension de Google Chrome llamara React Developer Tools que nos ayuda a identifica los componentes del DOM de un simple vistazo.
Lo más importante antes de programar es saber cuál es la documentación donde tenemos que ir a resolver dudas y este caso Facebook nos da la documentación de React en español.
Primeros pasos en React JS
Veremos que es el JSX de React y por que nos facilita mucho a la hora de programar.
Veremos los conceptos básicos que tiene React para entender mejor como funciona.
Crearemos nuestra primera app con el comando create-react-app.
Veremos toda la estructura de una aplicación de React JS.
Crearemos nuestro primer componente y veremos todas sus partes.
Veremos una explicación de que son los PROPS de React y como funcionan.
Pasaremos props básicos de una componente a otro para crear componentes reutilizables.
Pasaremos variables y objetos por los props de nuestros componentes.
Vamos a aprender como podemos pasar funciones completas entre componentes usando los props de React JS.
Veremos que es la asignación por destructuring y como no puede ayudar con el manejo de props.
Podemos definir en nuestros componentes props por defecto en el caso de que no le pasemos ninguno.
Veremos que el Template Strings y como nos puede ayudar a mostrar las variables en los componentes.
Con React Developer Tools podremos ver en tiempo real que props tiene cada componente, que componentes son los padres y que hooks esta usando, entre muchas mas funcionalidades.
Añadiremos una biblioteca de componentes basados en Bootstrap a nuestro proyecto
Aprenderemos a crear componentes basados en imágenes SVG.
Usando Hooks
Crearemos nuestro primero estado en nuestro componente y veremos como se mueve la información por le estado.
Crearemos un ejemplo de como se usuaria el useEffect en un componente.
Sistema de Rutas con React Router Dom
Instalaremos el package React Router Dom para poder crear el sistema de navegación en nuestro proyecto.
Crearemos el Sistema de Navegación para que el usuario pueda navegar entre páginas.
Mucho más!
Cursos relacionados
