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

Материал-интерфейс: начните (быстро!) ⚡ Rect 16+

Как начать с Material-ui, используя Rect 16+? Это мой пошаговый гид, который покажет вам легкий и правильный путь. Поверьте мне! Я проверил кучу решений (так что вам не нужно). Это проверенные инструкции по использованию материала-UI в 2018 году и за его пределами.

Автор оригинала: Erik Engi.

Как начать с Material-ui?

Вот легкий и правильный путь на мой взгляд.

Просто иди и следуйте инструкциям прямо здесь:

Раззвол материал-интерфейс в стиле примера

Ждать! Вы в какой-то системе на основе Unix? Mac? Linux? Если так, что вы можете изменить Порт в пределах .env Файл, который я установил 80 который работает на окнах. Разzzle по умолчанию это 3000 Таким образом, вы можете удалить эту строку, если вы хотите.

Проект работает и работает.

Запустите сервер в режиме разработки

Режим разработки

Иди дико и экспериментирую!

Я не шучу. Закройте эту статью прямо сейчас и вместо этого попробуйте проект!

Просто шучу! Вы можете прочитать дальше …

Ты ленивый? Начните проект на CodenVy вместо! Один клик и проект работает и работает после входа в систему.

Вы все еще читаете? Хорошо, я буду держать твою руку и пройти вас через него.

Применение

Здесь станет скучно. Я сказал вам, чтобы попробовать это самостоятельно.

Хорошо, шутит в сторону. Мы здесь серьезно.

Базовый

Структура папки

Структура папки
  • Общественные ⬅Static файлы здесь.
  • сортировка
    • Приложение/ Main.js Maintegint.js Компонент.
    • server.js ⬅Servesives Minified HTML.
    • Client.js, index.js, Static.js ⬅ “Нижний уровень” Сценарии (обсудят позже).

Как вы уже можете выяснить. Main.js Содержит компонент RACT.JS. Так что в основном вы можете изменить основное содержание вашего сайта здесь Отказ

server.js Оказывает нанесение rance.js, собирает стили И служит все это контент в качестве HTML при посещении сайта.

Осмотрите исходный код! Да, мечта сбылась. Это правильно заминированное одноклассное. Вы можете Измените свой главный HTML здесь , в основном ваш заголовок.

Как на самом деле начать проект подробно описан в уже связанном README. Особенности Из примера проекта там тоже перечислены.

📝 код кода

Стайлинг компоненты в Main.js Это легко с Слифовые компоненты :

import styled from 'styled-components'

const Div = styled.div`
  text-align: center;
`

export const Main = () => 

Это как боковое рендеринг Server работает со стильными компонентами в server.js :

import {renderToString} from 'react-dom/server'
import {ServerStyleSheet} from 'styled-components'

import Application from './application/Main'

const sheet = new ServerStyleSheet()
, html = renderToString(sheet.collectStyles())
, css = sheet.getStyleTags()

// server response to send:
  `

  
    ` + css + `
    
      
` + html + `
`

Это также включает в себя несколько дополнительных, как Сжатие для статических ресурсов и HTML Minification:

import {minify} from 'html-minifier'

minify(
  `
...`
, {
  collapseWhitespace: true
  , removeComments: true
  , minifyCSS: true
  , minifyJS: true
})

Передовой

SRC/index.js является основной точкой входа для Сервер Отказ Это требуется от Razzle.

SRC/Client.js является основной точкой входа для браузер Отказ Это также требуется от Razzle.

Дополнительный .env Содержит некоторые определения переменной окружающей среды.

Вы можете найти сценарии сборки в Package.json под Сценарии объект.

📝 код кода

Вот как главная точка входа ( index.js ) запускает сервер ( server.js ):

import express from 'express'
import server from './server'

export default express()
  .use((request, response) => server.handle(request, response))
  .listen(process.env.PORT)

Вот полный Простая версия index.js Отказ

Client.js Точка входа Увлажняет уже отображаемое приложение в браузере:

import {hydrate} from 'react-dom'

import Application from './application/Main'

hydrate(, document.getElementById('root'))

В Package.json , Начать Сценарий использует сборку и запустить подход:

{
  "scripts": {
    "start": "razzle build && cross-env NODE_ENV=production node build/server.js"
  }
}

Построить и бежать

start quit.gif.

Материал-UI

Сервер бокового рендеринга делает его немного более сложным для правильного использования материала-UI. Установка Useragent не обязательно просто (по крайней мере для меня). Тем не менее, Документация не так уж плохо

Следующие коды с ссылками, надеюсь, дают некоторое контекст: server.js :

renderToString()

Client.js :

hydrate(, document.getElementById('root'))

Main.js :

class Main extends Component {
  constructor(properties) {
    super(properties)

    this.muiTheme = getMuiTheme({
      userAgent: properties.userAgent
    })
  }

  render = () =>
    
}

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

Единственный маршрут Статическое поколение сайта

Дополнительный Static.js это Вызывается от основной точки входа в сервер ( index.js ). Он хватает уже созданные статические ресурсы и копирует их в Статический папка. Плюс он посещает URL и сохраняет ответ HTML:

import http from 'http'
import fs from 'fs-extra'

const staticDirectory = process.env.RAZZLE_STATIC_PATH || 'static'

http.get({url: 'http://' + process.env.HOST + ':' + process.env.PORT
  , headers: {'User-Agent': 'all'}
}, response =>
  response.on('data', html =>
    fs.writeFile(staticDirectory + '/' + 'index.html', html)
  )
)

