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

Вот как я создал приложение Markdown с электроном и реагировать

Tzahi Vidas Вот как я создал приложение Markdown с электронным и реагированным статьей – это пошаговое руководство по созданию базовой приложения Markdown с использованием электрона и реагирования. Я опишу, почему, как, и что я использовал для создания приложения Markdown, которое я называю изгом.

Автор оригинала: FreeCodeCamp Community Member.

Tzahi Vidas

Эта статья представляет собой пошаговый учебник о том, как создать базовое приложение Markdown, используя Электрон и Реагировать.

Я опишу, почему, как, и что я использовал для создания приложения Markdown, которое я звоню Мок Отказ

Исходный код для MOOK можно найти на Github Отказ

Мотивация

Есть пара причин, которые я начал этот проект.

Недавно я видел более впечатляющие и интересные вещи, которые вы можете сделать с JavaScript. Я также хотел что-то сделать с Электрон на некоторое время сейчас.

Я всегда чувствовал странное кодирование с JavaScript, и, как таковой, избегал этого. Каждый раз, когда я пытался что-то сделать с JavaScript, я всегда чувствовал, что я просто обманул на клавиатуре, чтобы получить все возможное, чтобы работать.

Тем не менее, я недавно обнаружил, что выглядел больше в JavaScript. Он внезапно чувствовал себя хорошим инструментом для решения некоторых проблем, над которыми я работал.

На другом заметке (см. Каламбуру?), Всякий раз, когда я использую приложение для принятия записей, я всегда чувствую себя, что есть функция, которую не хватает, что я могу найти в другом приложении. Но другое приложение не будет иметь функций, которые могут предоставить третье приложение. И поэтому я всегда в поисках новых и лучших приложений с примечанием.

С учетом этих мыслей я решил изучить JavaScript при создании редактора заметок Markdown с электроном.

Требования

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

  • Редактор и предварительный просмотр панелей
  • Разделительный экран между редактором и превью панелью, которые могут быть динамически перемещены
  • Поддержка блоков кода и выделения языка кода
  • Поддержка сохранения и синхронизации примечаний на GitHub
  • Иерархия ноутбуков и отмечает Markdown
  • Поддержка латексных/математических уравнений в редакторе
  • Возможность группировать разные ноутбуки с общей темой
  • Возможность делиться ноутбуками на GitHub и Dropbox, Google Docs и других.

Стек

Я должен был сделать несколько решений для этого проекта. Например:

Я должен использовать Котельная ?

Я должен использовать React, Angularjs. , Бунт или Vue ?

Какие пакеты я использовал?

И так далее.

В конце концов, я решил избежать подхода котельной (по крайней мере, на данный момент). Я сделал это, потому что я хотел построить основы приложения и узнать больше об этом в процессе.

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

Создание среды для приложения

Поскольку мы используем RECT, мы начнем с создания базового приложения RACT Action, а затем добавить электрон к нему.

Мы начнем наш проект, используя Create-React-App Отказ

Подготовка окружающей среды

Простой способ создания приложений React с базовой конфигурацией – использовать Create-React-App Отказ

Во-первых, убедитесь, что у вас есть последние версии узла и NPM на вашем компьютере. Чтобы проверить, запустите следующие команды:

node -v
npm -v
yarn — version

Когда я писал эту статью, это были версии на моей машине:

node = v8.4.0
npm = 5.3.0
yarn = 1.0.1

Создание приложения React с приложением Create-React

Чтобы установить Create-React-App В качестве глобального пакета введите следующую команду:

npm install -g create-react-app

Чтобы создать новое приложение React App и CD в этом:

create-react-app mook
cd mook

Это то, что наш проект выглядит сейчас. Я исключил node_modules Папка с вида, чтобы вы могли получить четкий вид на проект.

tree -I "node_modules"
.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock

2 directories, 13 files

Теперь, когда у нас есть базовое приложение для реагирования, чтобы увидеть, как выглядит, давайте запустим Начать Сценарий, который определен в Package.json файл:

yarn run start

Это запускает новое окно браузера со следующей страницей:

Установить электрон

Электрон позволяет создавать приложение, которое имеет возможность запускать через платформы.

Для установки электронного пакета:

yarn add electron — dev

Открыть Package.json файл.

Если все в порядке, вы сможете увидеть электронный пакет в DevDependonds Раздел файла.

