JSX: componentes vs. elementos (y props vs. atributos)

Lo increíble de JSX es que ahora estamos practicamente escribiendo todo el HTML de nuestra aplicación dentro de JavaScript 😎. A esto es a lo que nos referimos cuando decimos que “hoy en día nuestras aplicaciones web ya son puro JavaScript”. Aunque la verdadera forma de trabajar con JSX es usando la función createElement, esta suggar syntax nos permite verlo más parecido a un HTML (lo cual también lo hace más legible). Y ahora casi que podemos mezclar HTML con JavaScript. Es decir, podemos tener nuestra lógica de JavaScript y después en el render de JSX podemos simplemente usar variables (o usar directamente código JavaScript).
.
Of course… empiezan a entrar en juego las buenas practicas, ya que si miramos el hecho de que React nos permite combinar código JavaScript con nuestro HTML nos empezamos a dar cuenta que… pues se va pareciendo un poquito a lo que hacian los programadores de antaño con HTML y PHP y el código acababa siendo una mezcla rara de dos lenguajes 😅. También por eso es importante mantener separada la vista de nuestra lógica en nuestras aplicaciones. En fin, el punto es que JSX nos permite escribir nuestra vista con una sintaxis muy parecida a HTML, pero con la oportunidad de incluir nuestro código JavaScript dentro, lo cual hace más fácil de entender qué hace cada componente 😉.

Compartiré mis apuntes de la clase con lo que habia aprendido anteriormente (Cualquier feedback, es bienvenido)

Componentes vs Elementos

En React hay varias formas de crear un elemento:

• Con clases: Actualmente no se usa

class Componenete extends React.Components {
	render() {
		return (
			//Codigo
		)
	}
} 

• Con React.createElement: Se sigue usando. Es opcional

  Sintaxis: React.createElement(elemento, atributos, texto/contenido)
  En el elemento se colocaran el nombre de las etiquetas HTML. Ejemplo, h1, h2, p, form,…

  En los atributos se colocaran los atributos de las etiquetas, es decir, id, class, placeholder,…

  En texto o contenido se coloca contenido que va dentro de la etiqueta. Es decir, <h1>este contenido</h1>

  Veamos con un ejemplo:

const ejemplo1 = React.createElement('h1', {'id': 'title'}, 'Oli React')

const ejemplo2 = React.createElement(
	'p',
	{
		'id': 'paragraph-elemental',
		'class': 'paragraph'
	},
	'Oli React'
)

En el ejemplo 1, lo que hice fue colocar el ejemplo de Juan que mostró en el video.

En el ejemplo 2, lo que hice fue colocar un ejemplo parecido, solo que le di una lectura más legible para los casos que tengamos que colocar más atributos y no se nos complique la lectura al tener esto:

const ejemplo2 = React.createElement('p',	{'id': 'paragraph-elemental','class': 'paragraph'	},	'Oli React');

Ambas versiones del ejemplo 2 son validas, solo es cuestión de que la persona lea mejor el código.

• Con Funciones: Se usa actualmente y es más cómodo que usar React.createElement()

function Componente = () => {
	return(
		//Codigo
	)
}

ReactDOM.render(qué_elemento, dónde) se encarga de renderizar el elemento y colocarlo en el dom. Se pasa por por parametro el elemento a colocar en el DOM y en dónde se quiere colocar

Esto es un componente:

//Componente
const Componente = () => {
	return (
		//Codigo
	)
}
<Componente />

Este es un elemento:

//Elemento
<h1>Dorime</h1>

Nota: Los componentes son una version traducida de los elementos en HTML a Javascript (JSX).

Props vs Atributos

Cuando estamos trabajando con React, para definir el atributo class, no usamos class sino className. React te puede aceptar class como atributo, pero luego te saldrá advertencias y, de paso, es una mala práctica

Las propiedades las podemos recibir de los parametros de los componentes. Ejemplo:

<App nombre="Dorime">

const App = (props) = {
	return (
		<p>{props.nombre}</p>
	)
}

Tambien podemos recibir children que vienen entre el contenido del Componente.

<App>
	<p>Dorime, Ameno</p>
</App>

