Я планирую использовать платформу Material-UI CSS (http://material-ui.com), чтобы создать интерфейс для веб-сайта, но у меня нет любая идея о том, как использовать эту инфраструктуру.
Я не знаком с NPM, Browserify и т.д. Мне просто нужно знать, как мне начать, чтобы узнать, как использовать эту CSS-инфраструктуру.
Спасибо за любую помощь!
Не запугайте (очевидную) сложность webpack и других (больших) инструментов построения и не обескураживайте завистливыми толчками, которые говорят такие вещи, как "Честно говоря, я думаю, что у вас возникла большая проблема используйте этот материал".
Причина, по которой реализация (использование) material-ui основана на этих инструментах, заключается в том, что в настоящее время это лучший способ написать программное обеспечение и понять эту и другие рамки - отличный способ узнать, почему это "правильный" способ, и стать опытным в написании качественного модульного кода.
Webpack и другие инструменты сборки существуют для одной цели: создать один "основной" файл из исходного кода вашего приложения, который может быть прочитан и доставлен в браузер пользователя эффективным образом. Давно прошли те дни, когда мы писали кучу тегов include (script) для каждого ресурса (файла), который нам нужен на наших страницах, и поэтому наши пользователи ждут, пока все они будут загружены с нашего сервера (или нескольких местоположений, например: cdns), а затем страница будет загружаться. Эффективность основана на том факте, что вы можете доставить один (часто сокращенный/сжатый) файл, содержащий весь ваш код и любой код, от которого он зависит (например, React или даже jQuery).
Создайте инструменты, выполнив это, задав вам 3 вещи: с какого файла начать (основной файл записи), какие инструменты (загрузчики) использовать для обработки нелокального кода JavaScript в вашем коде (scss, jsx и т.д.) и что файл для создания в результате (преобразованный и уменьшенный вывод). Этот выходной файл будет использоваться в вашем теге html import/ script. Он будет содержать ваш код плюс все другие зависимости, которые были бы кошмаром для включения и разрешения вручную. Здесь является хорошим руководством для начинающих.
Материал-ui, как и многие другие фреймворки (причина, по которой я потратил время на объяснение всего вышеизложенного), строится с учетом модульности: фрагменты кода могут быть "склеены" или "склеены" вместе, как Legos, для того, чтобы чтобы легко создавать большие части. Вы делаете это, просто используя компоненты, которые вам нужны, в любом компоненте, который вы создаете. Они являются компонентами React, которые являются простым способом определить (написать/создать) "строительные блоки" вашего сайта/приложения. Есть много отличных видеороликов и обучающих программ, которые помогут вам начать работу с React (мой любимый - responsejsprogram.com Тайлер Макгиннис).
Чтобы начать работу с материалом-ui, они создали несколько примеров для запуска с помощью веб-пакета. Выполните простые шаги для установки npm и зависимостей (вы можете найти их в package.json) и откройте каталог /src в своем редакторе. Вы это выясните в кратчайшие сроки.
Вы находитесь на правильном пути с правильным отношением, задавая вопросы, учитесь быть хорошим разработчиком, исследуете и пытаетесь найти самый простой способ достичь своей цели.
Имел почти такую же проблему. Требуется простой способ начать использовать материал-ui без тарабарщины. Вот что я сделал:
npm install material-ui
npm install -g webpack
webpack node_modules/material-ui/lib/index.js material-ui.js
Это дало мне javascript файл, material-ui.js, затем я мог включить его в свой HTML. В моем случае я использую электрон, так что это мой HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="content"></div>
<script>
require('./material-ui.js')
</script>
<script type="text/babel">
import React from 'react';
import FlatButton from 'material-ui/lib/flat-button';
const FlatButtonExampleSimple = () => (
<div>
<FlatButton label="Default" />
<FlatButton label="Primary" primary={true} />
<FlatButton label="Secondary" secondary={true} />
<FlatButton label="Disabled" disabled={true} />
</div>
);
ReactDOM.render(
<FlatButtonExampleSimple />,
document.getElementById('content')
);
</script>
</body>
</html>
Material-UI - это набор компонентов React, а не CSS. Я не знаю, можете ли вы извлечь из этого много пользы, не понимая Реакт.
Самый простой способ начать - установить examples и начать с него.
Если вы не хотите иметь дело с инфраструктурой frontend, такой как React, и просто хотите, чтобы файлы CSS и JS были настроены так же быстро, как Bootstrap, проверьте Materialize.
Честно говоря, я думаю, что у вас возникла большая проблема в использовании этого материала.
Во-первых, это зависит от инфраструктуры Facebook View под названием React, поэтому вам нужно знать некоторые основные вещи.
Во-вторых, React полностью является файлом javascript, и если вы используете его при кодировании простого javascript, это будет другой большой проблемой, которая может остановить вас. Если вы используете синтаксический сахар jsx, вам все равно придется платить много чтобы хорошо изучить его, чтобы вы знали, как работает React, а затем вы можете использовать его в своем проекте.
В-третьих, до того, как вышесказанное произойдет, есть еще несколько вещей, требующих, чтобы вам не нужно было хорошо знать NodeJs или webpack или NPM, но по крайней мере вы должны хорошо знать, как использовать их в качестве простых инструментов.
Итак, нужно ли вам, чтобы у вас не было другого выбора, кроме как использовать этот материал и действовать только как простая css-инфраструктура?
Если нет! вы можете отказаться сейчас, если не будете готовы изучать множество зависимостей!!!
Если да! Я советую вам сначала установить nodejs, а затем установить npm, а затем использовать npm для установки, возможно, вам все равно нужно установить некоторые инструменты, такие как babel browserify или webpack (лучший), а затем погрузиться в React, а затем вы можете начать изучать, как использовать MUI ~ звуки... масса
Там нет быстрого пути для MUI, как они сказали!
Я написал проект образец node, в котором показано, как связать компонент реагирования для потребления на неактивных веб-сайтах с помощью webpack. Это аналогичный подход к dkantowitz, за исключением того, что он устраняет необходимость вносить реакцию или реагировать на потребительский веб-сайт.
Пример, поскольку он должен быть расширен, чтобы разрешить использование с несколькими компонентами (например, material-ui), но я думаю, что это хорошая отправная точка для просмотра того, что связано с webpack и babel и т.д.
Если вы используете реакцию + redux, вы можете использовать https://github.com/takanabe/react-redux-material_ui-boilerplate
шаблон.