Я планирую использовать структуру Material-UI CSS (http://material-ui.com), чтобы создать интерфейс для веб-сайта, но я не знаю, как использовать эту инфраструктуру.Как использовать материал-ui framework?
Я не знаком с NPM, Browserify и т. Д. Мне просто нужно знать, как мне начать, чтобы узнать, как использовать эту CSS-структуру.
Спасибо за помощь!
Material-UI - это набор компонентов React в дополнение к структуре CSS. Я не знаю, можете ли вы извлечь из этого много пользы, не понимая Реакт.
Самый простой способ начать - установить examples и начать с этого момента.
Если вы не хотите иметь дело с инфраструктурой frontend, например React, и просто хотите, чтобы файлы CSS и JS были настроены так же быстро, как Bootstrap, проверьте библиотеку Materialize.
Я пробовал использовать материализую, и, честно говоря, это приведет вас к тому же беспорядку инструментов, что и все остальное. Созданный CSS сильно избыточен, поэтому трудно сделать много значимой настройки без редактирования исходного кода SASS и построения этого. –
Материализация работает только в браузерах Chrome, IE, Firefox и Safari. –
Если честно, я думаю, что у вас возникла большая проблема в использовании этого материала.
Во-первых, это зависит от структуры представления Facebook под названием «Реакт», поэтому вы должны хорошо знать некоторые основные вещи.
Во-вторых, React полностью является материалом для javascript, и если вы используете его, используя простой javascript, это будет другой большой проблемой, которая может остановить вас. Если вы используете его синтаксический сахар jsx, вам все равно придется платить много чтобы хорошо изучить его, чтобы вы знали, как работает React, а затем вы можете использовать его в своем проекте.
В-третьих, до того, как вышло вышеописанное, все еще требуется несколько вещей, которые вам не нужны, чтобы хорошо знать NodeJs или webpack или NPM, но по крайней мере вы должны хорошо знать, как использовать их в качестве простых инструментов.
Итак, нужно ли вам, чтобы у вас не было другого выбора, кроме как использовать этот материал и действовать только в качестве простой рамки css?
Если нет! вы можете отказаться сейчас, если не будете готовы изучать тонны зависимостей !!!
Если да, Я советую вам сначала установить nodejs, а затем установить npm, а затем использовать npm для установки, возможно, вам все равно нужно установить некоторые инструменты, такие как babel browserify или webpack (лучший), а затем погрузиться в React, а затем вы можете начать изучать, как использовать MUI ~ звуки ... масса
Существует не быстрый способ погрузки для MUI, как они сказали!
Что вы говорите об этом, это правда. Однако, даже если вы знаете, как использовать React (я вроде как делаю), материал-ui требует, чтобы вы научились интегрироваться с целым набором средств разработки, таких как браузер или webpack и/или gulp. Это действительно необходимо? Я имею в виду, не может ли это быть только JS-файл, который я могу включить, похожий на React, Babel и т. Д.? –
Нет, я не думаю, что это необходимо. Как вы знаете, MUI - это не только один файл, он содержит множество компонентов, поэтому, если использование webpack или браузера или glup для работы будет лучше. Я не думаю, что это необходимо, конечно, вы можете включить каждый отдельный файл, используя функцию require или импортировать ключевое слово ES6. Если вы установили весь MUI в качестве зависимости через npm, вы можете включить каждый файл, что хотите. – Joephon
Имел почти такую же проблему. Требуется простой способ начать использовать материал-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>
Где вы вставляете 'npm install material-ui'? –
Это команда, которую вы запускаете из оболочки. Не входит ни в один файл. – dkantowitz
Но где в командной строке? В любом месте, где я пытаюсь, он говорит: «npm» не распознается как внутренняя или внешняя команда « –
Не пугайтесь (кажущейся) сложностью WebPack и другой (большой) инструментов для сборки, и не смущаться завистливые толчки, которые говорят такие вещи, как «Честно говоря, я думаю, что у вас есть большая проблема в использовании этого материала."
Причина, по которой реализация (использование) материала-ui основана на этих инструментах, заключается в том, что в настоящее время это лучший способ написать программное обеспечение, и понимание этого и других фреймворков - отличный способ узнать, почему это« правильный », и становиться опытным в написании качественного модульного кода.
Webpack и другие инструменты для сборки существуют для одной цели: создать один «основной» файл из исходного кода вашего приложения, который можно прочитать и доставить пользователям, браузером в эффективном режиме. Давно прошли те дни, когда мы писали кучу тегов include (script) для каждого ресурса (файла), который нам нужен на наших страницах, и поэтому наши пользователи ждут, пока все они будут загружены с нашего сервера (или несколько местоположений, например: cdns), а затем загрузка страницы. Эффективность y основывается на том факте, что вы можете доставить один (часто сокращенный/сжатый) файл, содержащий весь ваш код и любой код, от которого он зависит (например, Реагировать или даже jQuery).
Инструменты для сборки выполняют это, задавая вам 3 вещи: с какого файла начинать с (основного файла ввода), какие инструменты (загрузчики) используются для обработки неместного кода JavaScript в вашем коде (scss, jsx и т. Д.) И какой файл создать в результате (преобразованный и минитипированный вывод). Этот выходной файл будет использоваться в вашем теге import/script html. Он будет содержать ваш код плюс все другие зависимости, которые были бы кошмаром для включения и разрешения вручную. Here - хороший справочник для начинающих.
Материал-ui, как и многие другие рамки (причина, по которой я потратил время на объяснение всего вышеизложенного), строится с учетом модульности: фрагменты кода могут быть «склеены» или «скреплены» вместе, как и Legos, в чтобы легко создавать большие детали. Вы делаете это, просто используя компоненты, которые вам нужны, в любом компоненте, который вы создаете. Они являются компонентами React, которые являются простым способом определить (написать/создать) «строительные блоки» вашего сайта/приложения. Есть много отличных видеороликов и обучающих программ, которые помогут вам начать работу с React (моим фаворитом является responsejsprogram.com от Tyler McGinnis).
Для того чтобы вы начали использовать материал-ui, они создали несколько примеров, чтобы начать работу using webpack. Выполните простые шаги для установки npm и зависимостей (вы можете найти их в package.json) и откройте каталог/src в своем редакторе. Вы быстро это выясните.
Вы находитесь на правильном пути с правильным отношением, задавая вопросы, учась быть хорошим разработчиком, исследуя и пытаясь найти самый простой способ достичь своей цели.
ссылка «using webpack» не работает – MarioAraya
Можно ли использовать ее без реактивов? Просто '.css' и' .js' и, если возможно, драгоценный камень? –
Я написал sample node project, в котором показано, как связывать компонент реакции для потребления на неактивных веб-сайтах с помощью webpack. Это аналогичный подход к dkantowitz, за исключением того, что он устраняет необходимость вносить реакцию или реагировать на потребительский веб-сайт.
пример, как это будет необходимо расширить, чтобы разрешить использование с несколькими компонентами (например, материал-пользовательский интерфейс), но я думаю, что она обеспечивает хорошую отправную точку для просмотра, Что связываться с WebPack и столпотворение и т.д.
If вы используете реакцию + redux, вы можете использовать https://github.com/takanabe/react-redux-material_ui-boilerplate
шаблон.
Нашли решение? Я все еще блуждаю, как начать развитие. Я в том же состоянии, что и вы упомянули выше. – bozzmob
Привет @bozzmob и все, я могу порекомендовать вам мой [стилизованный пример пользовательского интерфейса Razzle Material] (https://github.com/kireerik/razzle-material-ui-styled-example). –
Также здесь есть статья о том, как использовать Material-UI: [Material-UI: Начните работу (быстро!) ⚡ React 16+] (https: //www.codementor.io/kireerik/material-ui-get-started-fast-react-16-fjan7erke) –