Статическое поколение сайта

Статическое поколение сайта

Сценарий поколения статического сайта несколько сложный:

{
  "scripts": {
    "static": "cross-env RAZZLE_STATIC=true razzle build && cross-env NODE_ENV=production node build/server.js"
  }
}
  1. Регулярная сборка Razzle создается со статической настройкой ( razzle_static = true ), запеченный в сгенерированный серверный код сервера.
  2. Эта сборка начинается в Производство режим.
  3. Статический генератор выполнен только на этот раз. Он выполняет шаги, описанные до и закрывают сервер.

О примере

Мотивация

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

Итак, «… после тестирования куча примерных проектов, я оказался найти и использовать раззвол». ( Источник )

Мне также нужно было выбирать между материалом-пользовательским интерфейсом и музами. (Использование материального дизайна не было никакого вопроса для меня в этот момент.) Я также считал другие библиотеки. Но я быстро влюбился в Material-Ui Флажок Анимация Отказ Это было действительно надежно в любом случае.

Материал-ui Checkbox Animation

Флажок Анимация

Во-первых, я хотел пойти с Muse UI, который является портом материала-UI, потому что я подумал, что я хотел бы Vue.js больше, чем Rect.js.

Однако его документация была китайцами только в то время, поэтому вместо этого я выбираю оригинальную библиотеку.

Наличие CSS и HTML вроде в сочетании в JavaScript, используя rest.js, ощущали немного странно в первый раз. Позже, когда я использовал Vue.js для некоторых небольших клиентских проектов, я понял, что на самом деле на самом деле очень похож на реактивный способ немного больше, особенно со стильными компонентами.

В конце концов, я создал этот пример проекта. Поэтому я смог начать с моим настоящим под названием Facebook Searcher: Facebook Searcher.

Поиск Facebook

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

Например, вы можете перечислить пользователей Facebook с интересом к обоим полам (которые поддерживает Facebook). Он все еще находится в разработке, а некоторые функции ждут реализации. Так что не стесняйтесь, дайте мне знать, если вы хотите поддержать этот проект любым способом!

Другие причины

Что такое раззвол?

Средний инструмент сборки Agnostic для серверов Universal JavaScript приложений.

https://github.com/jaredpalmer/razzle

Почему раззвол?

Сервер бокового рендеринга прост с помощью Razzle. Это было должно быть для меня. Кроме того, он не заставляет вас использовать решения, которые вы не хотите использовать.

Так что “… это […] минималистичный …” ( Источник )

Горячая модуль перегрузка также является хорошей функцией. Настройка или расширение по умолчанию тоже просто.

Все это делает раззывающуюся «… почти структурированная система сборки Agnostic …», которая «… будет 100% работать с угловым, Vue, Rax, Preact, Inferno, React-XP, RN-Web …» – Джаред Палмер ( Источник )

Кто его использует?

Что дальше?

Facebook Searcher был первым «развернут» к поставщику хостинга старого школы. Там у меня был безопасный доступ, поэтому я смог установить Node.js.

Я использовал Process Manager 2, чтобы убедиться, что он работает независимо от того, что. Конечно, это было не так быстро, как имеющий статический сайт. Кроме того, у меня не было хороших рамх для развертываний и обновлений на месте. Через некоторое время я начал сохранять HTML вручную и опубликовать заявку на NetLify таким образом. Это было более надежно, а приложение загружается тоже быстрее.

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

Развертывание с одной командой

Firebase Deploy.png

Развертывание нашего приложения к хостингу Firebase легко. Более того, мы все еще можем развернуть его как функцию FireBase ( Основной пример ). Может быть, эта тема одна этата стоила бы другой статьи независимо от легкой силы.

В настоящее время мой проект не приходит с укоренением. Если вам это нужно для вашего проекта, вы можете добавить маршрутизатор или вы можете рассмотреть возможность использования После.js Вместо этого, который в основном разzzle с маршрутизацией и связанными возможностями.

Я также с нетерпением жду обновления проекта к 1. Версии материала-UI, как только они отпускают его и добавьте обратно анимацию флажков, которые я так сильно люблю.

Забрать

Экспериментируя и или чтение этой статьи вы можете быстро использовать материал-UI быстро и легко изощренным образом. Так что идите вперед и постройте что-нибудь замечательное! 🎉.

Вы бы использовали эту настройку? Вы предпочитаете что-то еще?

Ответить , Спросите и Поделитесь своим опытом В комментариях ниже!

Вам понравилась эта статья?

⬇ 💖 Как статья!

Поделиться Этот пошаговый руководство с Ваш друзья И колледжи!

Скопируйте ссылку из адресной строки. Сообщите с вашими сверстниками напрямую. 👋say Привет и отправьте их к ним.

💌 рассылка

Эрик Энги

Подписаться сейчас И получите действующие технические статьи в свой почтовый ящик.

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

Следуйте за Эрик Энги на кодамент и на среднем Чтобы получить уведомление о новых статьях.

Работа с Эриком Энги

Есть ли у вас или ваша компания ценные проекты и продукты? Хотите продлить свою команду с помощью разработчика мирового класса?

Прокат сейчас – Эрик доступен для проката

Эрик может работать полный рабочий день для вас или в вашей компании. Вы или ваша команда нуждаются в помощи на программировании? Книга 1: 1 сеанс с Эриком!