Introducción y requisitos
¿Qué necesitas para aprender React.js?
Maquetación con React.js
¿Qué es un componente?
Componentes de TODO Machine
¿Cómo se comunican los componentes? Props y atributos
Estilos CSS en React
Interacción con React.js
Eventos en React: onClick, onChange
¿Qué es el estado?
Contando TODOs
Buscando TODOs
Completando y eliminando TODOs
Librería de Iconos Personalizados
Iconos en React: librerías y SVG
Iconos con colores dinámicos
Herramientas avanzadas: escalabilidad, organización y persistencia
Local Storage con React.js
Custom Hooks
Organización de archivos y carpetas
Feature-First Directories en React
Tips para naming y abstracción de componentes React
¿Qué son los efectos en React?
Estados de carga y error
Actualizando estados desde useEffect
Reto: loading skeletons
¿Qué es React Context?
useContext
¿Qué son los React Portals?
Reto: estados para abrir y cerrar un modal
Maquetando formularios en React
Crear TODOs: React Context dentro de React Portals
Deploy
Despliegue de TODO Machine en GitHub Pages
Presentación de proyectos para tu portafolio
Próximos pasos: React #UnderTheHood
Diferencias entre versiones de React.js
¿Cuándo realmente necesitas React.js?
Bonus: creando proyectos en React desde cero
React con Create React App
React con Next.js
React con Vite
Aportes 108
Preguntas 8
Comparto el enlace de la documentación oficial de React, que hace poco fue publicada oficialmente.
puff que video tan bueno, es genial ver como va mejorando la metodologia de los videos. Un gusto poder ver esto tan pronto como salio!!!
Impresionante como han evolucionado sus cursos muchachos! Este sin duda es el que mejores efectos audiovisuales he visto hasta ahora. Que grande el talento hispanoamericano. Además resaltar la super buena vibra del profe Juan, apenas empezando y ya me encanta el curso.
npm run Ejecuta nuestro proyecto en modo desarrollo
npm build Genera versión del proyecto para desplegar a producción.
¿Dónde se renderiza (dibuja) nuestra aplicación? En el div con id="root" del index.html
¿De dónde viene lo que se renderiza? Del componente “App” que definimos en index.js
¿ Qué son los componentes ? piezas de código (generalmente en forma de funciones con nombre en mayúscula).
¿Qué retorna la función ? los elementos del componente (elementos de React), en un formato llamado JSX, el cual se parece a HTML.
¿ Qué utilidad tiene JSX ? combinar código HTML con JS para, por ejemplo, usar variables para dar valores a los atributos de los elementos
¿ Principal diferencia entre elementos y componentes ? Los elementos empiezan con minúsculas y los componentes con mayúsculas.
¿ Para qué sirven ? Para reutilizarlos y así no repetir código
¿ Cómo llamo a un componente? Escribiendo su nombre con la siguiente sintáxis < Componente1 />
¿ Cómo agrego dinamismo a los componentes para que cambien su contenido ? Recibiendo props por parámetros de la función
Nota: Los componentes se pueden anidar, es decir, meter uno dentro de otro
He hecho un curso de React con Óscar y ahora empiezo este… sin querer desmerecer el trabajo del primero, si que quiero destacar la tremendísima diferencia que hay en la forma de transmitir conocimientos entre ambos. Posiblemente no sea así para todo el mundo, pero para mi, Juan DC es como 500x más claro.
Me encanto la clase, un poco larga pero muy fácil de entender. Genial 10/10
A esto es a lo que yo le llamo: VOCACIÓN para saber enseñar… 😃
Los componente son elementos reutilizables para React.
Nos da información basica del proyecto, datos tecnicos, librerias configuración
Nos muestra dependencias, scripts (funciones a ejecutar), configuraciones (eslint es una libreria que nos ayuda a corregir errores de sintaxis o escritura de codigo), browserlist (ayuda a transpilar el proyecto como servidor :3000).
Configuración de git para limitar archivos y carpetas a ser subidos al repositorio.
Carpeta que contiene elementos publicos que seran accedidos por el navegador.
El dato esencial de React es que utiliza una plantilla base de HTML (index.html) con una etiqueta div dentro de body, esta etiqueta div tiene id=root (por lo general) y a travez de esta es que renderizamos todo el proyecto en react.
Adicionalmente el HEAD del archivo index.html tenemos estilos y el manifest que es el que nos ayudará a hacer pwa (paginas instalables en ordenadores incluso offline).
El archivo principal es index.js donde importamos todos los estilos y exportamos un componente App.js. Dentro de App.js importamos los estilos asignados al componente App.css luego encontramos una función con nombre iniciado con mayuscula por convención que puede o no recibir un parametro, dentro del return podemos ejecutar codigo jsx bajo la nomenclatura de react.
Adicionalmente podemos crear carpetas con una arquitectura con buenas practicas (hooks, services, api, etc.).
Dentro de App antes del export:
function TodoItem() {
return (
<li>
<span>V</span>
<p>Llorar con la Lorona</p>
<span>X</span>
</li>
);
}
Y en el componente App, luego del primer className:
<TodoItem />
Luego de verificar la aplicación en el navegador, podemos aclarar que bajo un metood render (root.render([<TodoCount />])) podemos renderizar cuantas veces querramos componentes y utilizando props (propiedades) esta se utilizan como propiedades HTML:
<TodoCount completed={3} total={5} />
La funcion que empieza con mayuscula es un componente que reciben propiedades y no renderizan nada en el html, los elementos estan dentro de componente que luego se convertiran en html y estos procesan las propiedades recibidas.
Es el mecanismo de procesamiento donde ingresan los componentes y elementos de React y salen etiquetas HTML en la pagina hacia el usuario final.
¿Cómo creamos componentes con React?
Existen varias formas de crear componentes con React, por conveción siempre los creamos utlizando PascalCase, es decir, “La Primera Letra De Cada Palabra En Mayúscula y Juntas (TodoList)”. Las formas de crear componentes en React son utilizando el metodo “react.createElement” , a través de Clases y por ultimo y el más utilizado por FUNCIONES.
De forma declarativa.
function Component() {
return ( ... JSX ) }
Utilizando Arrow Functions.
const Component = () => {
return ( ... JSX ) }
¿Y que es JSX?
JSX es una extesión de la sintaxis de JS creada por Facebook (Ahora Meta) para utilizarse en React.js , su principal función es escribir codigo HTML (No es HTML sino una representación del mismo) dentro de archivos JavaScript facilitando la creación de componentes.
JSX funciona como un Pre-Procesador ya que transforma el codigo .jsx a codigo JavaScript que pueda interpretar el browser, esto sucede gracias a un compilador, como lo es BABEL.
Excelente clase, maravillosa. La parte final…ufff con ello este urso se gano 5 estrellitas. Grane profe Juan.
Mencionar que al crear un componente, debe existir un elemento principal que envuelva a los demás elementos, algo así como un container, porque sino saldrá error.
Se está pagando sola esta suscripción
baia baia… felicitaciones por esta mejora del formato de enseñanza. no lo había visto en otro lado.
La edición de esta clase es tan genial.
En React, "props" es una abreviatura de "propiedades" y se utiliza para pasar datos de un componente padre a un componente hijo. Las props son un mecanismo fundamental en React para lograr la reutilización y la composición de componentes. Cuando creamos un componente en React, podemos pasarle datos y funciones como props. Estos datos pueden ser cualquier tipo de valor, como números, cadenas de texto, booleanos, objetos o incluso funciones.
Min: 7:05 yo tengo deshabilitado el JS en el navegador xD no se, soy algo paranoica. Solo lo habilito cuando es una página confiable.
Muy buena la clase le felicito
Tome la decisión de retomar la programación y que felicidad este gran maestro me tiene super motivada.
Ver esta clase ha sido todo un placer. De los mejores profes de Platzi!
Tengo que decir que, despues de ver ya varios cursos de React en platzi a medida que son actualizados, este de verdad es una genialidad. Desde el contenido hasta lo efectos visuales para mantener tu atencion. Profe Juan David, se lucieron en este. Muchisimas Gracias!
Las clases con JuanDC son simplemente extraordinarias, siempre las empiezo con muchas ganas!!
si quieren poner un boton y usar modo dark vean este video e implementenlo 😃 aqui
¡Esta edición es excelente!
Definitivamente uno de los mejores cursos que he visto
Un componente de React es una pieza de UI (por sus siglas en inglés, Interfaz de Usuario) que tiene su propia lógica y apariencia. Un componente puede ser tan pequeño como un botón o tan grande como toda una página web.
.
Los componentes de React son funciones de Javascript que retornan elementos que están escritos en la sintaxis de JSX, estos elementos cuando react los renderice se convertirán en elementos HTML.
.
Nota: Los nombres de los componentes de React siempre deben comenzar con mayúscula, mientras las etiquetas HTML deben estar minúsculas.
.
Los componentes pueden recibir propiedades en la función, estas propiedades nos permiten cambiar cualquier información haciendo más dinámico el componente. La sintaxis quedaría algo así:
function Saludo(props) {
return(
<h1> Hola, {props.nombre} </h1>
)
}
¿Cómo pasamos las propiedades al componente?
Para pasar propiedades al componente pasaremos las propiedades como si fueran atributos de HTML, esto quedaría algo así:
<Saludo nombre="Dante" />
Vengo del curso anterior de react y woah. La verdad no me esperaba las animaciones y están muy padres! No puedo esperar a ver todo el curso! 😄
Que alucinante!!!
es el lenguaje de marcado estándar para crear páginas web. Define la estructura y presentación del contenido en una página web. HTML utiliza una sintaxis basada en etiquetas, donde los elementos se encierran entre etiquetas de apertura y cierre.
es una extensión de JavaScript que te permite escribir código similar a HTML dentro de JavaScript. Se utiliza comúnmente con React, una popular biblioteca de JavaScript para construir interfaces de usuario. JSX proporciona un enfoque más declarativo y basado en componentes para la creación de componentes de interfaz de usuario.
Sintaxis HTML utiliza una sintaxis basada en etiquetas, mientras que JSX es una extensión de JavaScript que permite escribir código similar a HTML dentro de JavaScript.
Uso: HTML se utiliza de forma general en el desarrollo web para definir la estructura y presentación de una página. JSX se utiliza principalmente con la biblioteca de JavaScript React para construir componentes de interfaz de usuario.
JavaScript: JSX permite la incrustación de expresiones y lógica de JavaScript dentro de la estructura de la interfaz de usuario. HTML no ofrece esta funcionalidad directamente.
Atributos: HTML utiliza una nomenclatura de atributos en minúsculas y con guiones, mientras que JSX utiliza camel case para los nombres de atributos.
Propósito: Tanto HTML como JSX se utilizan para construir interfaces de usuario en el desarrollo web.
Elementos y estructura: Ambos lenguajes se basan en la idea de elementos y su estructura jerárquica. Se pueden anidar elementos y definir su contenido y atributos.
Estilos y clases: Tanto en HTML como en JSX, se pueden aplicar estilos y asignar clases a los elementos para definir su apariencia.
Compatibilidad con navegadores: Tanto HTML como JSX son interpretados y renderizados por los navegadores web, lo que permite que los usuarios vean y interactúen con la interfaz resultante.
Al Inicio puede ser confuso. No te frustres. Si eres nuevo con React, poco a poco te irás amoldando a su sintaxis, reglas y como se enlaza todo.
¡¡Tú puedes!!🫡💻▶️✅
Nanana de locos que, gran cambio con respecto al curso anterior, 10/10
La parte final del video es una maravilla, la forma en la que explican el como funciona la fabrica de React es una locura. De verdad que la renovación de este curso le sentó muy bien. ❤️
Wow react estaba super confuso para mi, realmente sabia que con este curso, me iba a llevar de la mano a entenderlo mucho mejor, pero solo esta clase en todos los aspectos es bestial 🔥, es un 10/10 desde ya estoy impresionado
Parece una pelicula esta clase!!! subala a imbd y ponganle 10/10
Yo viendo la clase y tomando apuntes :v onta Juan??? 😅
I 💚 Platzi
En React.js, un componente es una unidad fundamental de construcción de interfaces de usuario. Los componentes son como bloques de construcción reutilizables que permiten dividir la interfaz de usuario en partes más pequeñas y manejables. Cada componente puede tener su propio estado interno y puede representar una parte específica de la interfaz de usuario.
Hay dos tipos principales de componentes en React:
Componentes Funcionales: También conocidos como componentes basados en funciones, estos son simplemente funciones de JavaScript que devuelven elementos de React (normalmente elementos JSX). Los componentes funcionales son más simples de escribir y entender, y a menudo se utilizan para componentes que no requieren un estado interno o un ciclo de vida complicado.
function MiComponente(props) {
return <div>Hola, {props.nombre}!</div>;
}
Componentes de Clase: Los componentes de clase son clases de JavaScript que extienden la clase base React.Component. Estos componentes son útiles cuando necesitas un estado interno o deseas utilizar el ciclo de vida de React para gestionar eventos y efectos secundarios.
class MiComponente extends React.Component {
constructor(props) {
super(props);
this.state = { contador: 0 };
}
render() {
return (
<div>
Contador: {this.state.contador}
<button onClick={() => this.setState({ contador: this.state.contador + 1 })}>Incrementar</button>
</div>
);
}
}
Los componentes se pueden componer entre sí para construir interfaces de usuario más complejas. Esto significa que puedes usar componentes más pequeños y reutilizables para crear componentes más grandes y complejos. Los componentes también pueden aceptar propiedades (props) como argumentos de entrada, lo que les permite ser configurables y reutilizables en diferentes contextos.
Por ejemplo, en el código de ejemplo anterior, el componente MiComponente acepta una propiedad nombre como entrada y muestra un saludo personalizado. Puedes usar este mismo componente en diferentes partes de tu aplicación con diferentes nombres.
Los componentes son una parte central del modelo de desarrollo en React, y la composición de componentes es una técnica clave para construir aplicaciones web robustas y mantenibles.
Quiero felicitar a Platzi por la calidad de este curso, viendo como van mejorando en la calidad audiovisual de las clases me llena de emoción. Esta plataforma va a llegar muy lejos. 💪
Me encanta como enseña el profe, las tematicas y diseño estan tremendos
Como inicializar un proyecto react con vite rápido?
Saludos !
Como podemos instalar la biblioteca de react en un proyecto con vite y js vanilla?
Ubicate en la carpeta donde deseas crear tu proyecto.
npm create vite@latest NOMBRETUPROYECTO – --template vanilla
cd NOMBRETUPROYECTO
npm install
npm install @vitejs/plugin-react -E
npm install react react-dom -E
crear un archivo vite.config.js
import { defineConfig } from 'vite’
import react from ‘@vitejs/plugin-react-swc’
export default defineConfig({
plugins: [react()],
})
en tu archivo main.js borrar todo y colocar esto:
import { createRoot } from ‘react-dom/client’;
const root = createRoot(document.getElementById(‘app’));
root.render(<h1> HOLA PLATZI</h1>);
cambiar el nombre del archivo por main.jsx y tambien en el index.HTML por main.jsx
Contexto: “parece HTML, pero no lo es”
Locura esta clase 10/10. Excelente el final con esa animación tan buena.
Todo en nuestra aplicación React serán componentes, los componentes son la base fundamental de nuestra aplicación.
Los componentes en React.js son:
💡 Los componentes en el navegador, se verán como código HTML.
A continuación, veremos los archivos que copiamos del repositorio.
Contiene la parte introductoria del curso, y es la primera información que se ve al abrir nuestro repositorio.
Contenido en varios objetos con sus propiedades, este contiene la configuración de nuestro proyecto. A continuación, veremos solo algunos de los más relevantes para este proyecto en específico.
<h5>Configuración inicial</h5>En la configuración inicial podemos ver el nombre del proyecto, la versión y las dependencias.
💡 Las Dependencies es lo que se instala cuando corremos el comando
npm i
{
"name": "platzi-intro-react-base",
"version": "0.1.0",
"dependencies": {
"react": "^18",
"react-dom": "^18",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Los scripts son funciones que podemos ejecutar en nuestro proyecto y estas son:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject"
},
Esta herramienta nos va dando configuraciones, que son reglas estandarizadas del lenguaje, esto nos permite dar uniformidad al trabajo y evitar errores futuros. En este caso podemos ver que tiene una configuración de react-app
"eslintConfig": {
"extends": [
"react-app"
]
}
Esto le indica a React, la versión de ECMAScript a la cual se debe transpilar el proyecto para que este sea visible en nuestros navegadores.
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
Le indica a git, los archivos que no queremos se consideren para el repositorio, normalmente se ignoran archivos de desarrollo.
En esta carpeta se encuentran los elementos que son visibles al usuario como son el favicon, las imágenes y el archivo index.html
Cuando trabajamos con React.js, nuestro archivo index.html, únicamente tiene el head y en el body, solo cuenta con un div con un id='root'. Esto es por que todos los elementos se agregaran dentro de este div id='root'.
Este archivo es necesario cuando se trabaja con progresive web app.
<h5>robots.txt</h5>Este archivo nos permite saber a qué se le puede hacer web scrapping
Esta carpeta contiene todo el contenido que no ve el usuario
<h5>index.js</h5>Este es nuestro archivo principal de react, ya que a partir de este archivo se renderizarán los componentes hacia el frontend.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Este archivo es nuestro componente principal, el cual nos servirá para ingresar más componente a nuestra aplicación.
💡 Es importante señalar que este archivo se encuentra escrito con la primera letra en mayúscula, ya que solo de esta forma React, sabrá que este archivo es un componente.
import logo from './platzi.webp';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Aprendamos React
</p>
<a
className="App-link"
href="https://platzi.com/reactjs"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Cuando trabajamos en componentes veremos una sintaxis de HTML, sin embargo, realmente estamos trabajando con JSX, esto es realmente JavaScript que en su momento le indicará al navegador para crear el HTML.
Hay dos partes cruciales cuando trabajamos con JSX, el primero es que cuando tenemos una etiqueta HTML que comienzan con mayúsculas, realmente estos son componentes, y cuando la etiqueta comienza con minúscula, entonces es un elemento de React.
Ahora crearemos nuestro primer componente, para esto, iremos al archivo App.js y dentro de este crearemos una nueva función con el nombre TodoItem y dentro de esta crearemos los primeros elementos de nuestro Todo de la siguiente manera:
function TodoItem() {
return (
<li>
<span>✔</span>
<p>Llorar con la llorona</p>
<span>❌</span>
</li>
)
}
Para renderizar este componente lo agregaremos dentro de nuestro componente App, este componente lo llamaremos utilizando la sintaxis <TodoItem />, de la siguiente manera.
function App() {
return (
<div className="App">
<TodoItem/>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Aprendamos React
</p>
<a
className="App-link"
href="https://platzi.com/reactjs"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
Como ya tenemos el componente TodoItem, ahora lo podemos reutilizar, y esto lo podemos comprobar copiando el componente otras 2 veces, y esto lo debería renderizar según el número de veces que lo hubiéramos copiado.
function App() {
return (
<div className="App">
<TodoItem/>
<TodoItem/>
<TodoItem/>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Aprendamos React
</p>
<a
className="App-link"
href="https://platzi.com/reactjs"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
Es importante mencionar que la finalidad no es copiar los elementos para que estos sean iguales, sino hacerlos dinámicos, esto es ejemplo para ver como podemos renderizar usando React.
Las propiedades son elementos que nosotros podemos pasarle al JSX, para de esta manera generar elementos dinámicos, estos se pueden pasar empleando corchetes como se muestra a continuación.
<TodoCount
completed={3}
total={5}
/>
React.js es una biblioteca de JavaScript desarrollada por Facebook que se utiliza para construir interfaces de usuario interactivas y dinámicas. Está diseñada para dividir la interfaz de usuario en componentes reutilizables y manejar eficientemente los cambios en el estado y la representación de la interfaz de usuario.
componentDidMount, componentDidUpdate y componentWillUnmount, que permiten controlar el comportamiento del componente en diferentes momentos de su vida útil.useState, useEffect y useContext.En resumen, React.js es una biblioteca poderosa y popular para construir interfaces de usuario dinámicas y reactivas. Se basa en la composición de componentes, el uso de JSX, el manejo eficiente del estado y el virtual DOM para lograr un rendimiento y una experiencia de usuario óptimos.
La mejor clase introductoria que he tomado en mi año y medio en Platzi.
Muchas felicidades profesor JuanDC
Gran clase, me siento emocionado que despues de tanto tiempo por fin puedo llegar a usar un framework y este curso va a ser el mas extenso que he tomado, me encanta como el profe explica las cosas y que detalle las animaciones
que de lujo esta la clase la verdad me gusta como el profe explica muy bien
Yo uso estas dos tipos de funciones, una para componentes y otras para los hooks.
Ejemplo 1:
export default function HolaMyFriend() {
return (code a regresar)
}
Ejemplo 2:
export const HolaMyFriend = () => {
return (code a regresar)
}
Me encantaron los efectos de esta clase, nunca había visto nada parecido en platzi
Es increíble en cómo fueron mejorando las animaciones de los cursos de Platzi últimamente. Comparándolo con los del 2.020.
Se necesita agregar
import React from ‘react’;
Dios les bendiga,
function TodoItem() {
return(
<li>
<span>V</span>
<p>A llorar a la lloreria</p>
<span>X</span>
</li>
);
}
Los efectos en animaciones me han dejado flipando, tambien hago contenido educativo en YT y este tipo de animaciones me han motivado a poder crear videos mas iteractivos. Y el carisma del profesor Juan David Castro hace que el video sea 10/10. No ha pensado en dictar cursos en la seccion de Oratoria?
ya habia tomado el curso de intro a react.js pero en el curso de composicion de componentes algunas cosas cambian y la verdad es que todo fue tan rapido que olvide el principio de react… ahora sigo con este curso para consolidar las bases de react, es mas largo si, pero por ende mucho mas explicado…
Espero que el profe Juan le toque actualizar el curso de Astro algún día… xd
muy bueno el profesor es mejor que SoyDalto
Excelente mejora de los videos, me encantan las animaciones explicativas, y como ponen ejemplos para definir que es componente o elementos en vez de solo escribirlo en la consola de la página de chrome, un gran avance comparada con la clase de React 17
si pero… ¿Donde puedo prender a animar mis video así?
¡AAAA se ve increibleee!
Existe un Curso Básico de Web Components con JavaScript
https://platzi.com/cursos/web-components-javascript/
Wow!!! Es clase me volo la cabeza con los avances de los cursos y los efectos del mismo!! Bien por Platzi y como siempre desde que llegue a esta plataforma, amo como da las clases el profe JuanDC!!! Mis respetos!! 👏
Me encantó la animación final, estoy enamorado de estos últimos cursos.
Cuándo vi la animación me dije “Dónde le doy like a este video?” 😃
Me pregunto si es tan difícil instalar React que tuvo que enseñar como clonar y no instalar un proyecto. 😕
rolen el tema que usa jeje :b
Excelente clase, en este curso se nota el avance de calidad!
Le comparto una docuemntación de react sobre Componentes y propiedades
Me encantó, les quedó muy cool, los felicito, muy bien tenía duda si verlo o no porque ya hice el TODOs, pero me enganchó, bravo.
muy chida la clase, me encantaron las animaciones
Para comentarios en REACT se usa la siguiente sintaxis:
{/* comentarios de React JSX */}
Wao, me encanto el final, super bien eplicado
Gran clase!
Sería PascalCase
Si desean detener el proceso de npm start en la terminal pueden usar las teclas ‘Ctrl + c’.
⚛️ No pues… no esperaba la verdad la última parte. Estuvo genial. Felicitaciones!
Les dejo por aquí una web que tiene toda la documentación que necesitan, junta. https://devdocs.io/react/
Wuuooo… Esta explicación final de la fábrica de render estuvo genial… Nice, nice…20ptos.
me encanto esta forma de posicionar el codigo junto a la camara de el docente
Ocshhh, todo lo que ha cambiado a nivel de multimedia este curso, me encanta la evolución. Muchas gracias Juan y Platzi
Demasiado fina esta clase!
Me parece excelente como platzi esta mejorando toda su estructura, sin duda alguna vale la pena invertir en esta plataforma ❤️ sigan así! 🔥
Gracias profe, la verdad que si haz mejorado bastante!!!
Excelente como están usando elementos audiovisuales para mejorar las explicaciones y, por lo tanto, el facilitar el entendimiento. Bien hecho Platzi!
OMG ,esperen al final muchachos ,nueva forma de enseñanza de platzi !!!
los nombres de los componentes siempre se escriben con la nomenclatura UpperCamelCase, esto para que se distinga de los elementos de React y JSX.
Excelente video, entendido 100%
Para profundizar un poco en la parte de los componentes:
existen varios tipos de componentes:
componentes de función
componentes de clase
componentes de orden superior
componentes de renderizado condicional
COMPONENTES DE FUNCIÓN: son funciones que reciben propiedades (props) como argumentos y devuelven elementos para representar la interfaz de usuario
COMPONENTES DE CLASE: son componentes que pueden tener estado interno y metodos para manejar eventos y otras acciones.
COMPONENTES DE ORDEN SUPERIOR (HOC): son funciones que toman un componente y retornan un nuevo componente con una funcionalidad adicional, son utiles para la gestion de estados compartidos, manipulación de props o enrutamiento condicional.
COMPONENTES DE RENDERIZADO CONDICIONAL: son componentes que permiten esconder o mostrar elementos en función de ciertas condiciones o estados, estos componentes evaluan una expresión y deciden que elementos mostrar en función del resultado, sirven para mostrar contenido alternativo, manejar autenticación, controlar el flujo interno de un usuario.
Los componentes en React tienen varias características clave:
This course has been great so far and I am completely sure it will remain as such. Juan David is definitely one of the most teaching-wise talented professors in Platzi because he fully knows how to engage students to keep watching his classes. I was looking forward to this course a long time ago because the one with Oscar was good, but there were a lof of things that were taken for granted. This course goes further into the basics of React.js and that is fundamental for any frontend developer who is starting their career. Keep up the good content!
🤩¡Me encanta!🤩
me encantó el formato de mostrar los contenidos, con animaciones. Muy profesional.!
Que buena clase tanto en la explicacion como en la calidad audiovisual!
En una aplicación de React.js tenemos 2 archivos importantes…
index.js y app.js, uno hace referencia a la raíz de la app y otro al punto de entrada de la misma, es decir …
index.js es el archivo raíz (root) de la app, es el que React va a utilizar para renderizar la aplicación en el navegador, dentro de este archivo se importa el “Componente Principal” de la app, comúnmente “app.js” y se lo renderiza en el DOM utilizando el método “.render(<App />)”
app.js funciona como nuestro componente principal, dentro de este archivo se importan otros componentes y se los utiliza para construir la UI (interfaz) de nuestra app.
npm i o npm install para instalar las dependencias del proyectonpm start Ejecuta nuestro proyecto en modo desarrollo, estos comandos se pueden configurar en el archivo package.json en otros entornos de react suelen tener configurado npm run para ejecutar el proyecto.npm build Genera la versión del proyecto para desplegar a producción, digamos que es para activar la fábrica de render de ReactDOM 😎 .import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container);
root.render(<App />);
¿De dónde viene lo que se renderiza? Del componente “App” que definimos en index.js
¿ Qué son los componentes ? piezas de código (generalmente en forma de funciones con nombre en mayúscula).
¿Qué retorna la función ? los elementos del componente (elementos de React), en un formato llamado JSX, el cual se parece a HTML.
¿ Qué utilidad tiene JSX ? combinar código HTML con JS para, por ejemplo, usar variables de JS para dar valores dinámicos a los atributos de los elementos a través de los props
¿ Principal diferencia entre elementos y componentes ? Los elementos empiezan con minúsculas y los componentes con mayúsculas.
¿ Para qué sirven ? Un componente es una pieza de código que renderiza una parte de la interfaz. Los componentes pueden ser parametrizados, reutilizados, En React los componentes se crean usando funciones.
¿ Cómo llamo a un componente? Escribiendo su nombre con la siguiente sintaxis < Componente1 />
¿ Cómo agrego dinamismo a los componentes para que cambien su contenido ? Recibiendo props por parámetros de la función, el contenido se enviara cuando se llame al componente. entre llaves <componente prop={contenido} /> y lo chévere es que podemos renderizar el mismo componente con diferente contenido.
<componente prop={contenido1} />
<componente prop={contenido2} />
<componente prop={contenido3} />
<componente prop={contenido4} />
Nota: Los componentes se pueden anidar, es decir, meter uno dentro de otro
function App() {
return (
<div className="App">
<TodoItem /> {/* este es un componente dentro de otro componente,
(spoiler: asi se comenta en react 😎)*/}
</div>
);
}
function TodoItem(props) {
return <li>New todo</li>;
}
Tiene cara loco pero enseña bien el muchacho, felicitaciones
Segunda clase y me está encantando, Juan David, tenes talento mijo, tengo platzi por un año, y tenia meses que no entraba por el anterior curso de react que daba Oscar que no me gustó para nada, pero este, este si dan ganas de seguir jaja. Lo siento pero es la verdad, gracias.
¿y si ponemos un poco de complejidad al curso y usamos vite? https://vitejs.dev/
Genial, muy buena explicación. Solo no me ha gustado el color del fondo de Visual Studio Code, muy oscuro. Pero ha sido una clase genial.
Con todas las ganas de iniciar este curso de React, a seguir aprendiendo!!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.