Обновите Package.json Файл со следующими изменениями:

  • Чтобы добавить следующую строку в раздел сценариев:
"electron-start": "electron ."
  • Чтобы добавить верхний уровень Главная Свойство и укажите его на главный электронный файл (этот файл пока не существует, но мы будем создавать его в ближайшее время):
"main": "public/main.js"

Package.json Файл теперь выглядит так:

{
  "name": "mook",
  "version": "0.1.0",
  "main": "public/main.js",
  "private": true,
  "dependencies": {
    "react": "¹⁵.6.1",
    "react-dom": "¹⁵.6.1",
    "react-scripts": "1.0.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test — env=jsdom",
    "eject": "react-scripts eject",
    "electron-start": "electron ."
  },
  "devDependencies": {
    "electron": "¹.7.6"
  }
}

Далее мы добавим некоторые из Электронные события контролировать жизненный цикл приложения. Мы осуществим следующие события:

  • готов : Работает, когда электрон закончил инициализацию. В коде это будет работать Createwindow. , Что создает окно браузера с локальным URL-адресом RACT http://localhost: 3000 и устанавливает о панели и MainWindow к null на Закрыть Отказ
  • активировать : Работает, когда приложение активировано. Мы захочем позвонить в Createwindow Функция для создания нового окна.
  • окно все-закрыты : Испускаемый, когда все окна были закрыты. Это закроет приложение на всех платформах, кроме Mac, которые будут закрыты только окно, но явно потребуют бы пользователя, чтобы выйти из программы.

Добавьте следующий код в Public/Main.js :

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({width: 900, height: 680});
  mainWindow.loadURL('http://localhost:3000');
                     
  app.setAboutPanelOptions({
    applicationName: "Mook",
    applicationVersion: "0.0.1",
  })
  
  mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

Убедитесь, что реагирование все еще работает на заднем плане. Если нет, запустите его снова со следующей командой:

yarn run start

Откройте новую окно командной строки в папке проекта и запустите следующую команду:

yarn run electron-start

После запуска команды открывается следующее окно:

Если реакция не работает в фоновом режиме, электронное приложение откроется с пустым белым окном.

Создание стабильного процесса разработки и сборки

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

То, что мы создали до сих пор отлично подходят для развития, но в конечном итоге мы хотим создать версии распространения приложения для OS X, Windows и Linux.

Мне также не понравилось, что мы должны отдельно запустить приложение Read Server и Electlone в двух разных командных раковинах.

После некоторых исследований в тему я обнаружил следующий пост, « от реагирования на электронное приложение, готовое к производству » by @Thekitze , что мне помогло мне.

Нам нужно добавить следующие пакеты в наш проект:

  • электрон-строитель – Полное решение для упаковки и создания готового для распределительного электронного приложения для MacOS, Windows и Linux с поддержкой «Автообновление» из коробки. Мы будем использовать этот пакет для создания нашего приложения для распространения.
  • одновременно – Запускается команды одновременно. Мы будем использовать этот пакет, чтобы одновременно запустить реагирование и электрон в одной команде.
  • ждать – Утилита командной строки и Node.js API, которая будет дождаться файлов, портов, розетки и ресурсов http (ы), чтобы стать доступными. Мы будем использовать этот пакет, чтобы дождаться, когда сервер RACT начнет работать перед запуском приложения электрона.

Запустите следующие команды, чтобы добавить эти пакеты в наше приложение:

yarn add electron-builder wait-on concurrently — dev

Поскольку эти пакеты требуются только для развития, мы добавим флаг - Дев к пряжа Добавить команда. Это также автоматически добавит пакеты на DevDependonds часть Package.json Отказ

Создать скрипт Dev

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

Мы добавим новый скрипт в Сценарии Раздел нашего Package.json файл:

"electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""

В этой строке много вещей, поэтому давайте сломаемся:

  1. ” одновременно” – Запускает следующие команды одновременно.
  2. ” браузер = Никакая пряжа начинает “ – запускает приложение и наборы реагирования” Браузер = нет “ . Это означает, что браузер не будет автоматически открывать приложение React.
  3. ” ждать http://localhost: 3000 && Electron” – ждет, чтобы начать сервер разработки. Как только это будет, он начнет приложение электронов.

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

yarn run electron-dev

Создать сценарий сборки

Создание сценария сборки немного проще.

Нам нужно добавить пару сценариев в скрипты Раздел в Package.json файл:

  • Вот скрипт для создания приложения RACT, прежде чем построить электронное приложение:
