:react-atom:

Caso queira transformar código html para código JSX:

TRANSFORMADOR

Estrutura Básica do Next JS

public: Pasta aonde ficam os elementos estaticos da aplicação. Os assets

src: A aplicação em si, páginas da aplicação e seus componentes.

eslint.config: parte de padronização de ocdigo e verificação de erros

next-env: o next recompila isso

next-configconfigurações do next js servidor e etc

package.json:padrao

Como Criar e Inicializar um Servidor Next JS

Para executar o projeto inicial, abre o terminal na pasta do projeto e roda o comando.

// Para criar o projeto**:**
npx create-next-app nome-do-projeto
// Para rodar o projeto:
npm run dev

Você vai poder acessar o servidor criado pelo next.js em http://localhost:3000/;

Simples assim! Agora podemos começar a criar e editar nosso aplicativo editando a file src/app/page.tsx page.tsx;

Criando um Component com React

No React a forma principal que você vai trabalhar vai ser criando components, que é basicamente uma peça reutilizavel ao longo do código.

Em vez de criar vários botões, você define um só e quando quiser chamar o botão você coloca só <Botao>

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

e depois de criado você pode colocar esse component (botão) dentro de outro component (a div por exemplo).

function MyButton() { //funcao que retorna um botao
  return (
    <button>
      I'm a button
    </button>
  );
}

export default function MyApp() { //funcao principal do react
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

Esse código vai gerar algo assim: