wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

React-Estilos

Total questions: 9

Worksheet time: 5mins

Name
Class
Date
1.

¿A qué hacen referencia cada una de las 3 partes que componen el nombre de la clase?


<button class="Button_button_2grrNP"></button>

a)

Nombre de la clase - nombre del componente - identificador

b)

Nombre del componente - nombre de la clase - identificador

c)

Nombre del módulo - nombre de la clase - identificador

d)

Nombre de la clase - nombre del módulo - identificador

e)

Nombre del archivo - nombre del módulo - identificador

2.

¿Qué formato tienen las propiedades del objeto aceptado por el atributo style?

a)

camelCase

b)

lowercase

c)

uppercase

d)

UpperCamelCase

e)

BumpyCase

3.

¿Cuáles de las siguientes características corresponden a Css Modules?

a)

Podemos usarlo 'out-of-the-box' con create-react-app

b)

Las animaciones tienen un alcance local de forma predeterminada

c)

Los nombres de clases tienen un alcance local de forma predeterminada

d)

No necesita ser compilado

e)

Los estilos son en cascada y pasan de componentes padres a hijos

4.

¿Qué diferencia hay entre los keywords class y className?

a)

class es la forma antigua de dar estilos en React y className se utiliza en versiones actuales

b)

className esta reservado en React y no se utiliza para dar estilos

c)

className solo se utiliza para dar estilos inline y el uso de class es indistinto

d)

className no funciona con versiones anteriores de React

e)

class esta reservado en Javascript y no se utiliza para dar estilos.

5.

¿Cómo se denomina la siguiente forma de dar estilos a un componente?


function HelloWorldComponent() {

return <div className='activado'>Hello World!</div>;

}

a)

Inline

b)

Css modules

c)

kebab-case

d)

Grid

e)

Class

6.

¿Cómo se denomina la siguiente forma de dar estilos a un componente?


const divStyle = {

color: 'blue',

backgroundImage: 'url(' + imgUrl + ')',

};


function HelloWorldComponent() {

return <div style={divStyle}>Hello World!</div>;

}

a)

kebab-case

b)

Grid

c)

Inline

d)

Block

e)

Class

7.

¿Cuáles son las modalidades que tengo de añadir estilos en React?

a)

Global style

b)

Todas son correctas

c)

Css Modules

d)

Inline style

e)

Flex style

8.

¿Qué recibe el atributo style de un componente?

a)

Un tag html

b)

Un Css string

c)

Un modulo css

d)

Un componente presentacional

e)

Un objeto JS

9.

Cual es la respuesta correcta?

a)

A- B

b)

B- D

c)

C- A

d)

D- C