¿Cómo crear componentes en ReactJS?

Como todos sabemos, React usa este formato JSX para que podamos juntar HTML y JavaScript. Estos componentes de React se pueden definir en cualquier parte de su proyecto ReactJS y se pueden usar en cualquier parte de su proyecto ReactJS. Hay dos formas de definir componentes en ReactJS, ambas son utilizadas por una amplia gama de programadores, pero con APIS/HOOKs como useState, use context, los componentes funcionales se están volviendo cada vez más populares.

Tipos de componentes:

1. Reaccionar componentes funcionales
2. Reaccionar componente basado en clases

1. Componentes funcionales de React: los componentes funcionales de React pueden ser cualquier función de JavaScript que devuelva el HTML. Estos componentes funcionales también pueden aceptar «accesorios», es decir, propiedades o datos. Como se trata de funciones de JavaScript o extensiones de funciones de JavaScript, también se pueden crear a partir de la convención ES6 de la función de flecha. Estos componentes funcionales también pueden aceptar los accesorios que podemos usar usando la sintaxis JSX y también puede colocar su código JavaScript normal antes de la declaración de devolución. Una cosa a tener en cuenta es que solo debe haber una devolución por componente.

Sintaxis:

const Greet = (props) => {
    const person = props.name;
  return (
    <div>
      <h1>Hello {person}!!</h1>
    </div>
  )
}

2. Componentes basados ​​en clases de React: los componentes basados ​​en clases también tienen casi las mismas características que los componentes de funciones de React. pero antes de definir nuestro componente basado en clases, debemos importar el archivo «React. Componente” o extraer el Componente como “{Componente}” de React.

import React, {Components} from 'react';

Sintaxis:

import React, { Component } from 'react'
  
class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello {this.props.name}</h1>
      </div>
    )
  }
}

Renderizando el Componente: Hemos hecho con éxito los componentes, pero para usarlos necesitamos renderizarlos. uno puede exportar primero sus componentes y puede usarlos en cualquier lugar en el método ReactDOM.render después de importarlos.

En algún lugar de su proyecto en ReactDOM.render()

ReactDOM.render(
  <React.StrictMode>
    <Greet name="gfg " />
  </React.StrictMode>,
  document.getElementById('root')
);

Ahora vamos a ver la aplicación de trabajo completa creada con componentes React.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

directorio de archivos

Enfoque: ahora tenga un componente llamado «Tarjeta» en su App.js. vamos a utilizar este componente más adelante. Este componente Then acepta dos argumentos/datos de «escritor» y «receptor». Luego tenemos una devolución que solo usa estos datos de emisor y receptor y los muestra en una tarjeta. Después de eso, creamos otro componente llamado Aplicación que se usará para contener todos los componentes de nuestra Aplicación. Esta aplicación tiene un valor predeterminado de exportación para que podamos usarla en cualquier lugar de nuestra aplicación React. Por lo tanto, no tenemos que renderizarlo manualmente. Esta aplicación se procesa automáticamente en su index.js al crear una aplicación de reacción usando npx. 

import React from "react";
   
function Card({ receiver, writer }) {
  return (
    <div>
      <h1 style={{ 
          backgroundColor: "lightblue", 
          width: "fit-content" 
      }}>
        GeeksforGeeks 
      </h1>
        
      <h2 style={{ 
          backgroundColor: "lightgrey", 
          width: "fit-content" 
      }}>
        A Computer Science portal for geeks. 
        It contains well written, well 
        thought and well explained computer 
        science and programming articles
      </h2>
        
      <h3>Your truly, {writer}</h3>
    </div>
  );
}
   
export default function App() {
  return (
    <div>
      <Card writer="GFG" receiver="gfg jr" />
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Producción 

Referencias: https://reactjs.org/docs/components-and-props.html