"preelectron-pack": "yarn build"
  • Вот скрипт для упаковки электронного приложения. Этот скрипт создает пакет приложений с электрон-строитель Отказ
"electron-pack": "build — em.main=build/electron.js"

Далее нам придется указать построить имущество. Это из-за незначительного конфликта между Create-React-App и электрон-строитель Отказ Оба используют построить папка для другой цели.

Чтобы решить этот конфликт, нам нужно вручную настроить Электронно-строитель Правильные папки для шага сборки. Добавьте следующее построить Раздел для Package.json файл:

"build": {
  "appId": "com.mook",
  "files": [
    "build/**/*",
    "node_modules/**/*"
  ],
  "directories": {
    "buildResources": "assets"
  }
}

Нам также нужно добавить Главная страница Свойство, чтобы позволить упакованному электронному приложению найти файлы JavaScript и CSS:

"homepage": "./"

На данный момент ваш Package.json Файл должен выглядеть так:

{
  "name": "mook",
  "version": "0.1.0",
  "main": "public/main.js",
  "homepage": "./",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test — env=jsdom",
    "eject": "react-scripts eject",
    "electron-start": "electron .",
    "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
    "electron-pack": "build — em.main=build/main.js",
    "preelectron-pack": "yarn build"
  },
  "dependencies": {
    "react": "¹⁵.6.1",
    "react-dom": "¹⁵.6.1",
    "react-scripts": "1.0.13",
    "electron-is-dev": "⁰.3.0"
  },
  "devDependencies": {
    "concurrently": "³.5.0",
    "electron": "¹.7.6",
    "electron-builder": "¹⁹.27.7",
    "wait-on": "².0.2"
  },
  "build": {
    "appId": "com.mook",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    }
  }
}

Последний шаг будет обновлять Public/Main.js Отказ До сих пор мы поддержали только версию разработки приложения. В производстве мы не сможем использовать localhost: 3000. вместо этого мы будем служить index.html Файл из построить папка.

Во-первых, нам нужно установить Electron-Is-Dev , что поможет нам определить, работает ли электрон в разработке.

Установить Electron-Is-Dev упаковка:

yarn add electron-is-dev

Обновить Public/Main.js использовать Electron-IS-DEV:

  • Чтобы добавить пакет в код:
const isDev = require('electron-is-dev');
const path = require('path');
  • Чтобы изменить mainwindow.loadurl Функциональность в Createwindow Функция:
mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);

Этот код проверяет, есть ли мы в режиме разработки, и если мы будем использовать localhost: 3000 Отказ В противном случае это будет служить /build/index.html Отказ

Ваш Public/Main.js файл должен теперь выглядеть так:

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const isDev = require('electron-is-dev');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({width: 900, height: 680});
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
  
  app.setAboutPanelOptions({
    applicationName: "Mook",
    applicationVersion: "0.0.1",
  })
  
  mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

Теперь, давайте попробуем запустить сценарий сборки со следующей командой:

yarn run electron-pack

Когда запуск сценария завершен, вы должны увидеть новую папку с именем Dist в каталоге вашего проекта. Вы можете найти упакованное приложение в папке с именем после операционной системы. Например, пользователи Mac смогут найти упакованное приложение Mook.app В Dist/Mac папка.

Когда вы запускаете этот файл, вы должны получить тот же экран, который вы получаете для отладочной версии:

Отлично, мы только что закончили инфраструктуру построения для нашего приложения.

Добавление основных функций

Теперь мы можем начать добавлять строительные блоки в наше приложение Markdown.

Создание экрана сплитмана

Давайте начнем с добавления компонента сплитания, React-Split-Pane , к нашей заявке.

Установить React-Split-Pane упаковка:

yarn add react-split-pane

Чтобы добавить следующий код JavaScript на SRC/App.js файл:

  • Импорт React-Split-Pane :
import SplitPane from 'react-split-pane';
  • Замените функцию рендеринга следующим кодом. Этот код добавляет Сплитпана Элемент для функции рендеринга с двумя девсами, один для редактора и один для панели предварительного просмотра:
render() {
  return (
    

      
        

        

        

        

      
    

  );
}

Нам также нужно добавить некоторые CSS.

Чтобы добавить следующий код для src/app.csss :

.Resizer {
  background: #000;
  opacity: 0.4;
  z-index: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}
