Tutorial básico Rect

Ejercicio 1. Crear una aplicación básica y agregar estilos con Tailwind

  • 1. Crear el proyecto
npm init vite@latest
√ Project name: ... react-tw2
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
    vue
>   react
? Select a variant: » - Use arrow-keys. Return to submit.
>   react
    react-ts

  • 2. Ejecutar el proyecto
cd react-tw2
npm install
npm run dev

3. Limpiar el proyecto de archivos no necesario

Versión inicialEstructura depurada
La imagen tiene un atributo ALT vacío; su nombre de archivo es image-3.pngLa imagen tiene un atributo ALT vacío; su nombre de archivo es image-8.png
package.jsonpackage.json
index.xtmlindex.xtml
/src/favicon.svg
/src/main.jsx/src/main.jsx
/src/index.css/src/index.css
/src/App.jsx/src/App.jsx
/src/logo.svg
/src/App.css

Actualizar los archivos para que no hagan referencia a los archivos eliminados

index.html
/src/App.jsx

Agregar Tailwind al proyecto

1. Abrir una consola en la ubicación del proyecto, instalar las librerías

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest --save
added 68 packages, and audited 150 packages in 4s
21 packages are looking for funding
run npm fund for details

$ npx tailwindcss init -p
Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

2.- Habilitar Tailwind en el proyecto, editar el archivo tailwind.config.js, modificar la linea content

https://tailwindcss.com/docs/content-configuration

module.exports = {
  content: ["./index.html", "./src/**/*.jsx"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3.- Modificar el archivo index.css, con las siguientes líneas

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

4.- Probar que funciona, editar App.jsx

function App() {
  return (
    <>
      <h1 className="font-black text-4xl text-center md:w-2/3 mx-auto">
        Título
      </h1>
    </>
  )
}

export default App

React Hooks a partir de version 16.8

Los Hooks son funciones.

Permiten usar el estado y otras características de React sin escribir una clase

https://es.reactjs.org/docs/hooks-intro.html

useState

useEffect

useContext

useMemo

useRef

useCallback

Hooks Propios

useState

  • useState es un Hook que agrega un estado local.
  • React mantiene el estado entre re-renderizados.
  • useState se define con: el valor de estado actual y una función que permite actualizarlo.
  • Esta función se puede invocar desde un controlador de eventos o desde otro lugar.
  • El único argumento para useState es el estado inicial.
  • En el ejemplo es 0 porque el contador comienza desde cero.
  • El argumento de estado inicial solo se usa durante el primer renderizado.

Ejemplo, modificar App.jsx

import React, { useState } from 'react';

function App() {
  const [contar, setContar] = useState(0);

  return (
      <h1 className="font-black text-4xl text-center md:w-2/3 mx-auto">
       Título ${contar}<br/>
       <button onClick={() => setContar(contar + 1)}>
          Contar
        </button>
      </h1>
  )
}

export default App

useEffect

  • La función de “efecto” se ejecuta después de vaciar los cambios en el DOM.
  • Los efectos se declaran dentro del componente para que tengan acceso a sus props y estado.
  • De forma predeterminada, React ejecuta los efectos después de cada renderizado — incluyendo el primer renderizado.
  • Los efectos pueden “limpiar” después de ellos devolviendo una función.

Ejemplo, modificar App.jsx

import React, { useState, useEffect } from 'react';

function App() {
  const [contar, setContar] = useState(0);

console.log('log 1')
  useEffect(() => {
    document.title = `Se han contado ${contar} ocasiones`;
    console.log('log 2 - después de renderizasr el DOM')
  });

console.log('log 3')
  return (
      <h1 className="font-black text-4xl text-center md:w-2/3 mx-auto">
       Título ${contar}<br/>
       <button onClick={() => setContar(contar + 1)}>
          Contar
        </button>
      </h1>
  )
}

export default App

Agregar componente formulario

1.- Agregar una carpeta components debajo de src

2.- Crear un archivo Formulario.jsx

3.- Con el shorcut rafc , crear la estructura del componente

import React from 'react'

export const Formulario = () => {
  return (
    <div>Formulario</div>
  )
}Se 

5.- Editar el contenido y agregar el siguiente código

6.- Usarlo desde el componente App.js

import React, { useState, useEffect } from 'react';
import { Formulario } from './components/Formulario';


function App() {
  const [contar, setContar] = useState(0);
  useEffect(() => {
    document.title = `Se han contado ${contar} ocasiones`;

  });

  return (
      <h1 className="font-black text-4xl text-center md:w-2/3 mx-auto">
       Título ${contar}<br/>
       <button onClick={() => setContar(contar + 1)}>
          Contar
        </button>
        <Formulario />
      </h1>
  )
}

export default App

7.- Agregar el siguiente formulario con estilos Tailwind

import React from 'react'

export const Formulario = () => {
    return (
        <div>
            <div className="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
                <form>
                    <div className="form-group mb-6">
                        <label htmlFor="exampleInputEmail1" className="form-label inline-block mb-2 text-gray-700">Correo electrónico</label>
                        <input type="email" className="
                                form-control block w-full px-3 py-1.5
                                text-base font-normal  text-gray-700
                                bg-white bg-clip-padding
                                border border-solid border-gray-300 rounded transition ease-in-out m-0
                                focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
                                id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Tu correo electrónico" />
                        <small  id="emailHelp"
                                className="block mt-1 text-xs text-gray-600">Nunca compartiremos tu correo electrónico con nadie |else.
                        </small>
                    </div>
                    <div className="form-group mb-6">
                        <label htmlFor="exampleInputPassword1"
                               className="form-label inline-block mb-2 text-gray-700">Contraseña</label>
                        <input type="password" 
                               className="
                                form-control block w-full px-3 py-1.5
                                text-base font-normal text-gray-700
                                bg-white bg-clip-padding
                                border border-solid border-gray-300 rounded transition ease-in-out m-0
                                focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" 
                                id="exampleInputPassword1" placeholder="Contraseña" />
                    </div>
                    <div className="form-group form-check mb-6">
                        <input type="checkbox"
                                className="
                                 form-check-input appearance-none h-4 w-4 
                                 border border-gray-300 rounded-sm bg-white
                                 checked:bg-blue-600 checked:border-blue-600 
                                 focus:outline-none transition duration-200 mt-1
                                 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
                                id="exampleCheck1" />
                        <label className="
                                form-check-label inline-block text-gray-800" 
                                htmlFor="exampleCheck1">Seleccionar</label>
                    </div>
                    <button type="submit" className="
                                px-6  py-2.5 bg-blue-600
                                text-white font-medium text-xs leading-tight uppercase
                                rounded shadow-md
                                hover:bg-blue-700 hover:shadow-lg
                                focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
                                active:bg-blue-800 active:shadow-lg
                                transition
                                duration-150
                                ease-in-out">Enviar</button>
                </form>
            </div>
        </div>
    )
}

React Router v6