Iniciando um projeto React usando Nextjs
- #JavaScript
- #React
Olá, seja muito bem vindo(a), no artigo de hoje nós iremos aprender a iniciar um projeto usando Next.js. Após a leitura deste artigo você terá as configurações iniciais prontas para começar o desenvolvimento de um projeto.
Primeiro iremos criar uma pasta no nosso computador e iniciar o prompt de comando nele. Primeiro temos o seguinte comando: yarn init -y, no qual será criado um arquivo package.json automaticamente.
Em seguida usamos o comando yarn add next react react-dom para começar a instalação das dependências para o nosso projeto. Assim que a instalação estiver completa, teremos uma pasta node_modules e um arquivo yarn.lock adicionados ao projeto.
Agora, na nossa pasta, criaremos uma pasta chamada pages e dentro dela colocaremos o nosso arquivo index.js que será o nosso arquivo inicial. Agora iremos realizar um teste para saber se a nossa configuração inicial está correta. No nosso arquivo index.js vamos escrever o seguinte código:
export default function Home() {
return (
<>
<h1>Hello Word!</h1>
</>
)
}
Agora, basta digitarmos o comando npx next dev para rodarmos nossa aplicação em localhost, onde irá aparecer a frase Hello Word na tela. Com tudo certo, já estamos prontos para desenvolver um projeto em Reactjs. No blog ensinei a consumir a API do github usando axios em duas partes:
parte 1: https://programacao-descomplicada.blogspot.com/2022/11/consumindo-api-do-github-usando-o-axios.html
Você pode começar por aqui, nos próximos artigos iremos refazer nosso projeto de e-commerce usando Reactjs, nosso foco será apenas a tela inicial para entendermos sobre componentização, usarmos CSS no JavaScript. Vou ficar por aqui, um abraço e até a próxima.
Artigo Original: https://programacao-descomplicada.blogspot.com/2022/11/iniciando-um-projeto-react-usando-nextjs.html
