Começar a utilizar a estrutura Remix

Sim, este é mais um JS mas mantenha-se por mais algum tempo, uma vez que esta estrutura é criada por Michael Jackson e Ryan Florence os espertalhões por detrás Router React. Espero que isto tenha chamado a vossa atenção, por isso vamos ver o que há de bom no Estrutura de remixagem.

Dados técnicos

O Remix é uma estrutura do lado do servidor construída sobre o API de busca na Web e Router React, cada itinerário no remix tem três exportações principais a carregador, um ação e uma predefinição componente exportação. A carregador será chamada no servidor antes da renderização para fornecer dados à rota, a função ação é responsável pela mutação de dados, a exportação predefinida é o componente que será processado nesse percurso. A função carregador e ação são executadas apenas do lado do servidor e devem devolver um Resposta objeto, o padrão A exportação é executada tanto no lado do servidor como no lado do cliente.

Começar a trabalhar

Para inicializar um novo Remix projeto:

npx create-remix@latest

IMPORTANTE: Escolha "Just the basics" e, em seguida, "Remix App Server" quando solicitado

cd [o nome que deu ao projeto]
npm run dev
```

Abrir http://localhost:3000. o criar-remixar irá obter um modelo inicial com a seguinte estrutura:

• O aplicação conterá todas as rotas da sua aplicação e código.
• O app/entry.client.jsx é o primeiro pedaço de código que é executado no navegador e é usado para hidratar a React componentes.
• O app/entry.server.jsx é o primeiro pedaço de código que é executado quando um pedido chega ao servidor, este ficheiro transforma a nossa aplicação React numa string/stream e envia-a como resposta ao cliente.
• O app/root.jsx é para onde vai o componente de raiz.
• O app/routes/ é para onde vão todos os seus módulos de rota, o remix usa um roteamento baseado no sistema de ficheiros.
• O público é onde ficam os seus activos estáticos (imagens/fontes/etc).
• O remix.config.js é onde a configuração de remixagem pode ser definida.

Menos conversa, mostre-me o código

Vamos verificar um login.jsx exemplo de rota dentro de uma aplicação Remix:

import { redirect, json, Form, useActionData, useTransition } from 'remix';
import { isLoggedIn, verifyLogin } from '../auth';

export const loader = async ({ request }) => {
if (await isLoggedIn(request)) {
return redirect('/dashboard');
}

return json({ success: true });
};

export const action = async ({ request }) => {
const formData = await request.formData();
const values = {
email: formData.get('email') ?? '',
password: formData.get('password') ?? '',
};

const errors = await verifyLogin(values);
if (errors) {
return json({ errors }, { status: 400 });
}

return redirect('/dashboard');
};

export default function LoginRoute() {
const actionData = useActionData();
const transition = useTransition();
const isSubmitting = transition.state === 'submitting';

return (

Email

{actionData?.errors?.email &&
{actionData.errors.email}
}

  <div>
    <label htmlFor="password">Password</label>
    <input id="password" name="password" type="password" />
    {actionData?.errors?.password && (
      <div>{actionData.errors.password}</div>
    )}
  </div>

  <div>
    <button type="submit" disabled={isSubmitting}>
      {`Login ${isSubmitting ? '...' : ''}`}
    </button>
  </div>
</Form>

);
}
```

A primeira coisa que acontece aqui é o carregador função que verifica se o utilizador já tem sessão iniciada com o isLoggedIn função e irá redirecionar ele para o /painel de controlo caso contrário, devolverá simplesmente um { sucesso: verdadeiro } e, em seguida, a página de login é renderizada.

O LoginRoute renderiza um formulário com entradas de e-mail e senha e um botão de envio, como você pode ver, não há Estado variáveis nem um onSubmit no nosso componente, é porque no remix cada rota pode exportar um evento ação e quando um formulário é submetido com um POST a ação será chamada e tratará esse evento.

Quando o formulário é submetido, o ação obterá a função
Dados do formulário do Pedido objeto const formData = await request.formData(), então estamos a construir o valores com um e-mail e propriedades de palavra-passe, o objeto formData.get('email') irá procurar o primeiro campo correspondente dentro do nosso formulário com um name="email" e devolver o seu valor. Estamos a verificar se as credenciais estão corretas com a propriedade verificarLogin aqui pode utilizar qualquer uma das suas bibliotecas de validação de esquemas JS favoritas e fazer um buscar para o seu backend personalizado para verificar se os dados de início de sessão estão corretos; em caso afirmativo, nós redirecionar o utilizador para o /painel de controlo caso contrário, devolvemos uma rota json com o objeto errors e uma resposta Código de estado HTTP 400, o useActionData O hook devolverá este objeto errors se houver algum e, condicionalmente, apresentará a mensagem de erro como em {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

O useTransition o gancho diz nós tudo sobre o estado de transição da página, com o isSubmitting variável estamos a verificar quando está a ocorrer uma submissão, se houver alguma, iremos desativar o botão enviar e mostrar Login.... em vez de Iniciar sessãoSe o utilizador não quiser ver o ecrã de carregamento, pode também mostrar-lhe um spinner de carregamento ou qualquer outra indicação.

O json é apenas um atalho para criar a função aplicação/json objectos de resposta. Os useLoaderData hook devolve os dados analisados JSON da sua rota carregador, o useActionData devolve o itinerário ação dados analisados.

Adequado para SEO

Cada rota também pode exportar um meta responsável pela definição de meta tags para o seu documento Html, desta forma pode definir uma título e um descrição para cada rota e adicionar qualquer Open Graph ou outras meta tags que pretenda.

export const meta = () => {
const title = 'A minha página espetacular';
const description = 'Página espetacular';

return {
charset: 'utf-8',
title,
description,
palavras-chave: 'Remix,Awesome',
'twitter:image': 'https://awesome-page.com/awesome.png',
'twitter:card': 'summarylargeimage',
'twitter:creator': '@awesome',
'twitter:site': '@awesome',
'twitter:title': título,
'twitter:description': descrição,
};
};

export default function AwesomeRoute() {
return

Rota incrível

;
}
```

Ligações úteis

Acabámos de abordar a ponta do icebergue sobre o Remix, há muito mais para saber, aqui estão algumas ligações úteis:

• Documentação
• Github
• Pasta de exemplos
• Lista de reprodução do YouTube
• Servidor Discord

Resumo

O que é fantástico no Remix é que, ao melhorar com ele, ficará melhor nos fundamentos da Web. Como viu, muitos dos links deste artigo apontam para o Documentos do MozillaO Remix está focado nos fundamentos da Web e utiliza APIs da Web, como os objectos Response e Request, para proporcionar aos utilizadores uma excelente experiência de utilizador, podendo ainda utilizar todas as suas técnicas habituais e bibliotecas favoritas.

Neste artigo, não falámos de todas as excelentes funcionalidades oferecidas pelo Remix, como Rotas aninhadas, Limites de erro, Pilhas de remixes mas, ainda assim, este artigo deve dar-lhe uma boa ideia da filosofia subjacente ao Remix.