В этом посте я хочу помочь вам начать работу с ремикс с моей обычной 80 ⁄ 20 подход: пропустите пух, изучите ядро ®
Что такое Ремикс? Это новая платформа на основе React, которая только что достигла версии 1.0 и была выпущена публично с лицензией MIT, лицензия, которую мы все любим.
Примечание: до вчерашнего дня это была спонсорская программа, теперь она общедоступна и бесплатна
Ты знаешь Next.js ? Или Стройный Комплект? Ну, Ремикс – это что-то в этом роде, но с некоторыми уникальными функциями, которые делают его интересной альтернативой. Но у него нет поддержки статического сайта, поэтому ему всегда нужен сервер. Что делает его хорошим для одних случаев использования, плохим для других.
Хорошо подходит для случаев использования, когда у вас есть база данных, динамические данные, учетные записи пользователей с личными данными и так далее. Как в приложении Rails, Django или Laravel.
Или в мире JS это скорее альтернатива секвойям или Blitz.js, иначе говоря, речь идет скорее о создании приложений, а не сайтов.
Да, это похоже на хорошее ведро, в которое можно поместить это.
Мы создаем новый проект ремикса, используя npx , поэтому нам не нужно ничего устанавливать или даже создавать папку заранее.
Просто в папку, содержащую ваши проекты (обычно это dev или www для меня) и введите
npx create-remix@latest
Выберите папку, в которую вы хотите установить:
Выберите опцию сервера приложений Remix, который является встроенным сервером (вы можете изменить это позже).:
Выберите JavaScript или машинописный текст, если вы предпочитаете:
Убедитесь, что вы указали установщику запустить npm install чтобы он мог настроить все для вас:
Затем cd <имя_файла> и запустите npm run dev .
Всегда приятно посмотреть на результат установки по умолчанию:
Код, который генерирует это, таков:
Но на самом деле нас интересует только приложение папка, остальное является шаблоном/конфигурацией:
Давайте проанализируем это.
У нас есть 3 файла в папке src :
У нас есть 3 файла в папкеsrc:
Которые используются для настройки общей функциональности сайта, включая вывод HTML для всех страниц. Это те, которые, если вы прикоснетесь к ним, повлияют на все приложение. И именно здесь происходит обработка ошибок, что является первоклассным аспектом в Remix, что довольно круто.
Затем у нас есть папка routes с файлом index.jsx и папка demos , в которой содержится несколько демонстрационных приложений.
Давайте начнем с маршрутов/индекс.jsx .
Это компонент с длительной реакцией:
import { useLoaderData, json, Link } from "remix";
// Loaders provide data to components and are only ever called on the server, so
// you can connect to a database or run any server side code you want right next
// to the component that renders it.
// https://remix.run/api/conventions#loader
export let loader = () => {
let data = {
resources: [
{
name: "Remix Docs",
url: "https://remix.run/docs"
},
{
name: "React Router Docs",
url: "https://reactrouter.com/docs"
},
{
name: "Remix Discord",
url: "https://discord.gg/VBePs6d"
}
],
demos: [
{
to: "demos/actions",
name: "Actions"
},
{
to: "demos/about",
name: "Nested Routes, CSS loading/unloading"
},
{
to: "demos/params",
name: "URL Params and Error Boundaries"
}
]
};
// https://remix.run/api/remix#json
return json(data);
};
// https://remix.run/api/conventions#meta
export let meta = () => {
return {
title: "Remix Starter",
description: "Welcome to remix!"
};
};
// https://remix.run/guides/routing#index-routes
export default function Index() {
let data = useLoaderData();
return (
Welcome to Remix!
We're stoked that you're here. 🥳
Feel free to take a look around the code to see how Remix does things,
it might be a bit different than what you're used to. When you're
ready to dive deeper, we've got plenty of resources to get you
up-and-running quickly.
Check out all the demos in this starter, and then just delete the{" "}
app/routes/demos and app/styles/demos{" "}
folders when you're ready to turn this into your next project.
);
}Теперь этот файл можно упростить до супер простого компонента реакции, подобного этому:
export default function() {
return (
Test
);
}и если вы сделаете это и сохраните файл, вы увидите это в приложении:
Но этот файл делает нечто большее, чем просто вывод некоторых JSX. Он загружает данные на стороне сервера с помощью функции loader() :
import { json } from "remix";
export let loader = () => {
let data = {
//.... some data
};
return json(data);
};json() – это специальная утилита для простого создания конечной точки JSON, которую Remix затем вызовет при загрузке страницы, чтобы заполнить ее необходимыми данными.
Эта функция loader() вызывается перед рендерингом и выполняется только на стороне сервера.
Чтобы использовать эти данные в JSX компонента, мы должны импортировать и вызвать использовать данные загрузчика() :
import { useLoaderData, json } from "remix"
export let loader = () => json({
name: 'Flavio'
})
export default function() {
let data = useLoaderData()
return (
Hi {data.name}
)
}В файле также экспортирована функция meta() , которая используется для установки метаданных заголовка HTML страницы.
Маршруты – это то место, где “мясо” происходит в Ремиксе. Что понятно, так как он был создан людьми, которые создали маршрутизатор React, поэтому маршрутизатор является центральной частью приложения.
В официальном руководстве уже говорится о создании пользовательских маршрутов и форм обработки, поэтому я не буду сейчас вдаваться в подробности об этом.
Я предлагаю вам взглянуть на это, особенно на формы.
Почему? Потому что формы – это большая проблема в React, поэтому приятно видеть, что этот очень простой подход позволяет создавать формы без необходимости писать много-много шаблонного кода.
Я думаю, что это самая приятная часть Remix, и я бы подумал об использовании этого, если я хочу иметь сайт с первоклассными формами, чтобы избежать использования библиотек, которые мне нужно изучать с нуля, и это еще одна зависимость, о которой стоит беспокоиться.
Еще одна интересная вещь – это маршруты для детей, и как это в основном повторяет то, что мы делали с Эмбером и его выходами в дни до реакции, и это имеет смысл, так как я помню, как Райан Флоренс был активен в сообществе Эмбер в то время.
И здорово видеть прогресс в области, в которой не было крупных сотрудников, где Next.js в основном это слон в комнате и это то, к чему я до сих пор не прибегал, когда дело доходит до написания приложения.
И я все равно буду придерживаться этого по умолчанию в настоящее время. Мне нравятся новые технологии, но также требуется много времени, чтобы они стали зрелыми, чтобы люди писали библиотеки, учебные пособия и т. Д. И т. Д.
Но конкуренция способствует инновациям, поэтому всегда хорошо иметь вариант, который достаточно своеобразен, чтобы не быть подражателем существующих альтернатив.
Оригинал: “https://flaviocopes.com/remix/”