A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Frameworks sobre frameworks: Next.js

25/28
Recursos

Aportes 12

Preguntas 5

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

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

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>
  );
}

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>
  );
}

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
ūüė•

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>
  );
}

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

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

que cool quedó:)

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>

next vx nuxt ?