Руководство по экспорту React - шаг за шагом

Как экспортировать в React

Следуйте этим инструкциям по существу, и вы сможете экспортировать в React код и компоненты за очень короткое время. Обещаем 👍

Добавление вещей для экспорта (приложение Code)

  1. Откройте наше приложение для кода. Убедитесь, что вы активировали модуль React Export, введя лицензионный ключ, который вы получите при регистрации.
  2. Перейдите в Файл, ссылку на Sketch-файл (⌘L).
  3. Ссылка на один из наших демонстрационных файлов наш собственный
  4. В меню левой боковой панели нажмите значок Загрузить. Теперь вы должны увидеть вариант экспорта React под HTML.
  5. Прежде чем что-либо можно будет экспортировать в код, вам необходимо добавить каждую монтажную область / страницу в наш пакет экспорта. Вы делаете это, нажимая Добавить для экспорта (меню слева) на каждом из них. и каждую страницу, которую вы хотите включить в экспорт.
  6. Нажмите значок Загрузить. Если при активации все сработало, вы должны увидеть Реагировать под HTML.
  7. Нажмите React и сохраните .zip где-нибудь локально на вашем компьютере.

Известные проблемы

Не сохраняйте в Dropbox, OneDrive или Google Диск. Как только вы начнете устанавливать все пакеты, включенные в наш экспорт React, эти службы, скорее всего, выйдут из строя / зависнут. Или отправьте вам автоматические электронные письма с жалобами на то, что у вас много файлов 😸

Это потому, что мы используем Create React App (среди прочего), и оно содержит огромное количество действительно маленьких файлов. По размеру мы говорим о примерно 220 МБ загруженных пакетов.

iCloud, похоже, отлично работает с этим множеством небольших файлов, сбоев пока нет, и синхронизация между компьютерами, подключенными к одному и тому же идентификатору Apple ID, работает отлично.

🏎️ Круто, а теперь перейдем к самому интересному…

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

🖐️ Node.js

Чтобы что-нибудь работало, сначала необходимо установить Node.js.

  • Node.js - это серверная среда с открытым исходным кодом.
  • Node.js бесплатный
  • Node.js работает на различных платформах (Windows, Linux, Unix, Mac OS X и т. Д.)
  • Node.js использует JavaScript на сервере

Скачайте последнюю сборку отсюда

Как экспортировать в React (Терминал)

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

  1. Откройте приложение Терминал. Вы знаете это странное маленькое приложение, с которым вы, возможно, контактировали, когда делали забавные вещи на своем Mac 😆 На самом деле оно действительно дружелюбное, не бойтесь. Но странно, да.
  2. Напишите cd и сделайте пробел
  3. Перейдите в свой dl Sketch2React .zip, разархивируйте и перетащите всю папку в окно Терминала. Бросьте его именно после слов cd + your blank space. Он должен выглядеть примерно так: cd / users /
  4. Нажмите Enter ↩︎.

Как установить все необходимые пакеты (Терминал)

  1. Напишите npm install и нажмите Enter ↩︎.
  2. Поскольку вы ввели правильный компакт-диск, должна начаться установка всех необходимых пакетов

Как запустить свой сервер разработки (Терминал)

  1. Напишите npm start и нажмите Enter ↩︎.
  2. Это займет до одной минуты, а затем вы увидите это сообщение, в Терминале откроется ваш браузер по умолчанию с localhost: 3000
  3. Сделанный! Теперь продолжайте разработку вне Sketch, все изменения вносите прямо в код.

Как создать сборку (Терминал)

  • Если сервер запущен, нажмите Control + C, чтобы остановить его.

Вы не можете создать сборку, пока сервер работает!

  • Напишите npm run build и нажмите Enter ↩︎.

Это создаст оптимизированную сборку всего вашего проекта. Это займет немного времени, просто расслабьтесь, встаньте, посмотрите в окно или что-то в этом роде 😄

Построение относительных путей

По умолчанию Create React App создает сборку, если ваше приложение размещено в корне сервера.

Вот как это изменить.

Откройте package.json и введите этот самый путь ниже версии:

«Домашняя страница»: «http://mywebsite.com/relativepath,

В нашем случае мы изменили его на наш собственный относительный путь.

Версия видео

Счастливых начинаний! / Команда Sketch2React