Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

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

4/22
Recursos

Aportes 19

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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 鈥渉oy 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 鈥渃lassName鈥 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=鈥淏uenas鈥 /> o usando 鈥渃hildren鈥 <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 鈥榡s鈥.

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(鈥榳hat鈥,{props},鈥檆ontent鈥);

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鈥檚 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

Alguien sabe c贸mo hace Juan para arrastrar el rengl贸n en el minuto 2:02 ? yo lo hago a la antigua: ctrl+C -> Delete -> ctrl+v. Me servir谩 bastante. 馃榾

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 鈥渆lementos鈥 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 鈥渃omponentes鈥 que contienen ambas.