¿Cómo crear una aplicación Color-Box usando ReactJS?

Básicamente, queremos crear una aplicación que muestre la cantidad de cajas que tienen diferentes colores asignados a cada una de ellas. Cada vez que se carga la aplicación se asignan diferentes colores aleatorios. cuando un usuario hace clic en cualquiera de los cuadros, cambia su color a un color aleatorio diferente que no es igual a su valor de color anterior.

Creamos tres componentes ‘App’ y ‘BoxContainer’ y ‘Box’. El componente de la aplicación representa solo un único componente BoxContainer. No hay una lógica real dentro del componente de la aplicación. El componente BoxContainer contiene todas las lógicas subyacentes. Tiene un accesorio predeterminado ‘num’ que da cuenta de una cantidad de cuadros de colores diferentes que se muestran en la pantalla. Es un componente con estado y tiene un solo estado que contiene una array de valores de color RGB. Mapeamos sobre cada color de los ‘colores’ del estado y para cada color, representamos un componente ‘Box’. El componente de caja es responsable de mostrar cada caja individual con su conjunto de colores apropiado en el fondo de la caja. El componente de cuadro establece un controlador de eventos de clic para cada componente de cuadro y cuando el usuario hace clic en cualquier cuadro, se ejecuta alguna lógica que cambia el color de ese cuadro.

Ejemplo:

• índice.js:

  JavaScript

  import React from 'react' import ReactDOM from 'react-dom' import App from './App'    ReactDOM.render(<App />, document.querySelector('#root'))

• App.js: el   componente de la aplicación representa solo el componente BoxContainer

  JavaScript

  import React from 'react'; import BoxContainer from './BoxContainer'    function App() {   return (     <div className="App">       <BoxContainer />     </div>   ); }    export default App;

• BoxContainer.js:  Contiene toda la lógica detrás. Es un componente con estado. Hay un solo estado que contiene una array de valores de color RGB. número de colores (número de cuadros de color que se quieren representar cuando se inicia la aplicación) establecidos como accesorios predeterminados. Mapeamos sobre cada color de los colores del estado y para cada color, representamos un componente de ‘Cuadro’. El componente BoxConatiner también contiene un método changeColor que es responsable de cambiar el color del cuadro, cada vez que se hace clic en un cuadro. Genera un nuevo color aleatorio hasta que el nuevo valor de color no es igual al color anterior del cuadro y actualiza los colores de estado insertando ese nuevo color en lugar del valor de color anterior.

  JavaScript

  import React,{ Component } from 'react' import './BoxContainer.css' import Box from './Box' import { rgbValue, generateColors } from './helpers'    class BoxContainer extends Component{      // Number of color boxes want shows by default   static defaultProps = {     num : 18   }   constructor(props){     super(props)     this.state = {              // Color state contains array of rgb color values       colors : generateColors(this.props.num)     }     this.changeColor = this.changeColor.bind(this)   }      changeColor(c){          // Create new random rgb color     let newColor     do{       newColor = `rgb(         ${rgbValue()},         ${rgbValue()},         ${rgbValue()}       )`              // If new rgb color is equal to previous      // color of the box then again create new      // rgb color value     }while(newColor === c)        // Change colors array state by inserting      // new color value in place of previous color     this.setState(st => ({       colors : st.colors.map(color => {         if(color !== c) return color         return newColor       })     }))   }      render(){      return(       <div className='BoxContainer'>         {this.state.colors.map(color => (                      // For each color make a box component           <Box color={color} changeColor={this.changeColor}/>         ))}       </div>     )   } }    export default BoxContainer

• Coin.js: Es responsable de mostrar cada cuadro con su color adecuado establecido en el fondo. También establece un controlador de clics para cada componente div y ejecuta una devolución de llamada cada vez que el usuario hace clic en el cuadro. La devolución de llamada del controlador de clics a cambio llama al método changeColor del componente BoxContainer pasando el color actual del cuadro. El componente BoxContainer se comunica con el componente Coin mediante el sistema de accesorios.

  JavaScript

  import React,{ Component } from 'react'    class Box extends Component{   constructor(props){     super(props)     this.handleChangeColor = this.handleChangeColor.bind(this)   }      // Handler callback   handleChangeColor(){          // Call parent component cahngeColor  method passing the     // color value of div     this.props.changeColor(this.props.color)   }      render(){          // Create a div component and assign the given      / color value by BoxContainer component as its     // background color     return <div            // Set click handler to the div and pass a callback       onClick={this.handleChangeColor}        style={{backgroundColor:this.props.color,                    width:'13em', height:'13em'}}      />   } }    export default Box

• helper.js: crea y devuelve alguna función auxiliar que se utiliza en nuestros componentes principales.

  JavaScript

  // Method return a random number from 0 to 255  const rgbValue =() => {   return Math.floor(Math.random() * 256) }    // Method generates an array of rgb colors const generateColors = (num) => {   let colors = []        for(let i=0; i<num; i++){     const red = rgbValue()     const blue = rgbValue()     const green = rgbValue()     colors.push(`rgb(${red},${blue},${green})`)   }   return colors }    export { rgbValue, generateColors }

• CajaContenedor.css :

  CSS

  .BoxContainer{   display:flex;   flex-wrap:wrap;   justify-content: center;   align-items: center;   flex:1 }

Producción :

Caja de color