Componentes funcionales de ReactJS

Los componentes funcionales son algunos de los componentes más comunes que se encontrarán mientras se trabaja en React. Estas son simplemente funciones de JavaScript. Podemos crear un componente funcional para React escribiendo una función de JavaScript. Estas funciones pueden o no recibir datos como parámetros. En los componentes funcionales, el valor devuelto es el código JSX para representar en el árbol DOM.
Ejemplo: Programa para demostrar la creación de componentes funcionales. 

Filepath- src/index.js: Abra el directorio de su proyecto React y edite el archivo index.js de la carpeta src:

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <Demo />
  </React.StrictMode>,
  document.getElementById('root')
);

Filepath- src/App.js: Abra el directorio de su proyecto React y edite el archivo App.js desde la carpeta src:

import React from 'react';
import ReactDOM from 'react-dom';
 
const Demo=()=>
{
  return <h1>Welcome to GeeksforGeeks</h1>;
}
 
export default Demo;

Producción: 

Diferentes formas de llamar al componente funcional:

Podemos llamar a las funciones en java script de otras maneras como sigue:

• Llamar a la función usando el nombre de la función seguido de paréntesis.

import React from 'react';
import ReactDOM from 'react-dom/client';
 
function Parentheses() {
  return ( <h1> As usual we can call the function using name of the function followed by
  Parentheses </h1>);
  }
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(Parentheses());

• Llamar a la función usando el componente funcional

import React from 'react';
import ReactDOM from 'react-dom/client';
 
function Comp() {
  return ( <h1> As usual we can call the function using component call</h1>);
  }
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Comp/>);

Ejemplo: También podemos usar un componente funcional en otro componente. El siguiente programa es para demostrar el uso de componentes funcionales en otros componentes. 

Filepath- src index.js: abra el directorio de su proyecto React y edite el archivo Index.js desde la carpeta src

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <Welcome />
  </React.StrictMode>,
  document.getElementById('root')
);

Filepath- src App.js: abra el directorio de su proyecto React y edite el archivo App.js desde la carpeta src:

import React from 'react';
 
const Welcome=()=>
{
return (
    <h1>Welcome to GeeksforGeeks</h1>
    );
}
 
const functionExample=()=>
{
    return (
    <Welcome/>
    );
}
 
export default functionExample;

Producción: 

Los componentes funcionales carecen de una cantidad significativa de funciones en comparación con los componentes basados ​​en clases . La brecha se completa con la ayuda de un concepto especial de ReactJS llamado «ganchos» . Los ganchos son funciones especiales que permiten que las características de ReactJS se utilicen en componentes funcionales . 

Los componentes funcionales no tienen acceso a variables de estado dedicadas como los componentes basados ​​en clases . El único «estado» al que tiene acceso un componente funcional son los accesorios que se le pasan desde su componente principal. ReactJS tiene acceso a un enlace especial llamado useState() que puede usarse para dar la ilusión de trabajar con el estado en componentes funcionales. El useState() se usa para inicializar solo una variable de estado para inicializar múltiples variables de estado, múltiples useState()se requieren declaraciones. El primer valor devuelto es el valor inicial de la variable de estado, mientras que el segundo valor devuelto es una referencia a la función que lo actualiza. Cuando es necesario actualizar la variable de estado, se puede hacer llamando a la función de actualización y actualizando la variable de estado directamente dentro de ella.
 

Ejemplo: programa para demostrar el uso del gancho useState() .

Filepath- src/index.js: Abra el directorio de su proyecto React y edite el archivo Index.js desde la carpeta src:

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <Example />
  </React.StrictMode>,
  document.getElementById('root')
);

Filepath- src/App.js: Abra el directorio de su proyecto React y edite el archivo App.js desde la carpeta src:

import React, { useState } from 'react';
  
const Example=()=> {
  const [change, setChange] = useState(true);     
      return (
        <div>
        <button onClick = {() => setChange(!change)}>
          Click Here!
        </button>
        {change?<h1>Welcome to GeeksforGeeks</h1>:
                <h1>A Computer Science Portal for Geeks</h1>}
        </div>
        );
  }
 
export default Example;

Producción: 

Los componentes funcionales no tienen acceso a las funciones del ciclo de vida como los componentes basados ​​en clases, ya que las funciones del ciclo de vida deben definirse dentro de los límites de una clase. Si es necesario usar funciones de ciclo de vida con componentes funcionales, se debe usar un gancho especial de React llamado useEffect(). Vale la pena señalar que useEffect() no es un duplicado exacto de las funciones del ciclo de vida: funciona y se comporta de una manera ligeramente diferente.
 

Ejemplo: programa para demostrar el uso del gancho useEffect() .

Filepath- src/index.js: Abra el directorio de su proyecto React y edite el archivo index.js de la carpeta src:

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <Example />
  </React.StrictMode>,
  document.getElementById('root')
);

Filepath- src/App.js: Abra el directorio de su proyecto React y edite el archivo App.js desde la carpeta src:

import React, { useEffect } from 'react';
 
const Example=()=> {
  useEffect(() => {
    console.log("Mounting...");
  });
      return (
      <h1>
        Geeks....!
      </h1>
      );
}
 
export default Example;

Producción:

Los datos se pasan del componente principal a los componentes secundarios en forma de accesorios. ReactJS no permite que un componente modifique sus propios accesorios como regla. La única forma de modificar los accesorios es cambiar los accesorios que se pasan al componente secundario. Esto generalmente se hace pasando una referencia de una función en el componente principal al componente secundario. Los accesorios tienen más importancia en los componentes funcionales por la sencilla razón de que los componentes funcionales no tienen acceso a un estado, a diferencia de los componentes basados ​​en clases.

Ejemplo: Programa para demostrar el uso de props.

Filepatjes- src/index.js: Abra el directorio de su proyecto React y edite el archivo Index.js de la carpeta src:

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <Example />
  </React.StrictMode>,
  document.getElementById('root')
);

Filepath- src/App.js: Abra el directorio de su proyecto React y edite el archivo App.js desde la carpeta src:

import React, { useState } from 'react';
import props from 'prop-types';
 
const Example=()=> {
  return(
    <h1>{props.data}</h1>
    );
    }
    function propsExample()
    {       
    const [change, setChange] = useState(true);
        return (
        <div>
          <button onClick = {() => setChange(!change)}>
            Click Here!
          </button>
          {change?
            <Example data="Welcome to GeeksforGeeks"/>:
            <Example data="A Computer Science Portal for Geeks"/>}
        </div>
        );
    }
 
export default Example;

Producción: