Tomaremos como punto de partida el ejemplo 01 HelloReact:
Este ejemplo está basado en el siguiente: egghead jsbin, pero añade algunas variaciones
- Renombrar el archivo hello.tsx a colorpicker.tsx.
- Definir las propiedades y el estado.
- Crear la UI.
Instalar Node.js y npm (v6.6.0 ó más reciente) si aún no está instalada en la máquina.
Verificar que tienes node al menos v6.x.x y npm 3.x.x ejecutando
node -vynpm -ven un terminal ó console de windows. Versiones viejas pueden provocar errores.
-
Copiar el contenido de 01 HelloReact y ejecutar
npm install. -
Vamos a definir una estructura apropiada (crea un archivo color.ts).
./src/color.ts
export interface Color {
red : number;
green : number;
blue : number;
}-
Renombramos hello.tsx a colorpicker.tsx.
-
Renombramos también el nombre del componente.
import * as React from 'react';
export const ColorPicker = () => {
return (
<h2>Hello component !</h2>
);
}- Creamos un archivo intermedio app.tsx como hicimos en ejemplos previos:
./src/app.tsx
import * as React from 'react';
import { Color } from './color';
import { ColorPicker } from './colorpicker';
interface State {
color : Color;
}
export class App extends React.Component<{}, State> {
constructor(props) {
super(props);
this.state = {color: {red: 90, green: 50, blue: 70}};
}
setColorState = (newColor : Color) => {
this.setState({color: newColor});
}
public render() {
return (
<div>
<ColorPicker/>
</div>
);
}
}- Necesitamos actualizar main.tsx para indicar los cambios
./src/main.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
- import { HelloComponent } from './hello';
+ import { App } from './app';
ReactDOM.render(
- <HelloComponent />
+ <App />,
document.getElementById('root'));- Vamos a cambiar también el contenido del fichero, definimos un color y un callback como propiedad para establecer el color (colorpicker.tsx).
./src/colorpicker.tsx
import * as React from 'react';
+ import { Color } from './color'
+ interface Props {
+ color : Color;
+ onColorUpdated : (color : Color) => void;
+ }
export const ColorPicker = () => {
return (
<h2>Hello component !</h2>
);
}- Vamos a comenzar solo definiendo un control para el componente rojo de un color dado. (colorpicker.tsx).
./src/colorpicker.tsx
- export const ColorPicker = () => {
+ export const ColorPicker = (props : Props) => {
return (
- <h2>Hello component !</h2>
+ <div>
+ <input type="range"
+ min="0"
+ max="255"
+ value={props.color.red}
+ onChange={(event) => props.onColorUpdated(
+ {red: +event.target.value,
+ green: props.color.green, blue: props.color.blue}
+ )}
+ />
+ {props.color.red}
+ </div>
);
}- Ahora actualizamos el archivo app.tsx para interactuar con las propiedades del componente.
./src/app.tsx
import * as React from 'react';
import { Color } from './color';
import { ColorPicker } from './colorpicker';
interface State {
color : Color;
}
export class App extends React.Component<{}, State> {
constructor(props) {
super(props);
this.state = {color: {red: 90, green: 50, blue: 70}};
}
+ setColorState = (newColor : Color) => {
+ this.setState({color: newColor});
+ }
public render() {
return (
<div>
+ <span>
+ Color: [
+ red: {this.state.color.red},
+ green: {this.state.color.green},
+ blue: {this.state.color.blue}
+ ]
+ </span>
- <ColorPicker/>
+ <ColorPicker
+ color={this.state.color}
+ onColorUpdated={this.setColorState}
+ />
</div>
);
}
}
- Ahora probamos que tenemos el funcionamiento básico correcto.
npm start
- Completamos el componente añadiendo sliders para las opciones de color verde y azul:
Nota: esto parecerá un poco feo, en el siguiente ejemplo vamos a refactorizar y lo haremos una solución más limpia.
./src/colopicker.tsx
export const ColorPicker = (props : Props) => {
return (
<div>
<input type="range"
min="0"
max="255"
value={props.color.red}
onChange={(event) => props.onColorUpdated(
{
red: +event.target.value,
green: props.color.green,
blue: props.color.blue
}
)}
/>
{props.color.red}
+ <br />
+ <input type="range"
+ min="0"
+ max="255"
+ value={props.color.green}
+ onChange={(event) => props.onColorUpdated(
+ {
+ red: props.color.red,
+ green: +event.target.value,
+ blue: props.color.blue
+ }
+ )}
+ />
+ {props.color.green}
+ <br />
+ <input type="range"
+ min="0"
+ max="255"
+ value={props.color.blue}
+ onChange={(event) => props.onColorUpdated(
+ {
+ red: props.color.red,
+ green: props.color.green,
+ blue: +event.target.value
+ }
+ )}
+ />
+ {props.color.blue}
+ <br />
</div>
);
}- Haremos esto un poco más atractivo visualmente, sería una buena idea mostrar un rectángulo relleno con el color seleccionado. Crearemos un componente ColorDisplayer (colordisplayer.tsx).
./src/colordisplayer.tsx
import * as React from 'react';
import { Color } from './color'
interface Props {
color : Color;
}
export const ColorDisplayer = (props : Props) => {
const divStyle : React.CSSProperties = { // React.CSSProperties gives editing-time visual feedback on the CSS you are typing.
width: '11rem',
height: '7rem',
backgroundColor: `rgb(${props.color.red},${props.color.green}, ${props.color.blue})`
};
return (
<div style={divStyle}>
</div>
);
}- Ahora vamos a usarlo dentro de nuestro componente App (app.tsx).
import * as React from 'react';
import {Color} from './color';
import { ColorPicker } from './colorpicker';
+ import { ColorDisplayer } from './colordisplayer';
interface State {
color : Color;
}
export class App extends React.Component<{}, State> {
constructor(props) {
super(props);
this.state = {color: {red: 90, green: 50, blue: 70}};
}
setColorState(newColor : Color) {
this.setState({color: newColor});
}
public render() {
return (
<div>
+ <ColorDisplayer color={this.state.color} />
<span>
Color: [red: {this.state.color.red}, green: {this.state.color.green}, blue: {this.state.color.blue}]
</span>
<ColorPicker color={this.state.color}
onColorUpdated={this.setColorState.bind(this)}
/>
</div>
);
}
}- Ahora a probarlo y ver los resultados!!!
npm start