.Resizer:hover {
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}
.Resizer.horizontal {
  height: 11px;
  margin: -5px 0;
  border-top: 5px solid rgba(255, 255, 255, 0);
  border-bottom: 5px solid rgba(255, 255, 255, 0);
  cursor: row-resize;
  width: 100%;
}
.Resizer.horizontal:hover {
  border-top: 5px solid rgba(0, 0, 0, 0.5);
  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}
.Resizer.vertical {
  width: 11px;
  margin: 0 -5px;
  border-left: 5px solid rgba(255, 255, 255, 0);
  border-right: 5px solid rgba(255, 255, 255, 0);
  cursor: col-resize;
}
.Resizer.vertical:hover {
  border-left: 5px solid rgba(0, 0, 0, 0.5);
  border-right: 5px solid rgba(0, 0, 0, 0.5);
}
.Resizer.disabled {
  cursor: not-allowed;
}
.Resizer.disabled:hover {
  border-color: transparent;
}

Если вы обновите приложение или запустите его с помощью команды пряжа управляет электронным Dev , Вы должны увидеть следующий экран, который в настоящее время находится просто пустая страница, разделенная на две панели:

Вы можете играть с панелью сепаратора и посмотрите, как он изменил размер различных панелей.

Создание редактора и предварительного просмотра панелей

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

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

Создание редактора панели

Давайте начнем с панели редактора.

Мы будем использовать CodeMirror Какой текстовый редактор JavaScript.

Установите Package React для зеркала кода React-CodeMirror Отказ Потому что « Зеркальное значение кода не обновляется с изменением состояния » в React-CodeMirror мы установим @ Skidding/React-CodeMirror , который решает эту проблему:

yarn add @skidding/react-codemirror

Создайте новый файл под названием SRC/Editor.js , с новым классом под названием Редактор Это расширяет класс компонента React:

import React, { Component } from 'react';

class Editor extends Component {
}

export default Editor;

Этот класс будет в основном обернуть React-CodeMirror Пакет, который представляет собой реактивный компонент для коремора.

Далее мы импортируем @ Skidding/React-CodeMirror И некоторые файлы CSS, которые мы хотим использовать для компонента CodeMirror, выделения синтаксиса и режима разметки.

Мы также добавим оказывать Функция, которая вернет элемент CodeMirror и добавить Конструктор к Редактор класс. Это Конструктор Позволяет нами инициализировать коренировку со значением из основного файла.

Мы настроим CodeMirror Компонент к Реклама Режим и тема к Монокай :

import React, { Component } from 'react';
import CodeMirror from '@skidding/react-codemirror';

require('codemirror/lib/codemirror.css');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/python/python');
require('codemirror/mode/xml/xml');
require('codemirror/mode/markdown/markdown');
require('codemirror/theme/monokai.css');

class Editor extends Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    var options = {
      mode: 'markdown',
      theme: 'monokai',
    }
    return (
      
    );
  }
}

export default Editor;

В SRC/App.js Файл, мы импортируем editor.js (Добавить в начало файла):

import Editor from './editor.js';

В Приложение Класс, давайте добавим конструктор с начальным значением для нашего редактора:

constructor(props) {
  super();
  
  this.state = {
    markdownSrc: "# Hello World",
  }
}

В оказывать Функция Приложение класс, добавьте Редактор Компонент и установить значение для markdownsrc :

render() {
  return (
    

      
        

          
        

        

        

      
    

  );
}

SRC/App.js Файл должен выглядеть так:

import React, { Component } from 'react';
import logo from './logo.svg';
import SplitPane from 'react-split-pane';
import Editor from './editor.js';

import './App.css';

class App extends Component {
  constructor(props) {
    super();
    
    this.state = {
      markdownSrc: "# Hello World",
    }
  }
  
  render() {
    return (
      

        
          

            
          

          

          

        
      

    );
  }
}

export default App;

Обновите файл CSS src/app.csss со следующими изменениями:

  1. В Отказ Приложение Раздел (в верхней части файла), удалите Выравнивание текста: Центр ; Так что текст не соответствует центру.
  2. Добавьте следующий код CSS, чтобы он будет растянуть редактор на полную высоту и добавить небольшое добивание на правую сторону текста:
.editor-pane {
  height: 100%;
}

.CodeMirror {
  height: 100%;
  padding-top: 20px;
  padding-left: 20px;
}

