Как создать клон новостей Хакера с помощью Remix, Tailwind css?

Привет всем, В этом уроке мы рассмотрим, как создать простой клон Hacker news с помощью Remix и Tailwind css.

Remix – это полностековый фреймворк react, который рендерит данные на сервере и отправляет html на сторону клиента в качестве ответа.

Давайте кодить!!!

Предварительные условия: Версия Node должна быть не ниже 16.3.0.

Настройка Remix:

Давайте сначала настроим наше приложение remix. Откройте терминал и введите следующее


# create the remix boilerplate

npx create-remix@latest

# Answer the basic questions

**Where would you like to create your app?** remix-hn-clone
**What type of app do you want to create?** Just the basics
**Where do you want to deploy? Choose Remix if you're unsure; it's easy to change deployment targets**. Remix App Server
**Do you want me to run `npm install`?** Yes
**TypeScript or JavaScript?** TypeScript

# changing to project directory

cd remix-hn-clone

# run the application

npm run dev

Войти в полноэкранный режим Выйти из полноэкранного режима

Приведенная выше команда создает шаблонное приложение remix для начала. После запуска npm run dev вы должны увидеть базовое приложение remix, отображаемое в браузере.

Теперь, когда установка remix завершена, давайте добавим tailwind css в наше приложение.

Настройка Tailwind css

Откройте терминал и выполните следующие команды


# install tailwind css

npm install -D tailwindcss

# create the configuration file for tailwindcss

npx tailwindcss init

Войти в полноэкранный режим Выйти из полноэкранного режима

Откройте файл tailwind.config.ts и добавьте в него следующее


