• Se mueve al nuevo proyecto create, se instala las dependencias y se pone a correr el proyecto

npm create vite@latest
cd nombredelProyecto
npm install
npm run dev

npm i -D tailwindcss postcss autoprefixer

• El resultado crea dos archivos (tailwindcss.config, postcss.config)

npx tailwindcss init -p

• Se modifica content para indicar donde se encuentran los archivos con estilos de tailwind en el proyecto

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• Se incluyen referencias de tailwindcss

@tailwind base;
@tailwind components;
@tailwind utilities;

• Al agregar una clase de tailwind de estilos para verificar su funcionamiento desde un componente como App.jsx se debe agregar Name a la palabra reservada de html para class, creadon asi className debido a que la palabra class en si ya es reservada para javascript y genera conflictos

function App() {

  return (
    <h1 className="text-6xl">Hola Mundo</h1>
  )
}

export default App

• Contiene todas las dependencias instaladas por medio de npm

• Es donde se guardan las imagenes, videos, hojas de estilos que se quieren utilizar en el proyecto

• Donde se escribe el codigo como funciones, componentes, hojas de estilos, o como el assets que contiene el logotipo de react
• Se elimina el archivo de App.css debido a que en este proyecto se trabaja con TailwindCSS
• Se elimina los defaults de index.css
• Se elimina la carpeta de assets

• Se ha eliminado gran parte del default para solo dejar
• App.jsx es un componente, los cuales son funciones que se empiezan su nombre en mayuscula por regla general

function App() {

  return (
    <h1>Hola Mundo</h1>
  )
}

export default App

• Es el archivo principal, se encarga de importar react, montarlo en el html y de agregar todos los componentes. Archivo mas importante en react

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

• En Vscode hay muchas extensiones que ya traen snippets de react, pero en doom emacs al parecer hay que empezar a crear nuestros propios snippets, un recordario de como se hace

1. Alt + x
2. yas-new-snippet
3. Write the snippet like in this example:

# key: mq
# name: @media
# --
@media ( ${1:min}-width: ${2} ){
    `%`$0
}

• Es la fuente de la verdad (source of truth) de tu app
• Un listado de clientes, un carrito de compras lleno o vacio, un usuario autenticado, es lo que determina cual es el estado o state de tu app
• Para definir el state en react, se importa useState y la funcion al momento de utilizarse nos retorna 2 valores: state y la funcion que modifica el state

• useState es recomendado para pequeños proyectos en React
• el State no debe modificarse directamente; para eso se utiliza la funcion que lo modifica
• Para proyectos grandes se recomiendo administrar el state con un state global como Context, Zustand, Recoil o Redux

function App() {

  // Defino el state
  const [cantidad, setCantidad] = useState(10000);
  console.log(cantidad);
  // para modificar el state se usa la funcion setCantidad

  return (
    <div className="my-20 max-w-lg mx-auto bg-white shadow p-10">

      <Header/>

      <input
        type="range"
        className="w-full h-6 bg-gray-200 accent-lime-500 hover:accent-lime-600"
      />

    </div>
  )
}

• Todas las aplicaciones requieren eventos: cuando un usuario escribe en un campo, realiza un submit del formulario, click en un elemento
• En react los eventos inician con la palabra “on” seguido del nombre del evento en mayuscula: onClick, onSubmit, onChange
• Los eventos son agregados via atributo en el codigo html
• Por convencion a la funcion encargada de manejar el evento inicia con la palabra handle seguido del nombre del evento, en este caso seria handleChange

function App() {

  const [cantidad, setCantidad] = useState(10000);

  function handleChange(e) {
    console.log(Number(e.target.value))
  }

  return (
    <div className="my-20 max-w-lg mx-auto bg-white shadow p-10">

      <Header/>

      <input
        type="range"
        className="w-full h-6 bg-gray-200 accent-lime-500 hover:accent-lime-600"
        onChange={handleChange}
      />

    </div>
  )
}

• Es un hook que se ejecuta una vez que el componente este listo, y toma un array de dependencias
• En dicho arreglo se le puede pasar un state de manera que este a la escucha de los cambios que ejecutan en el state, en caso de que el state se actualice, este useState se ejecuta nuevamente
• Es recomendable siempre crear varios useEffect en vez de crear un solo useEffect muy grande que requiere muchos parametros en el arreglo. Lo ideal serian maximo 2 parametros en el arreglo

// Cada vez que cantidad cambie, este useEffect se va a ejecutar. Se ejecuta al menos una vez
useEffect(() => {
    const resultadoTotalPagar = calcularTotalPagar(cantidad, meses);
    setTotal(resultadoTotalPagar);
}, [cantidad, meses]);