¿Qué es un componente?

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!!!

• 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

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.

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.

A esto es a lo que yo le llamo: VOCACIÓN para saber enseñar… 😃

Me encanto la clase, un poco larga pero muy fácil de entender. Genial 10/10

Clase 2 🚀

Que es un componente 👁‍🗨

Los componente son elementos reutilizables para React.

Elementos del Proyecto

Readme

Nos da información basica del proyecto, datos tecnicos, librerias configuración

Package.json

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).

.gitignore

Configuración de git para limitar archivos y carpetas a ser subidos al repositorio.

Carpeta public

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).

Carpeta src

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.).

Creamos un componente

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} />

Diferencia de componente y elemento

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.

React DOM

Es el mecanismo de procesamiento donde ingresan los componentes y elementos de React y salen etiquetas HTML en la pagina hacia el usuario final.

Excelente clase, maravillosa. La parte final…ufff con ello este urso se gano 5 estrellitas. Grane profe Juan.

¿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.

¿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 ) }

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

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!!🫡💻▶️✅

Notas de la clase

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" />

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. ❤️

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!

baia baia… felicitaciones por esta mejora del formato de enseñanza. no lo había visto en otro lado.

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.

HTML - JSX

HTML (Hypertext Markup Language)

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.

JSX (JavaScript XML)

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.

Diferencias:

• 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.

Similitudes:

• 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.

Ver esta clase ha sido todo un placer. De los mejores profes de Platzi!

La edición de esta clase es tan genial.

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.

1. Componentes: Los componentes son la base de React. Son bloques de construcción reutilizables que encapsulan el estado y la lógica de la interfaz de usuario. Pueden ser funcionales o basados en clases. Los componentes funcionales son más simples y se escriben como funciones, mientras que los basados en clases tienen más características como el estado local y métodos de ciclo de vida.
2. JSX (JavaScript XML): JSX es una extensión de JavaScript que permite escribir estructuras de código similares a HTML dentro del código JavaScript. Facilita la creación de elementos de la interfaz de usuario y su renderización en el DOM.
3. Virtual DOM (DOM Virtual): React utiliza una representación virtual del DOM para mejorar el rendimiento. En lugar de actualizar directamente el DOM real cada vez que cambia el estado, React crea una versión virtual del DOM y compara los cambios antes de aplicarlos al DOM real, lo que minimiza las actualizaciones innecesarias y mejora la velocidad.
4. Estado (State): El estado es un objeto que almacena datos que pueden cambiar en un componente. Cuando el estado cambia, React vuelve a renderizar el componente para reflejar los nuevos datos en la interfaz de usuario.
5. Props (Propiedades): Las props son datos que se pasan de un componente padre a un componente hijo. Son inmutables y permiten la comunicación y la personalización entre componentes.
6. Ciclo de vida del componente: En los componentes basados en clases, hay métodos de ciclo de vida como componentDidMount, componentDidUpdate y componentWillUnmount, que permiten controlar el comportamiento del componente en diferentes momentos de su vida útil.
7. Manejo de eventos: React utiliza sintaxis similar a la de HTML para manejar eventos, como hacer clic o enviar formularios. Sin embargo, en lugar de usar cadenas de atributos, se utilizan funciones para manejar los eventos.
8. Reconciliación: El proceso en el que React compara el estado anterior y el nuevo para determinar los cambios mínimos necesarios en el DOM se llama reconciliación. Esto ayuda a mejorar el rendimiento al evitar actualizaciones innecesarias del DOM.
9. Hooks: Los Hooks son una característica introducida en React 16.8 que permite a los componentes funcionales utilizar características de componentes de clase, como el estado y los ciclos de vida. Algunos ejemplos de Hooks son useState, useEffect y useContext.
10. Contexto: El Contexto en React permite compartir datos entre componentes sin necesidad de pasar explícitamente las props a través de varios niveles de componentes. Es útil para datos globales, como temas o datos de autenticación.
11. Enrutamiento: Aunque React en sí no proporciona enrutamiento, se puede utilizar una biblioteca como React Router para habilitar la navegación entre diferentes vistas o componentes en una aplicación de una sola página.

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.

Me encanta como enseña el profe, las tematicas y diseño estan tremendos

