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)

5/23
Recursos

JSX es una extensi贸n de JavaScript creada por Facebook para usarse con React.js. Nos presneta muchas ventajas el trabajar con elementos y componentes en vez de manipular el html de manera tradicional.

La funci贸n que JSX tiene es de ser un preprocesador (como Sass o Stylus a CSS) y transforma el c贸digo a JavaScript.

React.js acepta el hecho de que la l贸gica de renderizado est谩 intr铆nsecamente unida a la l贸gica de la interfaz de usuario. Es decir 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.js separa intereses con unidades ligeramente acopladas llamadas 鈥渃omponentes鈥 que contienen ambas.

Los elementos de React.js son una descripci贸n de la interfaz. Los componentes de React.js son una pieza de c贸digo que describe una parte reusable de la interfaz, y como tal, recibe propiedades y retorna elementos. Son invisibles. Los componentes son invisibles para HTML, pero si son visibles para React.js y este los puede usar para renderizar de la forma m谩s optimizada posible. Lo que renderiza React.js en HTML son los elementos. Utilizamos JSX para que, con una sintaxis parecida a HTML podamos escribir de manera m谩s entendible el c贸digo.

Los componentes pueden tener propiedades para lograr que sea m谩s interactivo. Empleando las propiedades podemos reutilizar un mismo componente muchas veces ahorr谩ndonos trabajo. Todas estas ventajas nos da en trabajar con React.js y JSX.

Colaboraci贸n de Josu茅 Hern谩ndez, Adolfo Roque y Mayra L贸pez

Aportes 50

Preguntas 20

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

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

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

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

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 鈥渆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.

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

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. 馃榾

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 鈥淢ay煤scula鈥.