module.exports = {
  content: [
    "./app/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь нам нужно добавить скрипты в наш package.json, чтобы он генерировал css во время сборки dev и production.

Обновите раздел скриптов в package.json следующим образом


    "build:remix": "remix build",
    "dev:remix": "remix watch",
    "dev": "yarn build:remix && run-p dev:*",
    "generate:css": "npx tailwindcss -o ./app/tailwind.css",
    "dev:css": "npm run generate:css -- --watch",
    "build:css": "npm run generate:css -- --minify",
    "build": "run-s build:*"

Войти в полноэкранный режим Выйти из полноэкранного режима

Сценарий generate:css использует команду tailwindcss cli для генерации css всякий раз, когда мы добавляем соответствующее имя класса в наш компонент.

Мы должны создать еще два скрипта для разработки и производства. dev:css будет генерировать соответствующий css для среды разработки, и поскольку мы сопрягли его с опцией --watch, генерация css происходит в фоновом режиме.

Для производственной среды мы можем создать еще один скрипт prod:css, который минифицирует css-активы.

Наконец, с помощью команды run-s cli мы создаем сценарий build, который последовательно выполняет команду. Так run-s build:* сначала запустит remix build, а затем скрипт build:css.

Теперь, когда мы интегрировали скрипт, давайте добавим ссылку на tailwind в наше приложение.

Откройте файл app/root.tsx и добавьте в него следующее содержимое


import styles from "./tailwind.css";

export const links = () => [
  { rel: "stylesheet", href: styles },
];

Войти в полноэкранный режим Выйти из полноэкранного режима

Зачем добавлять ссылки на стили в файл root.tsx?

В Remix есть классная функция под названием route based styling. Поэтому, когда мы добавляем стили, необходимые для конкретной страницы, в определенный файл маршрутов, Remix сам позаботится о загрузке и выгрузке стилей при каждой загрузке страницы.

Подробнее о стилизации на основе маршрутов

Поскольку у нас будет одностраничное приложение, которое будет отображать новости из api, мы можем добавить стили либо в файл app/root.tsx, либо в файл app/routes/index.tsx.

Теперь, когда интеграция завершена, мы можем начать использовать классы tailwind в наших компонентах. Откройте файл app/routes/index.tsx и замените его следующим содержимым


export default function Index() {
  return (
    <div>
      <h1 className="font-serif text-center p-4">Welcome to Remix</h1>
    </div>
  );
}

Вход в полноэкранный режим Выйти из полноэкранного режима

Когда вы проверите браузер с открытым chrome dev tools, вы увидите, что классы успешно применяются к тегу h1.

Отлично, мы успешно интегрировали remix с tailwind css. Следующий шаг – использовать hacker news api для получения данных и их отображения.

Многоразовые компоненты:

Создайте components/layout.tsx в папке app и добавьте следующее содержимое.

// layout.tsx

import { NavLink } from "@remix-run/react";

const Layout = ({ children }: any) => {
  return (
    <>
      <header className="text-gray-600 body-font">
        <div className="container mx-auto flex flex-wrap p-8 flex-col md:flex-row items-center">
          <NavLink
            to="/"
            className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"
          >
            <span className="text-xl">Hacker News</span>
          </NavLink>
        </div>
      </header>
      <div className="mx-auto container p-8">{children}</div>
    </>
  );
};

export default Layout;
Вход в полноэкранный режим Выйти из полноэкранного режима

В компоненте layout мы используем компонент NavLink от remix для навигации между страницами.

Давайте создадим простой компонент карточки, который мы будем использовать позже в нашем приложении. Создайте файл под названием Card.tsx в папке components и вставьте в него следующее содержимое.

* Примечание:
*

# we will be using moment lib to mess with dates 

npm install moment
Войти в полноэкранный режим Выйти из полноэкранного режима
import moment from 'moment';

export type CardProps = {
  title: string
  point: string
  author: string
  time: number
}

const Card = (props: CardProps) => {
        return (
            <section className="text-gray-600 body-font overflow-hidden">
              <div className="py-2 mx-auto">
                <div className="-my-8">
                  <div className="py-8 flex flex-wrap md:flex-nowrap">
                    <div className="md:flex-grow">
                      <h5 className="font-medium text-gray-900 title-font mb-2">
                        {props.title}
                      </h5>
                      <p className="leading-relaxed">
                       {props.point} by {props.author} {moment.unix(props.time).fromNow()}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          );


};

export default Card;
Войти в полноэкранный режим Выход из полноэкранного режима

Мы будем использовать как card, так и layout, когда будем кодировать нашу главную страницу приложения.

Последний шаг!!!

Рендеринг новостных статей:

Давайте теперь получим данные из hacker news api и отобразим их на экране. Откройте файл routes/index.tsx и добавьте в него следующее содержимое.

import { useLoaderData } from "@remix-run/react";
import Card, { CardProps } from "~/components/card";
import Layout from "~/components/layout";

interface CardDataProps extends CardProps{
  url: string
  score: string
  by: string
}

export async function loader() {
  const response = await fetch(
    "https://hacker-news.firebaseio.com/v0/newstories.json?print=pretty"
  );

  const storyIdentifiers: any = await response.json();

  let newStories = [];

  if (storyIdentifiers) {
    for (let i = 0; i < 15; i++) {
      const storyResponse = await fetch(
        `https://hacker-news.firebaseio.com/v0/item/${storyIdentifiers[i]}.json`
      );
      const story: any = await storyResponse.json();
      newStories.push(story);
    }
  }

  return newStories;
}

export default function Index() {
  const data = useLoaderData();
  return (
    <Layout>
      {data &&
        data.map((d:CardDataProps) => {
          if (d.url) {
            return (
              <a href={d.url} target="_blank" rel="noopener noreferrer" >
                <Card
                  title={d.title}
                  point={d.score}
                  time={d.time}
                  author={d.by}
                />
              </a>
            );
          }
          <Card title={d.title} point={d.score} time={d.time} author={d.by} />;
        })} 
    </Layout>
  );
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Краткое описание кода

Давайте начнем с самого начала. Мы импортировали наши многократно используемые компоненты, а также функцию useLoaderData из remix.

useLoaderData – это пользовательский хук, предоставляемый remix для загрузки данных в компоненты. Remix также предоставляет функцию loader, которую мы будем вызывать на сервере перед рендерингом страницы.

Внутри функции loader мы получаем данные из api, манипулируем ими и возвращаем ответ, а затем разбираем ответ в компоненте и передаем его в качестве реквизита компоненту карты.

Когда вы откроете браузер и перейдете по адресу dev url. Вы должны увидеть следующее

Вот и все. Мы закончили. Теперь мы успешно создали базовое приложение Remix с помощью tailwind css.

Полезные ресурсы:

  1. Документы Remix

Заключение

Вот, в общем-то, и все. Спасибо, что нашли время прочитать это руководство. Я надеюсь, что все поняли, как создать базовое приложение remix.

Если вы нашли этот пост полезным, добавьте ❤️ к нему и дайте мне знать, если я что-то упустил или если у вас есть сомнения в коде, не стесняйтесь спросить в разделе комментариев.

Отзывы о туториале приветствуются.

Развернутая ссылка: https://hacker-news-clone-remix.pages.dev/

Социальные ссылки:

Twitter
Витрина

Оцените статью
Procodings.ru
Добавить комментарий