Wuuooo… Esta explicación final de la fábrica de render estuvo genial… Nice, nice…20ptos.

Las clases con JuanDC son simplemente extraordinarias, siempre las empiezo con muchas ganas!!

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

Como inicializar un proyecto react con vite rápido?

• Ubicate en la carpeta donde deseas crear tu proyecto.
  1. npm init -y
  2. npm create vite@latest NOMBRETUPROYECTO – --template react-swc
  3. cd NOMBRETUPROYECTO
     npm install
     npm run dev

Saludos !

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

Espero que el profe Juan le toque actualizar el curso de Astro algún día… xd

02/34 Curso de React.js: ¿Qué es un componente?

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:

1. 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>;
   }
   

2. 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. 💪

Espero que mi aporte sea de utilidad. 👨‍💻

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! 😄

Locura esta clase 10/10. Excelente el final con esa animación tan buena.

El archivo robots.txt, viene contenido en todas las aplicaciones react. Sirve para validar a qué se le puede hacer web scraping y a qué no.

El web scraping es una de las formas más eficientes y útiles de extraer datos de un sitio web. ¡Especialmente en 2023! Algunos sitios web pueden contener una gran cantidad de datos invaluables. Precios de acciones, detalles de productos, estadísticas deportivas, contactos de empresas. ¡Lo que sea!

Si deseas acceder a esta información, deberás utilizar cualquier formato que utilice el sitio web, o copiar y pegar la información manualmente en un documento nuevo (Acá es donde el web scraping puede ayudar).

La información que recopila el web scraping, se exporta a un formato que sea más útil para el usuario. Ya sea una hoja de cálculo o una API. Aunque el web scraping se puede realizar manualmente, en la mayoría de los casos, se prefieren las herramientas automatizadas al extraer datos web, ya que pueden ser menos costosas y funcionar a un ritmo más rápido.

Pero en la mayoría de los casos, el web scraping no es una tarea sencilla. Los sitios web vienen con muchas formas de protegerse. Los captchas son una de ellas. Como resultado, los web scrapers varían en funcionalidad y características.

¿Es legal el web scraping?
En resumen, la acción de web scraping no es ilegal. Sin embargo, es necesario seguir algunas reglas. El web scraping se vuelve ilegal cuando se extraen datos que no están disponibles públicamente. Esto no sorprende dado al crecimiento del web scraping y muchos casos legales recientes relacionados con el mismo.

Tome la decisión de retomar la programación y que felicidad este gran maestro me tiene super motivada.

I 💚 Platzi

Yo viendo la clase y tomando apuntes :v onta Juan??? 😅

muy bueno el profesor es mejor que SoyDalto

Me parece excelente como platzi esta mejorando toda su estructura, sin duda alguna vale la pena invertir en esta plataforma ❤️ sigan así! 🔥

⚛️ 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/

Para comentarios en REACT se usa la siguiente sintaxis:

{/* comentarios de React JSX */}

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?

Me encantaron los efectos de esta clase, nunca había visto nada parecido en platzi

que de lujo esta la clase la verdad me gusta como el profe explica muy bien

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

La mejor clase introductoria que he tomado en mi año y medio en Platzi.
Muchas felicidades profesor JuanDC

Apuntes / Resumen / Notas

Más aquí 👈👀

Parece una pelicula esta clase!!! subala a imbd y ponganle 10/10

Sería PascalCase

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?” 😃

Se necesita agregar
import React from ‘react’;

Muy buena la clase le felicito

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

Que alucinante!!!

Nanana de locos que, gran cambio con respecto al curso anterior, 10/10

Por fin todo empieza a hacer click en mi cabeza

¿Qué son los componentes en React?

Los componentes en React son funciones que reciben el objeto de propiedades props como parámetro y devuelven elementos React. Entonces, podemos utilizar las propiedades que conforman el objeto props para ejecutar acciones automáticas.

Hay dos tipos de componentes en React:

• Por un lado, existen los componentes de tipo función como el ejemplo anterior, que se escriben así:

const Welcome = (props) => <div>Hello, {props.name} </div>;

• Por otro lado, existen los componentes de tipo clase que se escriben de la siguiente manera:

