Curso de Next.js 2018

Curso de Next.js 2018

Roberto González

Roberto González

Creando nuestra primera página

3/23
Recursos

Vamos a crear nuestra primera página en Next.js, más que nada para tener una muy buena idea de cómo funciona el router de Next, cómo crear un pequeño componente en React, y sobre todo cómo hacer para crear un buen entorno de desarrollo en un proyecto de Node.
Esto no es solamente para Next, puede aplicar para cualquier proyecto que hagamos en Javascript.

Aportes 27

Preguntas 12

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Usando un componente funcional y Fragment en lugar de div para no enviar cosas de más al navegador se vería así:

import { Fragment } from 'react'

export default () => (
    <Fragment>
        <h1>¡Hola mundo!</h1>
        <p>Bienvenidos al curso de Next.js</p>
    </Fragment>
)

Por lo que veo no es necesario importar React y ReactDOM, pero si es necesario hacerlo con Fragment.

qué diferencia hay entre npm add y npm install?

//Con un sfc podría haber hecho menos código:

const Index = () => (
<h1>¡Hola Platzi!</h1>
);
export default Index;

Usas la clase de React.Component sin importarla, me puedes explicar como puede funcionar eso que tu haces por que normalmente no funciona así,

tendrías que poner al principio, pero yo no veo por ningún sitio eso
una respuesta seria apropiada. Gracias

import React, { PureComponent } from “react”

Si como yo les gusta usar una carpeta src y mantener todo su código ahi pueden pasarle el root directory a next:

"scripts": {
    "dev": "next ./src"
}

De esta manera pueden tener su carpeta pages dentro de src. Obviamente funciona con cualquier ruta no solo con src.

Al ejecutar solo “npm-init” te trae cada valor del objeto del paquete y te hace una serie de preguntas para poder definir cada uno de ellos.

En cambio al agregarle “-y” te trae por default los valores.

Con el curso de React, es mejor usar <Fragment> en lugar de div, esto con el fin de que no se sature la pagina con muchos contenedores.

<<Fragment>
        <h1>¡Hola Platzi!</h1>
        <p>Bienvenidos todos al curso de Next.js</p>
      </Fragment>>

cual es la diferencia de crear un web con next y sin next?

tengo una pregunta y disculpen mi novatada… porque funciona index.js si no estoy importando react ??

Interesante!!! Es hermoso que no se tengan que definir las rutas manualmente ❤️

¿No es mejor usar un “fragment” en vez de un “div”?

si usamos nextjs, no necesitamos webpack?

nvm init -y
Comando para crear el archivo de configuración de un proyecto en Node

Scripts indispensables
dev: Entorno de Desarrollo (livereload, otros)
build y start: Entorno de Producción.

Quizás usar más const que let

buenicima esta clase me gusto mucho y se que se vanza muy rapido

Alabado sea yarn xD

Como soluciono esto!!![

Que gran clase, no conocia Next y por lo que veo es un gran framework, para realizar aplicaciones de todo tipo de tamaños!

Dos tecnologías en un solo curso, Excelente!

Increible el curso muy sencillo de entender 💚

Es decir que con Next también se hacen cosas que se hacen con con webpack?

Es un poco extraño que le funcione la inicialización de proyecto y le renderice el Hola mundo sin importar React en el index…

Arrancamos

😮 no sabia que npm add era un alias de npm install asi como npm i
. Todos los dias se aprende algo. aca mas info. https://docs.npmjs.com/cli/install

export default class extends React.Component{
    render(){
        return (
            <React.Fragment>
<h1>hola perro</h1>
        </React.Fragment>
        
        )
    }
}

Porque si no le agrego

import React from 'react';
import ReactDOM from 'react-dom';

Al ejecutar npm run dev me da el error _“Uncaught ReferenceError: React is not defined” _ y en el video sin estar agregado no da error? Será algún update?