¿Cuáles son algunas de las ventajas del desarrollo dirigido por componentes?

En ReactJS, el desarrollo impulsado por componentes (CDD) es una de las características clave por las que preferimos crear aplicaciones con la ayuda de la biblioteca de reacción. CDD se trata de dividir el contenido de archivos grandes en partes más pequeñas y utilizarlos en múltiples lugares. Hay múltiples beneficios de CDD.  

Estas son algunas de las ventajas del Desarrollo Dirigido por Componentes en React:

• Reutilización: en el desarrollo dirigido por componentes, el proceso de desarrollo está en su lugar, los componentes, una vez creados, se pueden usar fácilmente en tantos módulos como sea necesario. La reutilización ayuda a proporcionar los esfuerzos de desarrollo y el costo en todas las aplicaciones.
• Repetición: una aplicación suele ser una interfaz formada por componentes que se repiten. La repetición en el desarrollo de componentes permite a los desarrolladores mantener y escalar su código a gran escala. La repetición brinda familiaridad que hace que el usuario sienta el diseño simétrico y lo ayuda a tomar decisiones informadas.
• Escalabilidad: el desarrollo impulsado por componentes permite extender los beneficios de una arquitectura modular también al frontend. A medida que la aplicación React escala, se pueden agregar fácilmente más componentes para las funciones sin cambiar la base de código completa.
• Mantenimiento más simple: los modelos de desarrollo dirigido por componentes en ingeniería de software lo mantienen alejado de este tipo de situaciones no deseadas. CDD descompone los archivos frontend en componentes más pequeños y fácilmente manejables que son fáciles de manejar, haciendo que cualquier actualización o modificación se convierta en una tarea sencilla.
• Desarrollo más rápido: Component Driven Development reduce mucho el tiempo de desarrollo, además de la relación con el código base. Con el uso de la biblioteca compartida accesible, los equipos de trabajo ya no necesitan crear soluciones desde cero. Pueden usar componentes de esta biblioteca sin preocuparse por requisitos no funcionales como seguridad, usabilidad, rendimiento, etc.

Veamos un ejemplo de una aplicación ReactJS para demostrar el desarrollo dirigido por componentes.

Creación de la aplicación React

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

npx create-react-app example

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

cd example

Estructura del proyecto : Se verá así.

estructura de carpetas

Paso 3 : Cree los componentes de la carpeta dentro de la carpeta src del directorio del proyecto de reacción y dentro de la carpeta de componentes cree los archivos Button.jsx, Card.jsx y List.jsx.

Implementación: Escriba el siguiente código en index.js, App.js y archivos de carpetas de componentes.

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

import React from 'react'
import Card from './components/Card'
  
const App = () => {
  return (
    <div style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-around',
        marginTop: '20px',
        height: '100vh',
        width : '100vw',
    }}>
        <div>Components based design</div>
        <div style={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-around',
            width: '100%',
            height: '100%',
            marginTop: '20px',
        }}>
            <Card />
            <Card />
            <Card />
            <Card />
        </div>
    </div>
  )
}
  
export default App

import React from 'react'
  
const Button = () => {
  return (
    <div
      style={{
        backgroundColor: 'green',
        color: 'white',
        padding: '10px',
        borderRadius: '5px',
        cursor: 'pointer',
        margin: '10px'
      }}
      onClick={() => alert('Button clicked')}
    >Button</div>
  )
}
  
export default Button

import React from 'react'
import List from './List'
import Button from './Button'
  
const Card = () => {
  return (
    <div style={{
      height: '200px',
      width: '200px',
      backgroundColor: '#f4f4f4',
      borderRadius: '5px',
      margin: '10px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      alignItems: 'center',
      boxShadow: '0px 0px 5px #ccc'
  
    }}>
      <List />
      <Button></Button>
    </div>
  )
}
  
export default Card

import React from 'react'
  
const List = () => {
  return (
    <div>List item</div>
  )
}
  
export default List

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npm start

Producción:

Producción