Ejercicios de React

1. Crear un componente Card, que implemente el componente del mismo nombre de

Bootstrap. Atenerse a la siguiente especificación:
a. El componente Card tendrá las “props” necesarias para llenar de contenido el
componente: url de la imagen, título, texto, texto del botón y url para el enlace
del botón.
b. Utilizar las clases CSS de Bootstrap en el componente, para ello se incluirá en
el proyecto los enlaces necesarios para incluir Bootstrap.
c. Configurar una página en la que se inserten tres instancias del componente
Card.

2. Crear un componente ProgressBar, que implemente el componente del mismo

nombre de Bootstrap. Atenerse a la siguiente especificación:
a. El componente ProgressBar tendrá las “props” necesarias para crear una barra
de progreso en base a los siguientes datos: valor del progreso (la escala
siempre será de 0 a 100), color (basado en clase CSS de Bootstrap) y rayada
(valor booleano que hará que la barra de progreso se muestra rayada
“striped”)
b. Utilizar las clases CSS de Bootstrap en el componente, para ello se incluirá en
el proyecto los enlaces necesarios para incluir Bootstrap.
c. Configurar una página en la que se inserten tres instancias del componente
ProgressBar.

3. Crear un componente NavBar , que implemente el componente de barra de

navegación de Bootstrap. Atenerse a la siguiente especificación:
a. Diseñe primero el componente NavItem, que tendrá como “prop” un objeto
del siguiente estilo:

{ url: "enlace de la opción de menú",

titulo: "titulo de la opción de menú"}

b. Diseñe después el componente NavItemDropdown, que tendrá como “props”:

un array cuyo primer elemento es el título del menú desplegable y
posteriormente varias opciones de menú en forma de objetros:

[ "título del desplegable",

{ url: "enlace de la opción de menú 1",
titulo: "titulo de la opción de menú 1"},
{ url: "enlace de la opción de menú 2",
titulo: "titulo de la opción de menú 2"}, … ]

c. Por último, diseñe después el componente NavBar que recibirá como “prop”
un array que contendrá objetos para opciones de menú individuales y arrays
para menús dropdown.
d. Utilizar las clases CSS de Bootstrap en el componente, para ello se incluirá en
el proyecto los enlaces necesarios para incluir Bootstrap. También se debe
incluir el enlace a la librería de JS de Bootstrap para que funcionen los menús
desplegables.
 e. Configurar una página en la que se inserten un componente NavBar que
contenga tres opciones de menú simples y dos menús desplegables con dos
opciones cada uno.

4. Crear un componente Select, que implemente el componente del mismo nombre de

Bootstrap. Atenerse a la siguiente especificación:
a. El componente Select tendrá la “prop” necesaria para llenar de contenido el
componente. Se utilizará para ello un objeto con la siguiente estructura:

{ name: "texto propiedad name-id",

options: [ { value: 1,
text: "texto opción 1"},
{ value: 2,
text: "texto opción 2"}
]
}
b. Utilizar las clases CSS de Bootstrap en el componente, para ello se incluirá en
el proyecto los enlaces necesarios para incluir Bootstrap.
c. Configurar una página en la que se inserten dos instancias del componente
Select, cada uno con tres opciones.

5. Crear un componente MultiCheck según la siguiente especificación:

a. Definir un componente básico Checkbox con los siguientes “props”: name (id),
text, value y manejador.
b. El “prop” manejador corresponderá a una función del componente Multicheck
que procesará el evento onChange da cada Checkbox.
c. El componente Multicheck define un conjunto de Checkbox de los cuales se
podrá marcar un máximo de ellos.
d. El componente tendrá los siguientes “props”:
i. maxcheck: valor que indicará el número máximo de Checkbox que se
pueden marcar del conjunto.
ii. checkboxes: array de objetos con los valores necesarios para generar
los distintos checkboxes.
e. Se definirá una variable de estado que cuente cuantos Checkbox están
marcados.
f. Se definirá la función manejadorCheckbox que procesará el evento onChange
de todos los componentes Checkbox. En dicha función se debe controlar
cuantos Checkbox están marcados y permitirá que se marque o no el
Checkbox que provoca el evento. Es decir, si el máximo de Checkbox
marcardos es tres y se pulsa para chequear un cuarto Checkbox este no se
marcará.
g. El componente Multicheck también incluirá un texto, debajo de los Checkbox,
que informe del máximo de Checkbox que se pueden marcar. El texto podría
ser como este: “Se pueden marcar cómo máximo N opciones”, donde N
corresponde al valor del “prop” maxcheck