Frameworks sobre frameworks: Next.js

Hagan un curso de Nuxt porfa!!! En Platzi hay curso de:

• Next (React):
  https://platzi.com/clases/next/

• Y próximamente sacarán de Nest (Angular):
  https://platzi.com/clases/nestjs/

• Incluso hay de Gatsby (React también):
  https://platzi.com/clases/gatsby/

• De Nuxt solo hay 3 clases en un curso de Vue algo viejo, Platzi se ha enfocado mucho en React y ahora están sacando contenido para Angular pero casi nada para Vue 😫😪

Next Vs Nuxt

Next.js es un framework que usa React.js para las vistas.
Nuxt.js es un framework que usa Vue.js para las vistas.

Form.js

import React from "react";
import Link from "next/link";

export default function Form(props) {
  const [quantity, setQuantity] = React.useState(0);
  const { movie } = props;

  return (
    <form>
      <h3>{movie.name}</h3>
      <button
        type="button"
        onClick={() => setQuantity(quantity - 1)}
        disabled={quantity <= 0}
      >
        -
      </button>
      {quantity}
      <button
        type="button"
        onClick={() => setQuantity(quantity + 1)}
        disabled={quantity >= movie.available}
      >
        +
      </button>
      <Link href={{ pathname: "pay", query: { name: movie.name, quantity } }}>
        <a>Pagar</a>
      </Link>
    </form>
  );
}

movies.js

import Form from "./../components/Form";
import Link from "next/link";

const movies = [
  { name: "Avengers", available: 5, quaantity: 0 },
  { name: "Wonder Woman", available: 15, quaantity: 0 }
];

export default function MoviePage() {
  return (
    <div>
      <Link href="/">
        <a>Home</a>
      </Link>
      <h2>Peliculas</h2>
      {movies.map((movie) => (
        <Form key={movie.name} movie={movie} />
      ))}
    </div>
  );
}

Hagan un curso de Nuxt porfa!!

Platzi se ha enfocado mucho en React y ahora están sacando contenido para Angular pero casi nada para Vue
😥

Mis Apuntes

En esta clase se trabajo con el framework llamado Next.js tambien conocido como el framework completo que utiliza react para la capa de vistas.

• En code sanbox se creo un nuevo template con next.js

• Esperar a que se cree el template ya que ahora tambien viene un servidor ya no solo archivos estaticos.

• Se borro la carpeta day, se creo el archivo pay.js y se renombro el archivo about.js por movies.js

• En index.js se creo una etiqueta <p> para indicar que es un sitio para comprar boletos de peliculas.

• En index.js se agrego el componente <link> para redireccionar a la página de movies.js

import Link from "next/link";

export default function IndexPage() {
  return (
    <div>
      <p>Este es un sitio para comprar boletos de tus películas favoritas</p>
      <Link href="movies">
        <a>Ir a comprar pelis</a>
      </Link>
    </div>
  );
}

• En movies.js se copio el código de clases anteriores de películas.
• Se creo la carpeta components y el archivo Form.js
• Se copio el código del componente Form de clases anteriores al archivo Form.js
• En movies.js se importo el componente Form

import Link from "next/link";
import { useRouter } from "next/router";

export default function PayPage() {
  const { query } = useRouter();

  return (
    <div>
      <p>
        Compraste {query.quantity} boletos de la película {query.name}
      </p>
      <Link href="movies">
        <a>Devolernos</a>
      </Link>
    </div>
  );
}

• En pay.js se importo el componente Link
• En Form.js se importo el componente Link
• En movies.js importar el componente Link y crear el siguiente link

<Link href="/">
	<a>Atrás</a>
</Link>

• En Form.js se módifica la ruta para pasar información dinámica a la página de pay.js

  <Link href={{ pathname: "pay", query: { name: movie.name, quantity } }}>
          <a>Pagar</a>
        </Link>
  

• En pay.js se importo el useRouter de next.js

• En pay.js se creo la constante query

const { query } = useRouter();

• En pay.js para mostrar la cantidad de boletos y nombre de la pelicula se realiza asi:

<p>Compraste {query.quantity} 
boletos de la película {query.name}</p>

pay.js

import Link from "next/link";
import { useRouter } from "next/router";

export default function PayPage() {
  const { query } = useRouter();

  return (
    <div>
      <p>
        Compraste {query.quantity} boletos de la pelicula {query.name}
      </p>
      <Link href="movies">
        <a>Devolvernos</a>
      </Link>
    </div>
  );
}

El componente Link ya genera una etiqueta <a>, así que no es necesario poner una etiqueta <a> como hijo del componente Link.
Acá hay un ejemplo: Ejemplo

no es un framework dentro denotro framework react es una libreria no un framework

index.js

import Link from "next/link";

export default function IndexPage() {
  return (
    <div>
      <p>Este es un sitio para comprar boletos de tus peliculas favoritas</p>
      Hello World.{" "}
      <Link href="/movies">
        <a>Ir a comprar pelis</a>
      </Link>
    </div>
  );
}

que cool quedó:)

dejare mi aporte por aca. solo cree el tema para el Form ya que intente no usar styled components para crear los temas. de la misma manera el tema es local y no global. creo que a futuro voy a crearle un tema oscuro y uno claro para practicar los temas globales.
https://codesandbox.io/s/clase-movies-en-next-js-uo0v1o?file=/pages/movies.js

me saco como mil errores distintos, luego de recargar y recargar… no funciono. Pero cerré chrome, lo volví a abrir, y luego ya si me funciona sin problemas. espero que le sirva a alguien.

next vx nuxt ?

Mis apuntes en Notion💚

Excelente introduccion para aprender react a profundidad!! :OOOO

Hola.
Tengo el problema de que no hay forma humana de que me funciona CodeSandBox con el código de la clase.
Sigo el curso pero sin poder ver los resultados.
No sé si le ocurre a alguien más esto.
Me desanima mucho : (