javiervaleriano/reusable-button-component

devChallenges challenge that consists of recreating the template of a reusable button.

Componente de botón | Button component

Solución para un desafío de Devchallenges.io. | Solution for a challenge from Devchallenges.io.

Demo | Solución / Solution | Desafío | Challenge

Table of Contents

• Visión general | Overview
  • Construido con | Built With
• Características | Features
• Cómo usar | How to use
• Contacto | Contact

Visión general | Overview

Escritorio | Desktop

Móvil | Mobile

lang="es": Hola, persona que está viendo mi proyecto. Aquí puedes ver la demo de mi solución. Este desafío fue una buena experiencia para empezar a aplicar los conocimientos del desarrollo front-end con librerías y empezar a conocer cómo puede funcionar la reutilización de componentes a nivel de código.

Justamente, este proyecto me ayudó a mejorar mi capacidad de reutilizar componentes y de qué forma, aparte de mantener los estilos de cada componente bien definidos para que no existan confusiones. Literalmente solo hay un componente de botón definido en el código.

lang="en": Hello, person who is viewing my project. Here you can see the demo of my solution. This challenge was a good experience to start applying the knowledge of front-end development with libraries and start to know how component reuse can work at code level.

Precisely, this project helped me to improve my ability to reuse components and in what way, apart from keeping the styles of each component well defined so that there is no confusion. There is literally only one button component defined in the code.

Construido con | Built With

• React

Características | Features

lang="es": Esta aplicación/sitio se creó como una entrega a un desafío de Devchallenges. El desafío fue crear una página para completar las historias de usuario dadas:

lang="en": This application/site was created as a submission to a DevChallenges challenge. The challenge was to build a page to complete the given user stories.

• User story: Puedo ver diferentes tipos de botones: default, outline y text | I can see different button types: default, outline and text

• User story: Puedo elegir deshabilitar la sombra | I can choose to disable box-shadow

• User story: Puedo elegir deshabilitar el botón | I can choose to disable the button

• User story: Puedo elegir tener un ícono a la izquierda o a la derecha | I can choose to have an icon on the left or right

• User story: Puedo tener diferentes tamaños de botones | I can have different button sizes

• User story: Puedo tener colores diferentes | I can have different colors

• User story: Cuando paso por encima o enfoco el botón, puedo ver indicadores visuales | When I hover or focus, I can see visual indicators

• User story: Aún puedo acceder a todos los atributos del botón | I can still access all button attributes.

Cómo usar | How To Use

lang="es": Para clonar y ejecutar esta aplicación, necesitarás Git y Node.js (que viene con npm) instalados en tu ordenador. Desde tu línea de comandos:

# Clone this repository
$ git clone https://github.com/your-user-name/your-project-name

# Install dependencies
$ npm install

# Run the app
$ npm start

lang="en": To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/your-user-name/your-project-name

# Install dependencies
$ npm install

# Run the app
$ npm start

Contacto | Contact

• Sitio web | Website
• Codepen @javiervaleriano
• Devchallenges.io
• GitHub @javiervaleriano
• Twitter @javaleriano2