const App = (props) = {
	return (
{props.children}
	)
}

4.-JSX: componentes vs. elementos (y props vs. atributos)

Podemos crear componentes usando:

class componente extends React.component = Aunque ya casi nadie usa esta forma de crear componentes.

function App (){} = Por convención se empiezan con mayúscula.

Se usa “className” en los elementos HTML para evitar confusión entre las clases de JS y las de HTML.

Los componentes son invisibles para HTML pero si son visibles para React y este los puede usar para renderizar de la forma más optimizada posible.

Lo que renderiza react en HTML son los elementos.

Usamos JSX para que con una sintaxis parecida a HTML podamos escribir de manera más entendible el código.

Los componentes pueden tener propiedades haciendo más interactivo el componente. Por ejemplo usando props.saludo.

Usando las propiedades podemos reutilizar un mismo componente muchas veces ahorrándonos trabajo.

Todas las propiedades las podemos mandar de dos formas, como lo vimos en la clase

<App saludo=“Buenas” /> o usando “children” <App>Buenaaaaaas</App>(donde podemos poner también etiquetas de HTML) y usandolo con props.children

Tomé el curso de React hace 2 meses donde amé crear componentes con clases y ahora resulta que ya está desactualizado tanto usar clases como el curso que tomé,

Quede 🤡🤡🤡

Agregar comentarios en JSX