.ReactCodeMirror {
  height: 100%;
}

Обновить приложение или запустить его с помощью команды пряжа управляет электронным Dev , и вы должны увидеть следующий экран:

Создание панели предварительного просмотра

Мы хотим, чтобы правильная панель была превью для редактора редактора, который находится на левой панели.

Для этого мы будем использовать Raction-markdown упаковка:

yarn add react-markdown

В src \ app.js Файл, добавьте следующий импорт:

import ReactMarkdown from 'react-markdown';

Добавьте Reg Regmarkdown Компонент внутри Вид на панель div:

Установите источник Reg Regmarkdown компонент, так что это так же, как в редакторе, this.state.markdownsrc Отказ

Теперь вы можете запустить приложение пряжи и увидеть панель предварительного просмотра:

yarn run electron-dev

Мы можем увидеть текст на панели предварительного просмотра. Однако, если мы введем что-то в панели редактора (слева), он не передает на панель предварительного просмотра (справа).

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

Добавление . onmarkdownChange Функция на src \ app.js. Обновите markdownsrc с обновленным текстом из редактора. Эта функция будет работать на каждом изменении, которая происходит в редакторе.

Добавьте следующий код в src \ app.js :

constructor(props) {
  super();
  
  this.state = {
    markdownSrc: "# Hello World"
  }
  
  this.onMarkdownChange = this.onMarkdownChange.bind(this);
}

onMarkdownChange(md) {
  this.setState({
    markdownSrc: md
  });
}

В оказывать Функция, добавьте следующее в Редактор элемент:

В SRC/Editor.js Файл, свяжите Onchange Функция CodeMirror к Onchange родителя:

constructor(props) {
  super(props);
  
  this.updateCode = this.updateCode.bind(this);
}

updateCode(e) {
  this.props.onChange(e);
}

В оказывать Функция, добавьте следующее в CodeMirror элемент:

SRC/App.js Файл должен выглядеть как:

import React, { Component } from 'react';
import logo from './logo.svg';
import SplitPane from 'react-split-pane';
import Editor from './editor.js';
import ReactMarkdown from 'react-markdown';

import './App.css';

class App extends Component {
  constructor(props) {
    super();
    
    this.state = {
      markdownSrc: "# Hello World"
    }
    
    this.onMarkdownChange = this.onMarkdownChange.bind(this);
  }
  
  onMarkdownChange(md) {
    this.setState({
      markdownSrc: md
    });
  }
  
  render() {
    return (
      

        
          

            
          

          

            
          

        
      

    );
  }
}

export default App;

SRC/Editor.js Файл теперь выглядит так:

import React, { Component } from 'react';
import CodeMirror from '@skidding/react-codemirror';

require('codemirror/lib/codemirror.css');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/python/python');
require('codemirror/mode/xml/xml');
require('codemirror/mode/markdown/markdown');
require('codemirror/theme/monokai.css');

class Editor extends Component {
  constructor(props) {
    super(props);
    
    this.updateCode = this.updateCode.bind(this);
  }
  
  updateCode(e) {
    this.props.onChange(e);
  }
  
  render() {
    var options = {
      mode: 'markdown',
      theme: 'monokai',
    }
    return (
      
    );
  }
}

export default Editor;

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

Полный исходный код можно найти на Github Отказ

Что дальше?

Есть еще много вещей, которые нам нужно сделать здесь:

  1. Сохранить и открывать файлы
  2. Автосохранение во время редактирования
  3. Панель инструментов/контроль над макетом панелей
  4. Резервное копирование нот на Github, Dropbox и другие.
  5. Поддержка сохранения нот в группах или объединена в «ноутбуке»
  6. Поддержка математических уравнений в M Эдиум.
  7. Более удивительные особенности!

Я думаю, что это то, что мы будем делать в следующий раз …

Следуй за мной на Twitter Для обновлений о прогрессе, предстоящих функциях или по любой другой причине.

Взносы

Вы можете внести свой вклад в любой способ, которым вы хотите. Любая помощь ценится. Не стесняйтесь делиться своими предложениями или комментариями.

Кроме того, если вы хотите увидеть функцию, которую вы считаете важными, не стесняйтесь спрашивать в комментариях ниже или просто открыть вопрос на Github Отказ

Оригинал: “https://www.freecodecamp.org/news/heres-how-i-created-a-markdown-app-with-electron-and-react-1e902f8601ca/”

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