Давайте поговорим о Remix, новом фреймворке JavaScript. Это всего лишь введение, но продолжайте, если хотите увидеть, как мы запускаем приложение Remix. Если вам это нравится, дайте мне знать, если вам нужны дополнительные части, в которых я продолжаю создавать приложение с помощью Remix. 💥

Что такое ремикс?

Remix — это фреймворк JavaScript, выпущенный создателями React Router. Ранее за платной стеной только для подписчиков Remix был с открытым исходным кодом и доступен для всех!

Remix — это передовая среда JavaScript для рендеринга на стороне сервера, построенная на React, которая позволяет нам создавать веб-приложения с полным стеком благодаря возможностям внешнего интерфейса и серверной части. Во внешнем интерфейсе он действует как среда React более высокого уровня, которая предлагает рендеринг на стороне сервера, маршрутизацию на основе файлов, вложенные маршруты и многое другое, а на бэкэнде его можно использовать для запуска собственного сервера. (Ремикс)

Зачем вам это?

Если вам интересно: «Хорошо… это звучит точно так же, как React и Next.js», вы не за горами. Напрашивается вопрос, зачем вам использовать Remix, особенно если вы уже хорошо разбираетесь в React или Next.js?

В отличие от React (но, как и Next.js), Remix использует систему маршрутизации на основе файлов, а также поддерживает сегменты динамического маршрута и вложенную маршрутизацию. Каталог pages в Next.js работает так же, как каталог routes в Remix. Мы коснемся этого позже, так что не волнуйтесь, если вы не знакомы ни с одним из них.

Однако Remix позволяет использовать React Hooks, построен поверх React-Router (что неудивительно, учитывая, кто его создатель!) и включает поддержку вложенной маршрутизации во вложенных файловых системах, в то время как Next.js требует ручной настройки этого типа. файловой структуры.

Кроме того, в отличие от других, Remix поддерживает файлы cookie и сеансы «из коробки» и может быть развернут и запущен на любой платформе, поскольку его обработчик запросов находится на HTTP-сервере, что позволяет вам взаимодействовать с сервером любого типа и развертывать на большом количестве платформ ОС. включая AWS, Netlify, Express, Remix App Server, Cloudfare и другие.

Как это работает?

Он работает аналогично React, если вы знакомы. Независимо от того, являетесь ли вы таковым, давайте перейдем к короткому коду, чтобы вы могли увидеть, как это работает. Вы быстро освоитесь.

Если вы использовали React и приложение create-react-app, то запуск приложения Remix будет выглядеть довольно знакомо.

npx create-remix@latest

Когда вы запустите это, если вы ранее не устанавливали Remix, он спросит вас, хотите ли вы его загрузить. Если вы уже загрузили его ранее, он должен перейти прямо к установке.

Появятся следующие вопросы. Нажатие enter означает, что вас устраивает стандартный или выбранный ответ.

Where would you like to create your app?
What type of app do you want to create?
Where do you want to deploy? Choose Remix if you’re unsure; it’s easy to change deployment targets.
Do you want me to run `npm install`?

Я выбрал значение по умолчанию для каждого из них. Затем последняя подсказка спросит, хотите ли вы TypeScript или JavaScript. Мне очень нравится играть с JS, поэтому я выбрал именно его, но выбирайте то, что вам нравится.

Теперь в моем терминале я запускаю cd my-remix-app и открываю свой новый проект! Ниже приведены файлы, которые у меня есть автоматически.

Теперь, чтобы запустить этот проект, я запущу npm run dev в своем терминале. Когда я перехожу к localhost:3000, я получаю следующее:

Давайте углубимся в код, чтобы увидеть, что происходит под капотом! Если вы войдете в свой проект и откроете папку app, затем папку routes и посмотрите на index.jsx. Ваш должен выглядеть как на изображении ниже.

Скорее всего, вы узнаете этот контент по адресу localhost:3000. Редактирование любой из этих ссылок или заголовков href изменит страницы, и если вы знакомы с React, это должно выглядеть почти неотличимо от приложения React, делающего то же самое! Идите вперед и измените строку 12, чтобы сказать «Привет из Ремикса!». Если вы обновите и проверите свой пользовательский интерфейс localhost:3000, вы должны увидеть это как заголовок первой ссылки.

Вы не увидите изменений, отраженных в пользовательском интерфейсе после изменения файлов, пока не обновитесь вручную — это означает остановку сервера и его перезапуск. Другой вариант — импортировать компонент Remix LiveReload и добавить его в корень вашего приложения, как в примере ниже! Теперь, всякий раз, когда я вношу изменения в свое приложение, мне просто нужно нажать «Сохранить», чтобы запустить обновление пользовательского интерфейса.

Что теперь?

Хорошо! Теперь у вас есть интерфейс, созданный с помощью Remix. Что теперь?

Теперь мы можем попробовать включить маршруты! Если вы знакомы с React, вы можете быть знакомы с настройкой страниц и маршрутов с помощью React Router, но с Remix это будет выглядеть иначе. Для маршрутов Remix использует файловую систему маршрутизации. Это означает, что вы создадите каталог с именем routes в файловой системе вашего приложения. Все, что вы туда добавите, будет рассматриваться как маршрут.

Сначала я добавил новый файл в папку routes.

Затем я добавил немного кода! (Опять же, в основном идентично тому, как вы пишете код для компонента в React).

Теперь, наконец, когда я захожу на localhost:3000/helloworld, я вижу это! Как видите, эта конечная точка сопоставляется непосредственно с заголовком файла, а не с именем экспортируемой функции! Функция называется greeting(), а файл называется helloworld, и конечная точка совпадает с именем файла! Магия! ✨

Вот и все!

И вуаля, все! Вы уже на пути к созданию своего первого приложения Remix! Если вам понравился этот урок и вы хотели бы получить дополнительные части, в которых мы продолжаем создавать приложение, оставьте комментарий в этом блоге или напишите мне в Твиттере @katie_hoesley!