Do React para o Next.JS
Vamos para mais um post, vamos subir a barra e agora do react dar um pulo diretamente para o NextJS.
Sendo desenvolvedor a um tempo, o Next foi uma revelação. Além de possuir tudo o que um Dev javascript precisa ele também tem uma curva perfeita para sua aprendizagem. E para você que seguiu os 5 posts onde passo um pouco do React vamos agora dar aquele salto em direção ao NextJS.
⚠️ Se você não viu os posts pode visualizar eles por aqui ⚠️
⚠️ Para nosso post você precisa ter o vscode instalado aqui ⚠️
A primeira coisa que vamos fazer criar uma pasta e adicionar o código inteiro do último post, que deve ser algo como abaixo:
<html><head><style>.post-component{text-align: center;}.post-header-component{display: flex;justify-content: center;}.user-name-description,.post-description-component{padding-left: 9px;padding-top: 9px;}</style></head><body><div id="instagramPostApp"></div><script src="https://unpkg.com/react@17/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script><!-- Babel Script --><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script type="text/jsx">const instagramPostApp = document.getElementById("instagramPostApp")function AvatarImage() {return <img src="https://posts-decriptando.s3.amazonaws.com/post-instagram-component/256-512.webp" width="75" />}function Username({username}) {return <span><strong>{username ? username : 'Default Username'}</strong></span>}function UserDescription() {return <p><small>Lorem ipsum summet</small></p>}function PostImage() {return <img src="https://posts-decriptando.s3.amazonaws.com/post-instagram-component/istockphoto-1226328537-170667a.jpeg" />}function PostDescription() {return <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus...</span>}function PostComponent(props) {
const [ likes, setLikes ] = React.useState(0);function handleClick(){setLikes( likes + 1 )}return (<div class="post-component"><div class="post-header-component"><div class="user-avatar"><AvatarImage /></div ><div class="user-name-description"><Username username={props.username} /><UserDescription /></div ></div ><div class="post-body-component"><PostImage /></div ><button onClick={handleClick}>❤️ ( {likes} ) </button><div class="post-description-component"><Username username={props.username} />: <PostDescription /></div ></div >)}function BodyComponent() {const aPosts = [{username: "José da Silva"},{username: "Roberto Pereira"},{username: "Manuel Martins"}];return (<div class="body-component">{aPosts.map(oPost => (<PostComponent key={oPost.username} username={oPost.username} />))}</div >)}ReactDOM.render(<BodyComponent/>, instagramPostApp)</script></body></html>
Então agora temos nossa base para trabalhar, e nossa pasta agora deve estar da seguinte maneira.
Contendo nossa pasta principal e nosso arquivo index.html.
E agora a melhor coisa seria você abrir o seu VSCode em seu computador ou então utilizar um terminal qualquer.
1 - Dentro da pasta de nosso código vamos rodar o seguinte comando:
$ npm install react react-dom next
E agora nossa pasta deve ter ficado da seguinte maneira:
2 - Vamos abrir nosso arquivo index.html, vamos agora realizar algumas coisas em nosso arquivo.
- Vamos deletar dele tudo o que não estiver dentro do <script type="text/jsx">...</script>, inclusive a tag script, e as funcionalidades de Render, State e document.
- Vamos adicionar o import do React, pois agora que utilizamos o npm podemos adicionar o react através de import.
- E por último porém não menos importante adicionar o "export default" ao nosso componente principal do React para ajudar o Next.js a distinguir qual componente renderizar como o componente principal desta página.
Nosso arquivo deve ficar como abaixo agora:
import { useState } from 'react'function AvatarImage() {return <img src="https://posts-decriptando.s3.amazonaws.com/post-instagram-component/256-512.webp" width="75" />}function Username({username}) {return <span><strong>{username ? username : 'Default Username'}</strong></span>}function UserDescription() {return <p><small>Lorem ipsum summet</small></p>}function PostImage() {return <img src="https://posts-decriptando.s3.amazonaws.com/post-instagram-component/istockphoto-1226328537-170667a.jpeg" />}function PostDescription() {return <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus...</span>}function PostComponent(props) {
const [ likes, setLikes ] = useState(0);function handleClick(){setLikes( likes + 1 )}return (<div className="post-component"><div className="post-header-component"><div className="user-avatar"><AvatarImage /></div ><div className="user-name-description"><Username username={props.username} /><UserDescription /></div ></div ><div className="post-body-component"><PostImage /></div ><button onClick={handleClick}>❤️ ( {likes} ) </button><div className="post-description-component"><Username username={props.username} />: <PostDescription /></div ></div >)}export default function BodyComponent() {const aPosts = [{username: "José da Silva"},{username: "Roberto Pereira"},{username: "Manuel Martins"}];return (<div className="body-component">{aPosts.map(oPost => (<PostComponent key={oPost.username} username={oPost.username} />))}</div >)}
3 - Agora vamos criar uma nova pasta pages e mover nosso arquivo index.html, mas vamos mudar o nome dele para index.jsx, e ficamos com a estrutura de pastas como abaixo:
4 - E agora para o nosso grande finale vamos editar o nosso arquivo package.json, vamos adicionar um script para rodar o next, e nosso arquivo deve ficar da seguinte maneira:
{ "scripts": {"dev": "next dev"},"dependencies": { "next": "^12.1.0", "react": "^17.0.2", "react-dom": "^17.0.2" } }
Agora tudo que precisamos fazer é rodar nosso script, com o seguinte comando no terminal.
$ npm run dev
E então o resultado do comando é indicando para nós que podemos testar em localhost:3000
Parabéns por conquistar um novo nível se chegou até aqui.
Comentários
Postar um comentário