1
Não é APENAS um framework baseado em React
2
É um framework fullstack que foi pensado para ser executado na Edge Network
3
Sua proposta é direcionar o developer para os Web Fundamentals
5
Gerenciamento de erros imbatível
4
Progressive Enhancement está no core do framwork
6
Nenhum framework da atualidade bate o Remix em termos de performance
7
Remix trabalha de forma diferente
Routes
export async function loader({ params }) {
// External calls
const res = await fetch(
`https://api.github.com/users/${params.username}/repos`
)
const repoData = await res.json();
// Data sanitization
const commits: Commit[] =
repoData.data.map((commit: CommitResponse) => ({
sha: commit.sha,
message: commit.commit.message,
html_url: commit.html_url,
})
);
// Make it available to the React component
return { commits };
}
// React component
export default function() {
const { commits } = useLoaderData();
return (...);
}// Executado quando a rota é acessada
export async function loader(): LoaderFunction {}
// Executado quando um form submete dados para a rota
export async function action(): ActionFunction {}
// Adiciona no <header> os <link> retornados pela função
export function links(): LinksFunction {}
// Caso a loader function dispare um erro, o JSX retornado por esta função será mostrado
export function ErrorBoundary() {}
// Qualquer <meta/> que se queira adicionar ao <header>
export function meta(): MetaFunction {}
// React component
export async function () {}// Executado quando a rota é acessada
export async function loader(): LoaderFunction {}
// Executado quando um form submete dados para a rota
export async function action(): ActionFunction {}
// Adiciona no <header> os <link> retornados pela função
export function links(): LinksFunction {}
// Caso a loader function dispare um erro, o JSX retornado por esta função será mostrado
export function ErrorBoundary() {}
// Qualquer <meta/> que se queira adicionar ao <header>
export function meta(): MetaFunction {}
// React component
export async function () {}COLOCATION
Para firmar na mente:
# ANALOGIA MVC
Loader Function
É o controller, se estivéssemos trabalhando no padrão MVC
1.
2.
React Component
Ainda dentro do MVC, o componente React é a view
3.
Model ???
O Remix deixa o model para você escolher!
Remix.run
By Fabio Vedovelli
