De React a Next.js
Hasta ahora, hemos explorado cómo puedes comenzar con React. Este es el aspecto que tenía el código final. Si estás comenzando desde aquí, pega este código en un archivo index.html en tu editor de código.
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById("app")
function Header({ title }) {
return <h1>{title ? title : "Default title"}</h1>
}
function HomePage() {
const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
const [likes, setLikes] = React.useState(0)
function handleClick() {
setLikes(likes + 1)
}
return (
<div>
<Header title="Develop. Preview. Ship." />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div>
)
}
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);
</script>
</body>
</html>En los últimos capítulos, se te presentaron tres conceptos esenciales de React: componentes, props y estado. Tener una base sólida en estos conceptos te ayudará a comenzar a construir aplicaciones con React.
Cuando se trata de aprender React, la mejor manera de aprender es construyendo. Puedes adoptar React gradualmente usando <script> y lo que has aprendido hasta ahora para agregar pequeños componentes a un sitio web existente. Sin embargo, muchos desarrolladores han encontrado que la experiencia de usuario y desarrollador que permite React es lo suficientemente valiosa como para sumergirse de lleno y escribir toda su aplicación frontend en React.
De React a Next.js
Si bien React sobresale en la construcción de interfaces de usuario, se requiere cierto trabajo para convertir esa interfaz en una aplicación completamente funcional y escalable. También hay características más nuevas de React, como los Componentes de Servidor y Cliente, que requieren un framework. La buena noticia es que Next.js maneja gran parte de la configuración y tiene características adicionales para ayudarte a construir aplicaciones con React.
A continuación, migraremos el ejemplo de React a Next.js, discutiremos cómo funciona Next.js y te presentaremos las diferencias entre los Componentes de Servidor y Cliente.