valencia12

Las pruebas son importantes.

Tip, Si las pruebas unitarias no estan hechas, hay que hacer la ruta critica... Es decir entrar 
a la funcionabilidad de la aplicacion.

¿Qué veremos en esta sección?
Introducción a las pruebas
-AAA
-Arrange - Arreglar
-Act - Actuar

valencia12

Que es un componente en react?
Un componente en react es un fragmento de codigo o la parte de un 
elmento que puede tener estado o no.

//Se puede Dejar sin import pero tiene que estar dentro de un fragmento
//Para poder retornar muchos componentes dentro de la primera App
//Se tiene que englobar los componentes hijos dentro de un fragmetn <></>
//FC 
//Adentro de las {}Se puede colocar cualquier varibale de JS
//Boleanos no los imprime

valencia12

Que es react?
-Es una libreria que nos permite crear aplicaciones.
-React Esta hecho para aplicaciones robustas y sencillas
-Declarativa se facilita seguir patrones de diseño
-Eficiente cuando el cambio impacta en el dom, rederiza de manera Eficiente
-Predecible
-Componente pequeñas partes encapsuladas que puede tener un estado o no. Esto permite tener el codiog limpio o sencillo 
-Por la parte de servidor con Node
-Aplicaciones móviles con React Native

valencia12

import React from "react";
import styles from "./button.module.css";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "outline";
  colorVariable?:
    | "primary"
    | "secondary"
    | "success"
    | "tertiary"

valencia12

:root {
    --primary: #36393f;
    --secondary: mediumseagreen;
    --tertiary: rgb(32,34,37);
    --quaternary: #292b2f;
    --quinary: #393d42;
    --danger: #ff0000;
    --danger-hover: #960000;
    --warning: #ff9f00;
    --warning-hover: #b46f00;

valencia12

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

valencia12

import React, { CSSProperties } from 'react';

const style: CSSProperties = {
    backgroundColor: 'var(--secondary)',
    height: 50,
    width: '100%',
    display: 'flex',
    position: 'fixed',
    justifyContent: 'flex-end',
    alignItems: 'center',

valencia12

import React, { CSSProperties } from 'react';

const style: CSSProperties = {
    backgroundColor: 'var(--secondary)',
    height: 50,
    width: '100%',
    display: 'flex',
    position: 'sticky',
    top: 0,
    left: 0,