Компоненты React в Lucky With Laravel Mix и lucky-react
Я только начал изучать React после 2 лет работы с Angular, и я удивлен тем, насколько React интересен и насколько замечательны сообщество и поддерживающие пакеты. Я также большой поклонник Кристалл и Лаки фреймворктак что может быть лучше, чем использовать эти инструменты вместе?
В этом посте я собираюсь показать вам, как вы можете добавлять компоненты React в свои приложения Lucky с помощью Laravel mix и повезло-реагировать.
Демо
Чтобы увидеть код для этой функции, вы можете клонировать 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.
Ларавель Микс
Поскольку мы будем использовать jsx для написания компонентов React, нам нужно обновить конфигурацию микса Laravel, чтобы правильно скомпилировать наш JavaScript. Laravel mix позволяет легко настроить его, изменив наш mix.js() вызвать в конфигурации mix.react().
mix
.react("src/js/app.js", "public/js")
Плагин Babel: свойства преобразования класса (необязательно)
Для того, чтобы использовать стрелочные функции и другой замечательный синтаксис, нам нужен Babel’s transform-class-properties плагин. Laravel mix не поставляется с этим плагином по умолчанию, поэтому нам нужно его установить.
yarn add babel-plugin-transform-class-properties
Затем мы добавляем .babelrc файл в корне нашего проекта со следующим содержимым:
{
"plugins": [
"transform-class-properties"
]
}
Это будет подобрано миксом автоматически! Наркотик.
Написание React-компонентов
Теперь, когда у нас есть поддержка jsx, мы можем писать компоненты и импортировать их в наш app.js файл. Для организации я помещаю свои компоненты в src/js/components/ каталог.
Здесь Bordered компонент и упрощенная версия Chat компонент, который используется в демонстрационном приложении.
import React from 'react';
export class Bordered extends React.Component {
render() {
return (
<div style={{border: '2px solid'}}>
{this.props.children}
</div>
)
}
}
import React from 'react';
import { ChatInput } from './ChatInput';
import { Message } from './Message';
export class Chat extends React.Component {
...
render() {
return (
<div style={styles}>
<h2 style={styles}>Conversation</h2>
<div>
{
this.state.messages.map(message =>
<Message
key={message.id}
sender={message.sender}
text={message.text} />
)
}
</div>
<ChatInput writeMessage={this.onWriteMessage}/>
</div>
)
}
}
LuckyReact
Чтобы разрешить рендеринг компонентов React в приложениях Lucky, я создал модуль npm с именем повезло-реагировать который добавляет прослушиватели событий на turbolinks:load и turbolinks:before-render монтировать и демонтировать компоненты с помощью [data-react-class] и [data-react-props] атрибуты.
Я также создал осколок кристалла под названием lucky_react со вспомогательными методами для рендеринга элементов с этими атрибутами на ваших страницах Lucky.
Модуль Lucky-React npm: находит и отображает компоненты React на ваших страницах, используя [data-react-class] и [data-react-props] атрибуты.
кристаллический модуль lucky_react: Добавляет вспомогательные методы для рендеринга элементов с правильными атрибутами, чтобы их можно было найти lucky-react.
Давайте воспользуемся ими сейчас, чтобы отрендерить наш Chat и Bordered компоненты на нашей домашней странице.
Сначала установите модуль npm.
yarn add lucky-react
Затем добавьте осколок в shard.yml и беги shards.
# shard.yml
...
dependencies:
...
lucky_react:
github: mikeeus/lucky_react
Регистрация компонентов React
Для того чтобы LuckyReact для рендеринга наших компонентов нам нужно импортировать и зарегистрировать их в нашем 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 });
Это все, что нам нужно сделать! LuckyReact создаст прослушиватели событий на turbolinks:load и turbolinks:before-render монтировать и размонтировать эти компоненты, если находит их на странице.
Обратите внимание, что нам нужно только зарегистрироваться Chat и Bordered поскольку они являются единственными корневыми компонентами.ChatInput и Message вложены в Chat и будет автоматически обрабатываться React.
Отображение компонентов на страницах
Теперь на наших страницах мы можем использовать LuckyReact crystal для добавления элементов, которые ссылаются на наши компоненты, чтобы их можно было визуализировать.
require "lucky_react"
class Home::IndexPage < GuestLayout
include LuckyReact
def content
react "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?" },
{ 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 }
end
end
Мы можем визуализировать компоненты без lucky_react шард, добавив [data-react-class] и [data-react-props]. Приведенный выше пример будет тогда записан так:
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.
