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

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!

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

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

Este profe es un crack!

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

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>

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

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.

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

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

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

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.