// ¿qué son clases en react?
class Welcome extends *React.Component {*
	render () {
		return (<div>Hello, {this.props.name}</div>);
	}
}

Como puedes ver en las anteriores líneas de código, para acceder a una propiedad del objeto props en un componente tipo clase deberás utilizar el comando this. Además, todo componente tipo clase debe tener una función de tipo render, que básicamente nos define qué se va a renderizar en pantalla. Dentro de esta función es donde insertamos nuestro return.

En la práctica, utilizaremos mucho más a menudo el formato de componentes en React tipo función. Con este método, no solo nos ahorramos líneas de código, sino que también evitamos lidiar con this, un comando que no siempre es tan específico como queremos.

Me encanta este nuevo formato.

npm run eject
Al crear una aplicación con create-react app, no vemos toda la configuración que sucede con Babel, webpack, ESLint, etc. Si en algún momento de nuestro proyecto, no estamos satisfechos con la herramienta de compilación y las opciones de configuraciones predeterminadas de create-react app, podemos usar npm run eject.

Este comando eliminará la única dependencia de compilación de nuestro proyecto y nos revelará toda la configuración de Babel, webpack, ESLint, etc. para acceder a ella y modificarla. Este comando no es muy utilizado porque después de eso, no podemos dar vuelta atrás. Es decir, una vez hemos usado npm run eject, no podremos regresar al estado anterior.

Todos los comandos excepto npm run eject, seguirán funcionando de forma normal, pero apuntarán a los scripts revelados para que podamos modificarlos. En este punto ya estamos solos. Generalmente, nunca es necesario usar npm run eject.

El conjunto de funcionalidades brindadas por create-react app, es adecuado para implementaciones pequeñas y medianas. Sin embargo, los desarrolladores de react entienden que su herramienta no sería útil si no pudiera personalizarse cuando estemos listos para ello.

browserlist le ayuda a Babel a saber, a qué versión de js/EcmaScript debe transpilar nuestro código.

La etiqueta <noscript> Usted necesita habilitar JavaScript para ejecutar esta aplicación. </noscript>, define un contenido alternativo que se mostrará a los usuarios que tienen JavaScript deshabilitado en su navegador, o tienen un navegador que no admite JavaScript. El elemento <noscript>, se puede utilizar tanto en <head> como en <body>. Cuando se usa dentro de <head>, el elemento <noscript> sólo puede contener elementos <link>, <style> y <meta>.

Que chévere estas clases y el profe, gracias ! me falta esta R, para completar el stack MERN

Esa parte de la fabrica de React le dio 100000 IQ a la clase para el curso del mismo, CRACK!

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

• npm run dev

Contexto: “parece HTML, pero no lo es”

¿Qué es un componente?

Todo en nuestra aplicación React serán componentes, los componentes son la base fundamental de nuestra aplicación.

Características de los componentes

Los componentes en React.js son:

• Reutilizables
• Nos permiten tener interactividad

💡 Los componentes en el navegador, se verán como código HTML.

Revisando nuestros archivos

A continuación, veremos los archivos que copiamos del repositorio.

- README

Contiene la parte introductoria del curso, y es la primera información que se ve al abrir nuestro repositorio.

- package.json

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.

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:

• start: Nos permite iniciar el proyecto
• build: Nos permite armar el proyecto para su despliegue en la nube

"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"
    ]
  }

- .gitignore

Le indica a git, los archivos que no queremos se consideren para el repositorio, normalmente se ignoran archivos de desarrollo.

- public

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.

Este archivo nos permite saber a qué se le puede hacer web scrapping

- src

Esta carpeta contiene todo el contenido que no ve el usuario

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;

JSX

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.

Creando un componente

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>
  );
}

Reutilizar el componente

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.

Propiedades

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}
/>

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)
}

Es increíble en cómo fueron mejorando las animaciones de los cursos de Platzi últimamente. Comparándolo con los del 2.020.

Dios les bendiga,

function TodoItem() {
  return(
    <li>
      <span>V</span>
      <p>A llorar a la lloreria</p>
      <span>X</span>      
    </li>
  );
}

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…

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/

Me pregunto si es tan difícil instalar React que tuvo que enseñar como clonar y no instalar un proyecto. 😕