React Element: es el bloque de construcción básico en una aplicación de reacción, es una representación de objeto de un Node DOM virtual. React Element contiene tanto el tipo como la propiedad. Puede contener otros Elementos en sus props. React Element no tiene ningún método, lo que lo hace ligero y más rápido de renderizar que los componentes.
Requisito previo:
Sintaxis:
const ele1 =<h1></h1>;
Aquí ele1 es el nombre del componente que hemos dado.
Entendamos con la ayuda de un ejemplo.
Creando la aplicación React:
Paso 1: Cree la carpeta del proyecto de reacción, abra el terminal y escriba el comando npm create-react-app nombre de la carpeta, si ya ha instalado create-react-app globalmente.
npm create-react-app project
Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.
cd project
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo: en el archivo index.js de la carpeta src , creemos un elemento, asígnele el nombre ele1. Así es como creamos un elemento, pero para renderizarlo necesitamos ponerlo en un contenedor div, si revisamos el archivo index.html en la carpeta pública , veremos que hay un div con id = «root», usamos este div como el contenedor div, por lo que para representarlo, escribiremos de la siguiente manera
index.js
import React from 'react';
import ReactDOM from 'react-dom';
const ele1 =<h1>Welcome</h1>;
// Simple javaScript to get the div with id ="root"
ReactDOM.render(ele1,document.getElementById("root"));
Paso para ejecutar la aplicación: muévase a la terminal en su directorio de trabajo y ejecute el comando
npm start
Producción:
Producción
Pero la forma mencionada anteriormente no es la adecuada, pasando a la forma adecuada de crear un elemento, por lo que avanzamos para escribir sin usar JSX. Usaremos React.createElement(), tomará tres parámetros: – tipo del elemento, las propiedades y los hijos para crear un elemento.
Sintaxis:
React.createElement( )
En index.js, estamos creando un elemento con argumentos h1, manteniendo su propiedad como nula y para los niños, estamos pasando una string «Hey Geek».
index.js
import React from 'react';
import React from 'react';
import ReactDOM from 'react-dom';
// Without JSX
const ele1 = React.createElement(
'h1',
{id:'header'},
'Hey Geek'
);
ReactDOM.render(ele1,document.getElementById('root'));
Producción:
Producción
La función React.createElement() anterior devuelve un objeto:
Javascript
{
type: 'h1',
props: {
children: 'Hey Geek',
id: 'header'
}
}
Componente React: Es independiente y reutilizable. Devuelve el DOM virtual del elemento. Uno puede o no pasar cualquier parámetro al crear un componente. Un componente se puede describir con más detalle en componentes funcionales y componentes de clase.
Nota: Siempre comience el nombre de los componentes con la letra mayúscula, reaccione, considere el nombre del componente en minúsculas como etiquetas HTML para que no muestre el componente.
Sintaxis:
function name (){
return <div><div>
}
Así es como creamos un componente funcional.
Ejemplo: entendamos mejor creando un componente, nombremos el componente como Bienvenido, donde estamos pasando usuario
index.js
import React from 'react';
import ReactDOM from 'react-dom';
function Welcome(user){
return <div>
<h3>Welcome {user.name}</h3>
</div>
}
const ele = <Welcome name="Geek"/>
ReactDOM.render(ele,document.getElementById("root"));
Producción:
La diferencia entre Elemento y Componente es la siguiente:
Elemento |
Componente |
| Un elemento siempre es devuelto por un componente. | Un componente puede ser funcional o una clase que opcionalmente toma una entrada y devuelve un elemento. |
| El elemento no tiene ningún método. | Cada componente tiene sus métodos de ciclo de vida. |
| Un elemento React es una representación de objeto de un Node DOM. | Un componente encapsula un árbol DOM. |
| Los elementos son inmutables, es decir, una vez creados no se pueden cambiar. | El estado en un componente es mutable. |
| Se puede crear un elemento usando React.createElement( ) con propiedad de tipo. | Un componente puede declararse de diferentes maneras, como puede ser una clase de elemento con el método render() o puede definirse como una función. |
| No podemos usar React Hooks con elementos ya que los elementos son inmutables. | Los ganchos de reacción se pueden usar solo con componentes funcionales |
| Los elementos son livianos, sin estado y, por lo tanto, son más rápidos. | Es comparativamente más lento que los elementos. |