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

Компоненты реагирования в счастливых с Maravel Mix и Lucky-React

Использование компонентов React в счастливых веб-приложениях с Maravel Mix. Lucky – это веб-каркас, построенный с новым языком, называемым кристаллом, который так же быстро, как C, но с синтаксисом, как Ruby.

Автор оригинала: Mikias Abera.

Я только что начал изучать реагирование после 2 лет угловых, и я удивлен тем, насколько весело реагирует и насколько удивительнее сообщество и поддерживающие пакеты. Я также огромный поклонник Кристалл и Lucky Framework Итак, что может быть более удивительным, чем использовать эти инструменты вместе?

В этом посте я собираюсь показать вам, как вы можете добавить компоненты React в свои счастливые приложения с Maravel Mix и Lucky-React Отказ

Демонстрация

Чтобы увидеть код для этой функции, вы можете клонировать Lucky_Demo репо и оформить заказ Lucky-React ветка.

git clone git@github.com:mikeeus/lucky_demo.git
cd lucky_demo
bin/setup
git checkout lucky-react

В противном случае вы можете следить со свежем счастливым приложением, запустив Lucky init app_name Отказ

Maravel Mix.

Поскольку мы будем использовать JSX для записи компонентов RACT, нам нужно обновить конфигурацию Laravel Mix, чтобы правильно компилировать наш JavaScript. Maravel Mix позволяет легко настроить его, изменив наши mix.js () Вызов в конфигурации в mix.reach () Отказ

// webpack.mix.js
mix
  // ...
  .react("src/js/app.js", "public/js") // instead of .js(...)

Babel Plugin: Transform-класс – свойства (необязательно)

Для того, чтобы использовать функции стрелки и другой потрясающий синтаксис, нам нужен Babel’s Преобразование-классовые свойства плагин. Maravel Mix не приходит с этим плагином по умолчанию, поэтому нам нужно установить его.

пряжа добавьте Babel-плагин-преобразование-класс-свойства

Тогда мы добавляем .babelrc Файл в корне нашего проекта со следующим контентом:

{
  "plugins": [
    "transform-class-properties"
  ]
}

Это будет забрано смесью автоматически! Наркотик.

Написание компонентов реагирования

Теперь, когда у нас есть поддержка JSX, мы можем написать компоненты и импортировать их в нашу app.js файл. Для организации я положил свои компоненты в SRC/JS/Компоненты/ каталог.

Вот Граничит Компонент и упрощенная версия Чат Компонент, используемый в демонстрационном приложении.

// src/js/components/Bordered.jsx
import React from 'react';

export class Bordered extends React.Component {  
  render() {
    return (
      

        {this.props.children}
      

    )
  }
}

// src/js/components/Chat.jsx
import React from 'react';

import { ChatInput } from './ChatInput';
import { Message } from './Message';

export class Chat extends React.Component {
  ...
  render() {
    return (
      

        
Conversation

        

          {
            this.state.messages.map(message => 
              
            )
          }
        

        
      

    )
  }
}

Luckyraye.

Чтобы разрешить рендеринг компонентов React в счастливых приложений, которые я создал модуль NPM, называемый Lucky-React это добавляет слушателей событий на Turbolinks: нагрузка и Turbolinks: перед визуализацией Чтобы установить и размонтировать компоненты, используя [Data-React-Class] и [Data-React-ropps] атрибуты.

Я также создал хрустальный осколок, называемый Lucky_react С помощью помощников методов рендеринга элементов с этими атрибутами в ваших счастливых страницах.

Lucky-React NPM модуль : Находит и отображает компоненты реагирования на ваши страницы, используя [Data-React-Class] и [Data-React-ropps] атрибуты. Lucky_reach Crystal Module : Добавляет помощники методов рендеринга элементов с правильными атрибутами, чтобы они могли быть найдены Lucky-React Отказ

Давайте использовать их сейчас, чтобы сделать наши Чат и Граничит Компоненты на нашей домашней странице.

Сначала установите модуль NPM.

yarn add lucky-react

Затем добавьте осколок на Shard.yml и беги осколки Отказ

# shard.yml
...
  dependencies:
    ...
    lucky_react:
      github: mikeeus/lucky_react

Регистрация компонентов реагирования

Для того, чтобы Luckyrage Чтобы сделать наши компоненты, нам нужно импортировать и зарегистрировать их в нашем app.js файл.

// src/js/app.js
...
import LuckyReact from "lucky-react";

import { Chat } from './components/Chat';
import { Bordered } from './components/Bordered';

LuckyReact.register({ Chat, Bordered });

Это все, что нам нужно сделать! Luckyrage создаст слушателей событий на Turbolinks: нагрузка и Turbolinks: перед визуализацией Чтобы установить и размонтировать эти компоненты, если он найдет их на странице.

Обратите внимание, что нам нужно только зарегистрировать Чат и Граничит Поскольку они являются единственными корневыми компонентами. ChatInput и Сообщение вложены в Чат и будет обрабатываться автоматически реагированными.

Рендеринг компонентов на страницах

Теперь на наших страницах мы можем использовать Luckyrage Хрустальный модуль для добавления элементов, которые ссылаются на наши компоненты, чтобы они могли быть представлены.

# src/pages/home/index_page.cr
require "lucky_react"

class Home::IndexPage < GuestLayout
  include LuckyReact # include the module

  def content
    react "Bordered" do # call react
      h1 "React Component", style: "text-align: center;"
    end

    messages = [
      { id: 1, sender: "me", text: "Hi" },
      { id: 2, sender: "Chatbot", text: "Hi! How can I help?" },
      { id: 3, sender: "me", text: "Can you tell me the time?" },
      { id: 4, sender: "Chatbot", text: "Sure it's #{Time.now}" }
    ]

    react "Chat", { messages: messages } # with props
  end
end

Мы можем рендерировать компоненты без Lucky_react Shard, добавив [Data-React-Class] и [Data-React-ropps] Отказ Вышеуказанный пример тогда будет написан так:

# src/pages/home/index_page.cr
class Home::IndexPage < GuestLayout
  def content
    div  "data-react-class": "Bordered" do
      h1 "React Component", style: "text-align: center;"
    end

    messages = [
      { id: 1, sender: "me", text: "Hi" },
      { id: 2, sender: "Chatbot", text: "Hi! How can I help?" }
    ]

    div "data-react-class": "Chat", "data-react-props": ({ messages: messages }).to_json
  end
end

Если вы запустите приложение сейчас и посетите домашнюю страницу, вы увидите работу компонента чата!

Присоединяйтесь к нам

Я надеюсь, что вам понравилось это руководство и нашел его полезным. Присоединяйтесь к нам на Lucky Gitter Channel Чтобы остаться в курсе в рамках или Оформить заказ Документы Для получения дополнительной информации о том, как принести свою идею приложения в жизнь с Lucky.

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