от Мохаммеда Салмана

Когда я писал эту статью, на ум пришел закон Этвуда:

Любое приложение, которое можно написать на JavaScript, в конце концов будет написано на JavaScript. – Джефф Этвуд

Сначала опубликовано в моем блоге!

Сегодня мы взглянем на Proton Native и создадим с ним простую программу.

В отличии от Электронный программы, программы, созданные с помощью Протон родной есть на самом деле родной (отсюда название), а не на основе хрома.

Протон родной это как React Native но для рабочего стола. Он компилируется в код родной платформы, поэтому выглядит и работает как родная программа.

Итак начнем.

Windows

Установите инструменты сборки, выполнив:

npm install --global --production windows-build-tools

Linux

Вам понадобятся эти библиотеки:

• libgtk-3-dev
• построение-важное

Мак

Тебе ничего не нужно.

Теперь запустите следующее:

npm install -g create-proton-app

и

create-proton-app my-app

создать новый проект.

Откройте каталог проекта с помощью любимого редактора кода. Каталог должен выглядеть так:

 └───node_modules
 ├───.babelrc
 ├───index.js
 ├───package.json
 └───package-lock.json

index.js должно выглядеть так:

Как и любой проект React или React Native, мы импортируем библиотеку react и создаем компонент класса.

The App элемент — это просто контейнер, содержащий Window и Menuи Window имеет три опоры: title (название окна), size (берет объект, содержащий ширину и высоту окна), и menuBar (установить значение false, так как нам не нужна панель меню).

Прежде чем начать кодировку, давайте установим crypto использование npm:

npm i crypto

Мы будем использовать crypto хешировать текст с помощью алгоритма MD5.

index.js

import React, { Component } from "react";
import { render, Window, App, Box, Text, TextInput } from "proton-native";
import crypto from "crypto";

class Example extends Component {
  state = { text: "", md5: "" };

  hash = text => {
    this.setState({ text });
    
    let md5 = crypto
      .createHash("md5")
      .update(text, "utf8")
      .digest("hex");

    this.setState({ md5 });
  };
  render() {
    return (
      <App>
        <Window
          title="Proton Native Rocks!"
          size={{ w: 300, h: 300 }}
          menuBar={false}
        >
          <Box>
            <TextInput onChange={text => this.hash(text)} />
            <Text>{this.state.md5}</Text>
          </Box>
        </Window>
      </App>
    );
  }
}

render(<Example />);

Я сначала импортировал Text и TextInput чтобы я мог использовать их позже. Затем в class после установки text и md5 пустые строки в state объект, я создал функцию hash что занимает а text аргумент.

В hash функцию, мы устанавливаем состояние text и заявить md5 для сохранения зашифрованного текста (как показано ниже)

this.setState({ text });
let md5 = crypto.createHash("md5")
  .update(text, "utf8").digest("hex");

и установите для объекта состояния значение updated md5.

this.setState({ md5 });

The render метод возвращает некоторые jsx элемент. The Box элемент так же, как div в React, или View в React Native, содержащий TextInput и Text . Это потому, что родительский элемент окна не позволяет иметь больше одного дочернего элемента.

TextInput имеет onChange prop, который будет вызываться всякий раз, когда текст меняется. Поэтому мы устанавливаем для него функцию жирной стрелки, принимающей a text аргумент и возвращает hash функцию, которую мы объявили раньше.

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

Теперь, если мы запустим его из

npm run start

должно появиться это окно:

И если мы введем некоторый текст, он хешируется в md5 следующим образом:

Вы можете сказать: «Это выглядит некрасиво – давайте добавим немного стиля». Что ж, на момент написания этой статьи Proton Native еще находился в зачаточном состоянии. Он очень баггий и не поддерживает стилизацию (пока), но это интересный проект, с которым можно играть.

Если вы хотите внести вклад в проект, посмотрите репо.

Если у вас есть вопросы или предложения, не стесняйтесь оставлять комментарии или связываться со мной в Twitter @4msal4 и не забудьте нажать эту кнопку 🙂

👇Смотрите мою предыдущую историю👇

Как создать новостную программу с помощью React Native.