Как начать работу с Material-UI?
Вот простой и правильный путь, на мой взгляд.
Просто зайдите и следуйте инструкциям прямо здесь:
Подождите! Вы используете какую-то систему на основе Unix? Мак? линукс? Если это так, вы можете изменить
PORTв файле.env, который я установил на80, который работает в Windows. Значение по умолчанию для Razzle —3000, поэтому вы можете удалить эту строку, если хотите.
Проект запущен и работает.
Дерзайте и экспериментируйте!
Я не шучу. Закройте эту статью прямо сейчас и попробуйте проект!
Просто шучу! 😄 Можете прочитать позже…
Вы ленивы? Вместо этого Запустите проект на Codenvy! Один щелчок, и проект запущен после входа в систему.
Вы все еще читаете? Хорошо, я возьму тебя за руку и проведу тебя через это.
использование
Здесь будет скучно. Я сказал вам, чтобы вы попробовали это сами.
Ладно, шутки в сторону. У нас тут все серьезно.
Базовый
- общедоступные ⬅Статические файлы здесь.
- src
— application/Main.js⬅Основной компонент React.js.
— server.js ⬅Обслуживает минимизированный HTML.
— client.js, index.js, static.js ⬅Скрипты нижнего уровня (обсудим позже).
Как вы, возможно, уже поняли. Main.js содержит компонент React.js. Таким образом, вы можете изменить основной контент вашего сайта здесь.
server.js отрисовывает приложение React.js, собирает стили и предоставляет весь этот контент в виде HTML при посещении сайта.
Проверьте исходный код! Да, мечта сбылась. Это правильно минимизированный однострочник. Вы можете изменить здесь свой основной HTML, в основном заголовок.
Как начать проект подробно описано в уже связанном файле readme. Там же перечислены Функции примера проекта.
📝 Код
Стилизовать компоненты в Main.js очень просто с помощью Styled Components:
Вот как рендеринг на стороне сервера работает со стилизованными компонентами в server.js:
Он также включает некоторые дополнительные функции, такие как сжатие для статических ресурсов и минимизацию HTML:
Передовой
src/index.js — это основная точка входа для сервера. Этого требует Razzle.
src/client.js – это основная точка входа в браузер. Это также требуется Razzle.
Необязательный .env содержит некоторые определения переменных среды.
Вы можете найти сценарии сборки в package.json под объектом scripts.
📝 Код
Вот как главная точка входа (index.js) запускает сервер (server.js):
Вот полная самая простая версия index.js.
Точка входа client.js гидратирует уже отрендеренное приложение в браузере:
В package.json скрипт start использует подход сборки и запуска:
Материал-пользовательский интерфейс
Рендеринг на стороне сервера немного усложняет правильное использование Material-UI. Установка userAgent не обязательно проста (по крайней мере, для меня). Впрочем, документация не так уж и плоха.
Следующие коды со ссылками, надеюсь, дают некоторый контекст:
server.js:
Вы можете найти это решение на Stack Overflow.
Генерация статического сайта с одним маршрутом
Необязательный static.js вызывается из точки входа основного сервера (index.js). Он захватывает уже сгенерированные статические ресурсы и копирует их в папку static. Кроме того, он посещает URL-адрес и сохраняет ответ HTML:
Скрипт генерации статического сайта несколько сложен:
- Обычная сборка Razzle создается со статической настройкой (
RAZZLE_STATIC=true), встроенной в сгенерированный код на стороне сервера. - Эта сборка запускается в режиме
production. - Статический генератор выполняется только в этот раз. Он выполняет шаги, описанные ранее, и закрывает сервер.
О примере
Мотивация
Я хотел создать более актуальную и привлекательную версию книги Майкла Моргенштерна Search is Back!. Почему? Потому что я думал, что могу сделать это лучше, и я до сих пор думаю, что могу.
Я быстро понял, что мне нужно будет объединить несколько технологий, чтобы реализовать свое видение.
Итак, …после тестирования нескольких примеров проектов я нашел и использовал Razzle. (источник)
Мне также нужно было выбирать между Material-UI и Muse UI. (На тот момент для меня не было вопроса об использовании материального дизайна.) Я также рассматривал другие библиотеки. Но я быстро влюбился в анимацию флажков в Material-UI. В любом случае, это было действительно надежно.
Во-первых, я хотел использовать Muse UI, который является портом Material-UI, потому что я думал, что мне больше понравится Vue.js, чем React.js.
Однако в то время его документация была только на китайском языке, поэтому я выбираю оригинальную библиотеку.
Объединение CSS и HTML в JavaScript с использованием React.js в первый раз показалось немного странным. Позже, когда я использовал Vue.js для некоторых небольших клиентских проектов, я понял, что на самом деле мне немного больше нравится способ React, особенно со стилизованными компонентами.
В конце концов, я создал этот пример проекта. Так что я смог начать с моего настоящего под названием Facebook Searcher:
Это простая форма поиска, которая создает ссылку, чтобы вы могли выполнять пользовательский поиск людей на Facebook обычным способом.
Вы уже можете использовать реализованные поля, и это уже дает больше свободы, чем его конкурент.
Например, вы можете составить список пользователей Facebook, интересующихся обоими полами (что поддерживает Facebook). Он все еще находится в стадии разработки, и некоторые функции ожидают реализации.
Так что не стесняйтесь, дайте мне знать, если вы хотите каким-либо образом поддержать этот проект!
"Другие причины"
Что такое Разл?
Независимый от фреймворка инструмент сборки для универсальных приложений JavaScript, отображаемых на сервере.
Почему Раззл?
Рендеринг на стороне сервера очень прост с Razzle. Это было необходимо для меня. Кроме того, это не заставляет вас использовать решения, которые вы не хотите использовать.
Итак, это … минималистично… (источник)
Горячая перезагрузка модуля также является хорошей функцией. Настроить или расширить значения по умолчанию тоже просто.
Все это делает Razzle …почти независимой от фреймворка системой сборки…, которая …будет на 100% работать с Angular, Vue, Rax, Preact, Inferno, React-XP, RN-Web… — Джаред Палмер (источник)
Что дальше?
Facebook Searcher был впервые развернут на хостинг-провайдере старой школы. Там у меня был доступ к Secure Shell, поэтому я смог установить Node.js.
Я использовал Process Manager 2, чтобы убедиться, что он работает, несмотря ни на что. Конечно, это было не так быстро, как статический сайт. Кроме того, у меня не было хорошей основы для развертывания и обновлений. Через некоторое время я начал вручную сохранять HTML и таким образом публиковать приложение на Netlify. Это было более надежно, и приложение загружалось намного быстрее.
Позже я перешел на Firebase Hosting, который в целом еще быстрее и еще надежнее. Где-то в этот момент я реализовал функцию генерации статического сайта. Делать это вручную было явно невыгодно. Теперь я могу создать и развернуть Facebook Searcher с помощью всего одной команды. Теперь я могу сосредоточиться на реализации оставшихся функций.
Развернуть наше приложение на Firebase Hosting очень просто. Более того, мы все равно можем развернуть его как функцию Firebase (базовый пример). Возможно, эта тема сама по себе стоила бы еще одной статьи, несмотря на ее легкость.
В настоящее время мой проект не поставляется с рутом. Если вам это нужно для вашего проекта, вы можете добавить маршрутизатор или рассмотреть возможность использования вместо него After.js, который в основном представляет собой Razzle с маршрутизацией и соответствующими возможностями.
Я также с нетерпением жду обновления проекта до 1. версии Material-UI, как только они его выпустят, и вернут анимацию флажков, которые мне так нравятся.
Забрать
Экспериментируя и/или читая эту статью, вы сможете быстро и легко использовать Material-UI сложным способом. Так что вперед и построить что-то замечательное! 🎉 Нажмите «Ответить», чтобы поделиться своим опытом в комментариях ниже! Вам уже нравится использовать эту установку? Поделитесь этим руководством с друзьями!
