Explorar los componentes de Jutro en la documentación

En esta misión de aprendizaje, aprenderá sobre los componentes de Jutro, qué puede hacer con ellos y cómo navegar por la documentación de nuestros componentes.

¿Qué son los componentes de Jutro?

• Los componentes básicos más detallados de las aplicaciones basadas en Jutro.
• Es posible combinarlos con otros componentes para hacer componentes más grandes (como un formulario).
• Tienen la mayor flexibilidad y la menor coherencia.

Ejemplos: selectores numéricos (steppers), conmutadores, campos de formulario, botones, tarjetas.

¿Cómo se documentan los componentes?

La sección de componentes incluye todos los componentes de Jutro de nuestra documentación. La barra lateral izquierda contiene enlaces a componentes, y algunos componentes relacionados están agrupados en una categoría.

Note: Algunos encabezados de categoría enlazan a páginas con detalles compartidos sobre páginas secundarias. Haga clic en el nombre de la categoría para comprobar si es un enlace a una página.

Cada página de componente se divide en pestañas que incluyen ejemplos, pautas de uso, información general sobre el código y registro de cambios. Las pestañas de ejemplos y código incluirán código JSX que puede utilizar en sus propias aplicaciones.

¿Qué es JSX?

JSX es una extensión de sintaxis de JavaScript. Facilita la incrustación de objetos JavaScript en elementos HTML.

Para obtener más información sobre JSX, consulte el sitio web de React.

Actividad: explorar la documentación de los componentes

Realice los siguientes ejercicios para aprender a trabajar con la documentación de los componentes.

Estos ejercicios le enseñan a buscar propiedades de componentes y a escribir JSX para usar en su aplicación.

Entrada de texto

1. Vaya a la página del componente TextInput.
2. Seleccione la pestaña Ejemplos y copie la entrada básica en su aplicación.

   
3. Edite estos valores y vea cómo cambian en su aplicación.
4. Seleccione la pestaña Código y desplácese hasta la sección Propiedades.
5. Busque la propiedad utilizada para agregar un valor inicial a una TextInput.
6. Agregue un valor inicial al componente TextInput en la aplicación.

Selección

1. Busque la página de Select en el panel de navegación izquierdo.

Note: Recordatorio

Recuerde que algunas páginas están vinculadas en categorías.

2. Seleccione la pestaña Ejemplos y copie el ejemplo de Con un valor inicial en su aplicación.

   
3. Edite estos valores y vea cómo cambian en su aplicación.
4. Seleccione la pestaña Código y desplácese hasta la sección Propiedades.
5. Busque la propiedad utilizada para cambiar la posición del rótulo en un componente selección.
6. Mueva la posición del rótulo del componente selección en la aplicación.

Cómo profundizar sus conocimientos

Además de proporcionar todos los recursos que se necesitan para configurar componentes, nuestra documentación incluye pautas para trabajar con composiciones y disposiciones de cuadrícula, incluidas las de columna simple, doble y triple.

Para obtener más información, consulte la documentación sobre la composición y disposición de cuadrícula.