{*/ /*}

En react, vas a crear muuuchos componentes, para ahorrarte unos segundos de tu tiempo, te recomiendo esta extención:
ES7 React/Redux/GraphQL/React-Native snippets
Esta te crea la estructura básica de un componente con un simple texto.

Si para crear una function component (como la que nos enseño Juanda) usamos:

//react function component
rfc

damos tap° y boooom:

import React from 'react'

function App() {
  return (
    <div>
      
    </div>
  )
}

export default App

Recuerda que por defecto esta extención nombará la function component con el nombre que hayas puedo en el archivo, si se llama cart.js así mismo llamará al componente, obviamente sin el ‘js’.

Este extención tiene para todo tipo de components(class,arrrowFunctions, y la que te mostré, function component)

y recuerda

#nuncaparesdeaprender 😄

Algo importante de JSX es que si bien la sintaxis que nos permite escribir de HTML es muuuuuy parecida, hay diferencias como por ejemplo, se escribr className, en vez de class. Tambien, si se añade algun evento como onclick, en JSX se escribe onClick. Es decir, se usa (lower) camelCase para indicar los atributos de las etiquetas HTML!

Probando acabo de darme cuenta que es posible asignar JSON’s al valor de las propiedades de los componentes probablemente sea mas legible enviar un objeto con varios valores en vez de llenar el componentes de propiedades 😄

let properties = {
  saludo: 'Oli',
  despedida: 'Adios'
};

ReactDOM.render(
    <App prop = {properties} />
  document.getElementById('root')
);

JSX

JSX is a JavaScript extension created by Facebook for use with the React library. It serves as a preprocessor (like Sass or Stylus to CSS) and transforms the code generated with React to JavaScript.

JSX has its alternative which is React.createElement but JSX is preferable because it is much more readable and expressive. Both have the same power and capacity.

Note: JSX through webpack with the help of Babel becomes React CreateElement

React.createElement(‘what’,{props},’content’);

import React from 'react';
import ReactDOM from 'react-dom';

const jsx = <a href="https://www.platzi.com"> ir a Platzi!</a>;
const element = React.createElement(
	'a',
	{ href: 'https://www.platzi.com'},
	'Ir a Platzi'
);	

https://es.reactjs.org/docs/introducing-jsx.html

Formas de escribir un componente profesionalmente:

class Component extends React.Component {
render() {
<h1>This is a class component</h1>
}
}

O tambien

const Component = () => {
return (
<h1>This is a functional component</h1>
)
}

Recordemos que existen dos formas de escribir funciones en JS, así que ya sea una función de toda la vida o un arrow function da igual, se puede de ambas maneras.

Yo tuve un problema de que si guardaba no recargaba y me hacía volver a ejecutar para ver los cambios (esto en WSL2)

npm start

Lo que hice fue crear un archivo .env dentro de la carpeta principal que contuviese

CHOKIDAR_USEPOLLING=true

Este profe es un crack!

JSX
Esta curiosa sintaxis de etiquetas no es ni un string ni HTML.
.
Se llama JSX, y es una extensión de la sintaxis de JavaScript. Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript. JSX produce “elementos” de React.
.
¿Por qué usar JSX?
React acepta el hecho de que la lógica de renderizado está intrínsecamente unida a la lógica de la interfaz de usuario: cómo se manejan los eventos, cómo cambia el estado con el tiempo y cómo se preparan los datos para su visualización.
.
En lugar de separar artificialmente tecnologías poniendo el maquetado y la lógica en archivos separados, React separa intereses con unidades ligeramente acopladas llamadas “componentes” que contienen ambas.

Les recomiendo instalar la extension de visual studio code html to JSX.
.
Ayuda mucho a la hora de trabajar con react. Solo deben seleccionar el código html, click derecho, convert html to jsx y listo. Ya tienen código que React puede entender 😃

Les comparto esta definición del profesor Carlos Azaustre:

JSX es una extensión de JavaScript creada por Facebook para el uso con su librería React. Sirve de preprocesador (como Sass o Stylus a CSS) y transforma el código a JavaScript.

De primeras te puede parecer que estás mezclando código HTML dentro de tus ficheros JavaScript, pero nada más lejos de la realidad. A continuación te lo explico.

React al basar el desarrollo de apps en componentes, necesitamos crear elementos HTML que definan nuestro componente, por ejemplo <div>, <p>, <img>, etc…

También necesitaremos indicar cuando se trata de componentes creados por nosotros con React, como puede ser un <Image />, <List />, etc…

Todo esto podemos hacerlo con JavaScript con los métodos que nos ofrece React como React.createElement.

JSX: componentes vs. elementos (y props vs. atributos)

Los componentes utilizan props y los elementos utilizan atributos.

Ejemplo de uso de props:

index.js:

<App saludo="Hola desde las props!" />,

function App(props) {
  return (
    <a>
      { props.saludo }
    </a>
  );
}

Independientemente de la ruta o cursos antes de este. su podría realizar una mejor explicación basándome en un metodologías un poco mas entendible y fraccionar en videos un poco mas corto. Se puede mejorar.

Componentes escritos en forma de funcion

const Componente = () => (
    <h1>Esto es una forma de crear componente</h1>
);

const Componente = () => {
    return (
        <h1>Otra forma de crear componente</h1>
    );
};

function Componente() {
    return (
        <h1>Otra forma de crear componente</h1>
    )
};

Componente escrito en forma de clase

Class Componente extends Component { 
    render() { 
        return( 
            <h1>componente en forma de Clase</h1> 
        ); 
    } 
}

Para los que no se les actualiza la pagina despues de guardar, y estan usando WSL2 como yo, el problema y solucion puede ser este:

En mi caso yo tenia instalado los archivos de este curso en el disco local D: , entonces volvi a crear todo desde cero en sistema de archivos de linux y ya no tuve ese problema 😃

Ahora sí puedo decir que por fin entendí cómo se usa los componentes

Todo lo mencionado en esta clase son reglas para trabajar con JSX.

.
Solamente le hizo mencionar una, y es que la funcion que crea al componente, no puede retornar mas de un elemento, por lo que todos los elementos que compongan a tu componente deben estar encerrados en un elemento div o en etiquetas vacias <> </>, las etiquetas vacias son transformadas en Fragments, son muy utiles cuando retornamos multiples items y no queremos ensuciar nuestro html final con demasiadas etiquetas divs.

Si les sale el error en consola

./src/index.js
  Line 8:  'React' must be in scope when using JSX  react/react-in-jsx-scope

Tienen que importar import React from 'react';

me gusta, lo estoy usando y me encanta
arrhe!!

en la versión 18 de React, que es la que estoy usando, si detecta los cambios hechos en índex.js sin necesidad de recargar la página.

Muchas personas tienen problemas a la hora de actualizar el codigo, no se refleja automaticamente los cambios en el servidor local.

si usas wsl2 tienes que crear la carpeta del proyecto en la carpeta raiz del home de ubuntu. Para que asi puedas ver los cambios reflejados; si estas creando la carpeta fuera de la raiz de ubuntu, es decir, en windows, tendras dificultades desde wsl2, si este es tu caso, puedes correr npm start desde la consola de windows o powershell, pero recuerda tener instalado node para windows. Espero sea de ayuda!

un desastre ver como en dos clases explican children , envió de variables props entre componentes, entender el dom en react, juntar funciones flecha por si fuera poco arrancar de una vez con una aplicación de lista de tares, pasando por alto conceptos importantes, y para rematar, el exponente es demaciado histriónico y no va zincronizado con lo que esta escribiendo, en ultimas demasiado acelerado, espero que estos videos con estas metodologías sean pocos y mas adelante cambie, pero que mas da, sera calarme ver estos videos por el certificado

Props

Children

import logo from './logo.svg';
import './App.css';

function App(props) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {props.saludo}
        </a>
      </header>
    </div>
  );
}

export default App;

Propiedades en react

En resumen, entiendo lo siguiente:

Los componentes son partes o piezas que forman una interface de usuario completa.

• Muchos componentes independientes se unen para armar una página web.

• Los COMPONENTES en react son bloques de código que se pueden crear usando CLASES o usando FUNCIONES (dependiendo de lo que se necesite que hagan -cada forma tiene sus ventajas sobre la otra-). Y estos bloques de código pintan en la pantalla diferentes partes

• Los componentes contienen multiples elementos (un componentes tweet esta formado por elemento autors, contenido y acciones)

Excelente clase!

En mi caso no se completó la creación de la app porque create-react-app estaba desactualizado. Lo que hice fue:

sudo npm uninstall -g create-react-app

Luego borré todos los archivos y volví a ejecutar npx create-react-app ./

Los elementos de React son una descripción de la interfaz

Los componentes de React son una pieza de código que describe una parte reusable de la interfaz, recibe propiedades y retornan elementos. Son invisibles

este profe explica muy bien

Llevaba algo de tiempo trabajando con react y es la primera vez que entiendo cómo funciona, ahora si me queda claro porque es una librería y no un framework

no sabía lo de children 🤯

Con lo aprendido hasta ahora trasteando un poco he creado un MarkdownPrevisualizer con su respectivo MardownCHEATSHEET.
LinkDelRepository

Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.

Me gusta que el profe haga las aclaraciones de la forma antigua y actual de usar react, igual tenemos que leer codigo de otros y lo vamos a encontrar

INteresante

React-virtual-Dom
React tiene su propio DOM en donde lo que hace es estar mirando los cambios que se hagan e irlos aplicando, para no tener que estar recargando la página siempre y cuando ve que ya no tenemos cambios va al DOM real y aplica los cambios, funciona como versionador.
Algo importante:
Cuando se crea un componente es necesario tener en cuenta que el componente solo puede renderizar un componente o etiqueta padre:
Ejemplo:

	<div >
		resto del componente
	</div>

Asi la aplicación corre bien porque solo tienen un componente padre.
Si se hace con dos etiquetas padres la aplicación Booom se rompe
Ejemplo:

<div>
	Informacion
</div>
<div>
	Otra información
</div>

No se por que, pero cuando intente abrir el localhost:3000 no me funcionaba (tenia un error al compilar) la pagina que te dice Edit src/App.js (…)

Si a alguien mas le pasa eso, lo solucione escribiendo de nuevo la linea que borro el profe:

import reportWebVitals from './reportWebVitals';

que esta en el archivo src/index.js

Es muy difícil conseguir trabajo con react llevo más de 3 años y es muy inestable una estabilidad

Profe esta bien la teoria, me parece perfecto, pero creo que debería de dar términos mas formales, cuando hacen preguntas teorías en exámenes rara vez es aceptable explicar con nuestras palabras, en el curso de angular si dan las definiciones como string interpolación o cosas asi, siento un lenguaje tan comun que no esta mal para los que estamos iniciando pero si es necesario dar términos formales tambien

Por convención los componentes que creamos empiezan por letra “Mayúscula”.