Рубрики
Без рубрики

Время приветствие с реагированием и Бриджтауном

React – это библиотека, которую я хотел бы реализовать на мой сайт Bridgetown для довольно некоторого времени … Теги с Bridgetown, JavaScript, React, Ruby.

React – это библиотека, которую я хотел бы реализовать в мой сайт Bridgetown на некоторое время сейчас. Сегодня мы собираемся настроить реагирование в Бриджтаун, И необязательно используйте компонент для визуализации приветствия на основе пользователей на их Время дня.

Я буду разделить этот учебник на два раздела. Первый раздел Мы получим Ract Running, второй раздел, который мы добавим забавный маленький приветственный скрипт.

На момент написания этого я бегу в Бриджтаун версию 0.21.4.

Часть 1: Настройка реагирования

Обзор шагов

  1. Установите пакеты через пряжу
  2. Обновите WebPack.config.js.
  3. Создайте свой компонент
  4. Убедитесь, что DOM загружен перед монтажным компонентом
  5. Добавить контейнер к макету

1. Установите пакеты через пряжу

пряжа add -d ract react-dom

Запустите это в корне вашего проекта, где находится файл package.json. Флаг «-D» устанавливает их как зависимости Dev.

2. Обновите WebPack.config.js.

Поместите этот код …

var esbuildLoader = config.module.rules.find(rule => rule.use && rule.use.loader == "esbuild-loader")
if (esbuildLoader) {
  esbuildLoader.use.options.loader = "jsx"
}

После этого…

var config = require("./config/webpack.defaults.js")

И до этого …

module.exports = config

Не Отредактируйте файл «WebPack.defaults.js», потому что он может быть потенциально Переопределен при обновлении Bridgetown на более новую версию.

Снаппин просматривает правила модуля в конфигурации по умолчанию для загрузчика, называемого «Esbuild-loader», и если он там, то у нас есть загрузчик, использующий JSX.

3. Создайте свой компонент

Создайте папку «Компоненты» в вашем каталоге JavaScript. Здесь вы будете хранить все ваши компоненты реагирования, которые будут импортированы в index.js.

./внешний интерфейс/javaScript/Компоненты

Создайте файл под названием Helloworld.js и добавьте следующий код …

# in ./frontend/javascript/components/HelloWorld.js

import React from "react"
import ReactDOM from "react-dom"

export const HelloWorld = () => {
  const hello = "Hello"

  return 
{hello} World!

}

export const renderInDOM = () => {
  console.log("about to render!")
  ReactDOM.render(, document.querySelector("#root"))
}

4. Убедитесь, что DOM загружен перед монтажным компонентом

# This snippet goes in your `./frontend/javascript/index.js`

import { renderInDOM } from "./components/HelloWorld"

window.addEventListener("DOMContentLoaded", () => {
  renderInDOM()
})

Теперь мы импортируем Рендериндом Функция из компонентного файла и Использование слушателя события, чтобы убедиться, что DOM загружен, поэтому у нас есть где-то оказывать компонент.

Примечание: спасибо @jaredcwhite Для того, чтобы помочь мне С помощью WebPack.config.js и импортируйте фрагмент DOM, чтобы это произошло!

Добавьте свой div в свой макет

Подумайте, где вы хотите сделать свой компонент. Это может быть в ваших макетах или страницах, где угодно. Я положил шахту на своей индексовой странице.

Там у вас есть! У вас должен быть «Hello World!» Рендеринг, где вы поместили свой тег DIV с идентификатором «root».

Часть 2: Визуализация приветствия на основе времени суток

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

Обзор шагов

  1. Создать компонент для поздравления пользователей
  2. Импорт в index.js.
  3. Применить HTML-тег на шаблон

1. Создать компонент для поздравления пользователей

Давайте сделаем другой компонент под названием Приветствие.js Отказ Поместите следующее код внутри этого.

# In ./frontend/javascript/components/Greeting.js

import React from "react"
import ReactDOM from "react-dom"

export const Greeting = () => {
    var myDate = new Date();
    var hours= myDate.getHours();
    var greet;

    if (hours < 12)
        greet =  "morning";
    else if (hours >= 12 && hours <= 17)
        greet = "afternoon";
    else if (hours >= 17 && hours <= 24)
        greet = "evening";

    return Good {greet}!
}

export const renderGreeting = () => {
    console.log("dynamic Greeting is rendering!")
    ReactDOM.render(, document.querySelector("#greeting"))
}

JavaScript идеально подходит для этой функции, потому что оно ищет время суток на основе браузера, который пользователь просматривает его, потому что это связано с клиентскими скриптами. Если мы использовали Scripting Server Score Scripting, то время дня на основе сервера может не совпадать с пользователем, просматривающей его в режиме реального времени.

Таким образом, мы делаем новый экземпляр даты, получите часы, и используете, если/царствуете операторы, которые мы определяем, какое приветствие представляет на основе часа дня. Затем мы возвращаем его через jsx и kablam! У вас есть настроек приветствия на основе времени.

Мне очень нравится, сколько новых JavaScript Frameworks Encapusalate Scripts на компоненты для конкретных случаев использования. Еще одна удивительная библиотека, которая делает это это Стимулус , но давайте закончим и собрать остальные части вместе.

Импорт в index.js.

# In ./frontend/javascript/index.js

import { renderGreeting } from "./components/Greeting"

window.addEventListener("DOMContentLoaded", () => {
  renderGreeting()
})

Так же, как в прошлый раз, когда мы импортируем функцию из компонента и подождите/слушаю до DOM, чтобы закончить загрузку контента, чтобы мы где-то представляли приветствие.

Применить HTML-тег на шаблон

Где мы хотим, чтобы приветствие появилось, зависит от того, где мы размещаем тег, так что бросьте свой тег, где когда-либо ваше сердце желает моего друга.

Этот пост изначально появился в https://adrianvalenz.com

Оригинал: “https://dev.to/adrianvalenz/time-based-greeting-with-react-and-bridgetown-4b42”

Читайте ещё по теме: