Как использовать React + Webpack для фронтенд-разработки в Salesforce Lightning

Представляем react-lightning-template.

С выпуском Компонента контейнера Lightning Salesforce теперь имеет отличный, безопасный способ передачи данных из вашей организации в пользовательский код Javascript. Включая React Apps. В этом посте мы узнаем, как настроить React с Salesforce.

Если вы не хотите читать статью и сразу переходить к документации, вот шаблонный репозиторий: react-lightning-markerplate repo - шаблонный проект для разработки компонентов React для использования в Salesforce.

Обзор инструментов / фреймворков

Реагировать

React - это компонентная структура для создания пользовательских веб-интерфейсов. Перед тем, как работать с этим руководством, рекомендуется ознакомиться с React и JSX в общих чертах.

Молния

Lightning - это компонентная платформа для создания пользовательских интерфейсов Salesforce.

Узел и NPM

Node - это движок Javascript, который позволяет запускать Javascript на вашем компьютере. NPM - это сокращение от «Node Package Manager» и представляет собой инструмент, помогающий управлять зависимостями.

Webpack

Webpack - это инструмент, который объединяет Javascript для производства. Думайте об этом как о сборщике файлов. Мы будем использовать его вместе с Babel для преобразования нашего Javascript в стабильную старую версию, которая обычно хорошо поддерживается клиентами.

Вавилон

Babel - это компилятор Javascript, который мы собираемся использовать для преобразования нашего Javascript в более старую версию, которая лучше работает с Salesforce.

Что мы собираемся построить

Простое окно отрисовки текста, которое имитирует внешний вид терминала bash. Мы сможем отправлять сообщения с молнией в наш компонент React.

«Как сделать»

Не волнуйтесь, вам не нужно устанавливать и настраивать все эти инструменты. Я уже сделал это за вас. Нам нужно только настроить среду локально, чтобы начать строительство.

Настраивать

1. Создайте этот шаблонный репозиторий: https://github.com/jefflombard/react-lightning-boilerplate
2. Клонировать локально с git clone
3. Следуйте инструкциям по установке.
4. Создайте рабочую организацию и установите ее по умолчанию с помощью sfdx force:org:create -f ./config/project-scratch-def.json -s
5. Запустите npm run deploy

Пришло время убедиться, что все работает.

1. Запустите sfdx force:org:open
2. Go to settings > developer console
3. Открытый ресурс Lightning ›ReactDevContainerApp

Добавление новых компонентов

Хорошо, теперь мы хотим создать тупой компонент, который будет просто выводить любой текст, который мы ему даем.

1. Создайте новый файл в каталоге src с именем TerminalScreen.js

2. Добавьте следующий код во вновь созданный TerminalScreen.js

// This line sets up react.
import React from 'react';
// This is an ES2015 Declaration of a function if it looks unfamilar to you, check out http://exploringjs.com/es6/
const TerminalScreen = props => (
    <div className="terminal-window">
        <p>{props.text}</p>
    </div>
);
// This line makes the variable TerminalScreen available to other files.
export default TerminalScreen;

3. Сделайте компонент TerminalScreen доступным для нашего приложения. Измените код в App.js на этот:

import React, { Component } from 'react';
import LCC from 'lightning-container';
import './App.css';
// This Line Imports our Component That We Created in our other file.
import TerminalScreen from './TerminalScreen.js'
class App extends Component {
    
    constructor(props){
        super(props);
        this.state = {
            exampleMessageValue: "Hello from React!"
        }
    }
    
    componentDidMount(){
        LCC.addMessageHandler(this.messageRecievedHandler);
    }
    
    messageRecievedHandler(msg){
        const { name, value } = msg;
        
        console.log("Messaged received.");
        console.log(`Message name: ${name}`);
        console.log(`Message value: ${value}`);
        
        // Add Any Logic that should be handled here.
        
        switch (name) {
            case "example":
                console.log('Handle Example Messgage')
                break;
            default:
                console.log('Do Nothing');
        }
    }
    
    sendMessage(msg){
        // Message format should be an object like { name: "messageName", value: "message value"}
        LCC.sendMessage(msg);
    }
    
    sendMessageExample(){
        // You can wrap the send message function to easily send specific message types.
        
        this.sendMessage(
            {
                name: "example",
                value: this.state.exampleMessageValue
            }
        );
    }
    
    // The Render Functiion is what defines the markup of our component.
    render(){
        return (
            <div>
                <TerminalScreen text="test output"/>
            </div>
        );
    }
}
export default App;

4. Запустите npm run deploy и обновите окно приложения.

Стилизация компонента

Теперь, когда у нас есть визуализация нашего компонента на экране, пришло время сделать его похожим на окно терминала.

1. Создайте новый TerminalScreen.css файл для нашего TerminalScreen компонента в каталоге src.

.terminal-window {
    background-color: black;
    color: green;
    font-family: "Courier";
    height: 300px;
    padding: 10px;
    width: 400px;
}

2. Импортируйте CSS в наш компонент React, обновив наш TerminalScreen.js файл.

// This line sets up react.
import React from 'react';
// This adds the css file to our bundle
import './TerminalScreen.css';
// This is an ES2015 Declaration of a function if it looks unfamilar to you, check out http://exploringjs.com/es6/
const TerminalScreen = props => (
    <div className="terminal-window">
        <p>{props.text}</p>
    </div>
);
// This line makes the variable TerminalScreen available to other files.
export default TerminalScreen;

3. Очистите App.js и скажите нашему терминалу выводить все полученные сообщения.

import React, { Component } from 'react';
import LCC from 'lightning-container';
import './App.css';
// This Line Imports our Component That We Created in our other file.
import TerminalScreen from './TerminalScreen.js'
class App extends Component {
    
    constructor(props){
        super(props);
        this.state = {
            message: ""
        }
    }
    
    componentDidMount(){
        LCC.addMessageHandler(this.messageRecievedHandler.bind(this));
    }
    
    messageRecievedHandler(msg){
        const { name, value } = msg;
        console.log("Messaged received.");
        console.log(`Message name: ${name}`);
        console.log(`Message value: ${value}`);
        
        // Add Any Logic that should be handled here.
        this.setState({
            message: value
        });
    }
    
    // The Render Functiion is what defines the markup of our component.
    render(){
        return (
            <div>
                <TerminalScreen text={this.state.message} />
            </div>
        );
    }
}
export default App;

4. Настройте наш контейнер Lightning для отправки сообщений нашему компоненту React, отредактировав react-lighting-boilerplate/force-app/main/default/aura/ReactContainer/ReactContainer.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="message" type="string" />
 
    <lightning:card title="Your React Component">
<lightning:container aura:id="jsApp" src="{!$Resource.ReactComponent + '/index.html'}"
            onmessage="{!c.handleMessage}"
            onerror="{!c.handleError}"/>
</lightning:card>
    <lightning:card title="Your Lightning Component">
        <p>Send Messages to Our ReactComponent</p>
        <lightning:input name="message" label="Enter some text" value="{!v.message}"/>
        <lightning:button variant="brand" label="Send" title="Send action" onclick="{! c.handleSendClick }" />
    </lightning:card>
    
</aura:component>

5. Настраиваем наш контроллер правкой react-lighting-boilerplate/force-app/main/default/aura/ReactContainer/ReactContainerController.js

({
    handleMessage: function (component, event, helper) {
        var message = event.getParams();
        component.set('v.message', message.payload.value);
    },
handleError: function (component, event, helper) {
        var error = event.getParams();
        console.log(error);
    },
    
    handleSendClick: function(component,event, helper) {
        var messageText = component.get('v.message');
        var message = {
            name: "Send To React",
            value: messageText
        };
        
        component.find('jsApp').message(message);
    }
})

6. Разверните с npm run deploy.

Готовый пример:

Дальнейшее чтение

Если вы хотите увидеть дополнительные примеры кода или способы использования других фреймворков, ознакомьтесь с Компонентом контейнера Lightning: создание компонентов с помощью React, Angular и других библиотек.

Ветка с кодом для этого блога находится здесь: https://github.com/jefflombard/react-lightning-boilerplate/tree/blog-example

Мы можем помочь с Lightning Development

Наша команда в Eigen X имеет большой опыт разработки Lightning на платформе Salesforce. Не стесняйтесь, напишите нам: [email protected] или @eigenx.