Руководство по экспорту React - шаг за шагом
Как экспортировать в React
Следуйте этим инструкциям по существу, и вы сможете экспортировать в React код и компоненты за очень короткое время. Обещаем 👍
Добавление вещей для экспорта (приложение Code)
- Откройте наше приложение для кода. Убедитесь, что вы активировали модуль React Export, введя лицензионный ключ, который вы получите при регистрации.
- Перейдите в Файл, ссылку на Sketch-файл (⌘L).
- Ссылка на один из наших демонстрационных файлов наш собственный
- В меню левой боковой панели нажмите значок Загрузить. Теперь вы должны увидеть вариант экспорта React под HTML.
- Прежде чем что-либо можно будет экспортировать в код, вам необходимо добавить каждую монтажную область / страницу в наш пакет экспорта. Вы делаете это, нажимая Добавить для экспорта (меню слева) на каждом из них. и каждую страницу, которую вы хотите включить в экспорт.
- Нажмите значок Загрузить. Если при активации все сработало, вы должны увидеть Реагировать под HTML.
- Нажмите 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 (Терминал)
Прежде всего, убедитесь, что у вас есть права администратора на вашем компьютере, иначе ничего из перечисленного ниже не будет работать.
- Откройте приложение Терминал. Вы знаете это странное маленькое приложение, с которым вы, возможно, контактировали, когда делали забавные вещи на своем Mac 😆 На самом деле оно действительно дружелюбное, не бойтесь. Но странно, да.
- Напишите cd и сделайте пробел
- Перейдите в свой dl Sketch2React .zip, разархивируйте и перетащите всю папку в окно Терминала. Бросьте его именно после слов cd + your blank space. Он должен выглядеть примерно так: cd / users /
- Нажмите Enter ↩︎.
Как установить все необходимые пакеты (Терминал)
- Напишите npm install и нажмите Enter ↩︎.
- Поскольку вы ввели правильный компакт-диск, должна начаться установка всех необходимых пакетов
Как запустить свой сервер разработки (Терминал)
- Напишите npm start и нажмите Enter ↩︎.
- Это займет до одной минуты, а затем вы увидите это сообщение, в Терминале откроется ваш браузер по умолчанию с localhost: 3000
- Сделанный! Теперь продолжайте разработку вне Sketch, все изменения вносите прямо в код.
Как создать сборку (Терминал)
- Если сервер запущен, нажмите Control + C, чтобы остановить его.
Вы не можете создать сборку, пока сервер работает!
- Напишите npm run build и нажмите Enter ↩︎.
Это создаст оптимизированную сборку всего вашего проекта. Это займет немного времени, просто расслабьтесь, встаньте, посмотрите в окно или что-то в этом роде 😄
Построение относительных путей
По умолчанию Create React App создает сборку, если ваше приложение размещено в корне сервера.
Вот как это изменить.
Откройте package.json и введите этот самый путь ниже версии:
«Домашняя страница»: «http://mywebsite.com/relativepath,
В нашем случае мы изменили его на наш собственный относительный путь.
Версия видео
Счастливых начинаний! / Команда Sketch2React