No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Frameworks sobre frameworks: Next.js

25/28
Recursos

Aportes 18

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

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 ?

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 : (