web-dev-qa-db-ja.com

material-ui frameworkの使用方法

ウェブサイトのフロントエンドを設計するために、Material-UI CSSフレームワーク（ http://material-ui.com ）を使用することを計画していますが、どのように考えているのかわかりませんこのフレームワークを使用します。

私はNPM、Browserifyなどにあまり詳しくありません。このCSSフレームワークの使用方法を学ぶために、どのように始めるべきかを知る必要があります。

助けてくれてありがとう！

material-designmaterial-ui
30
jmosawy

Webパックやその他の（すばらしい）ビルドツールの（見かけの）複雑さに脅されないでください。また、「正直に言うと、このようなものを使用するのに大きな問題があります」と言ううらやましいジャークに落胆しないでください。 」

Material-uiの実装（使用法）がこれらのツールに基づいている理由は、現在ソフトウェアを記述する最良の方法であり、これと他のフレームワークを理解することが、これが「正しい」方法であり、熟練するための素晴らしい方法だからです。高品質のモジュール式コードを書くこと。

Webpackおよび他のビルドツールは、1つの目的のために存在します。つまり、アプリのソースコードから1つの「メイン」ファイルを作成し、効率的にユーザーのブラウザーに配信できます。ページに必要なすべてのリソース（ファイル）に多数のインクルード（スクリプト）タグを記述し、これらすべてがサーバー（または複数の場所、たとえばcdns）からダウンロードされるまでユーザーを待たせる時代は過ぎ去りましたその後、ページがロードされます。効率は、すべてのコードとそれが依存するコードを含む1つの（多くの場合、縮小/圧縮された）ファイルを配信できるという事実に基づいています（例：ReactまたはjQuery）。

ビルドツールは、次の3つのことを確認することでこれを実現します：どのファイル（開始メインファイル）、コード内の非ネイティブJavaScriptコードの処理に使用するツール（ローダー）（scss、jsxなど）、および作成するファイル結果として（変換および縮小された出力）。この出力ファイルは、html import/scriptタグで使用するファイルになります。これには、コードに加えて他のすべての依存関係が含まれます。これは、自分で手動で含めて解決するのは悪夢です。 こちら は初心者向けの良いガイドです。

Material-uiは、他の多くのフレームワーク（上記のすべてを説明するのに時間がかかった理由）と同様に、モジュール性を念頭に置いて構築されています。コードの断片は、Legosのように「接着」または「分割」されて、簡単に構築できますより大きな部品。これを行うには、作成するコンポーネントに必要なコンポーネントを含めるだけです。それらはReactコンポーネントであり、サイト/アプリの「ビルディングブロック」を定義（書き込み/作成）する簡単な方法です。多くの優れたビデオとチュートリアルを使用して開始できます= React（私のお気に入りはTyler McGinnisのreactjsprogram.comです））。

Material-uiの使用を開始するために、開始するためのサンプルをいくつか作成しました webpack を使用します。簡単な手順に従ってnpmと依存関係（package.jsonにあります）をインストールし、エディターで/ srcディレクトリを開きます。すぐに理解できます。

質問をしたり、優れた開発者であることを学んだり、目標を達成するための最も簡単な方法を調査したり、探したりすることで、あなたは正しい態度で正しい軌道に乗っています。

39
acyuta108

ほぼ同じ問題がありました。くだらないことなくmaterial-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に含めることができます。私の場合、electronを使用しているので、これが私の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>
23
dkantowitz

Material-UIは、CSSフレームワークであることに加えて、Reactコンポーネントのセットです。Reactを理解することなく、多くの使用が可能かどうかはわかりません。

開始する最も簡単な方法は、 examples をインストールして、そこから開始することです。

Reactのようなフロントエンドフレームワークを扱いたくなく、Bootstrapと同じくらい速いセットアップ時間のCSSおよびJSファイルが必要な場合は、 Materialize ライブラリを確認してください。

10
clay_to_n

正直に言うと、このようなものを使用することで大きな問題が発生したと思います。

まず、FacebookのReactと呼ばれるViewフレームワークに依存しているため、いくつかの基本的なことをよく知っている必要があります。

第二に、Reactは完全にjavascriptのものであり、プレーンjavascriptをコーディングして使用する場合、それはあなたを止めるかもしれない他の大きな問題になります。それで、React=がどのように動作するかを知ることができ、それをプロジェクトで使用できます。

第三に、上記のことが起こる前に、NodeJやwebpackまたはNPMをよく知る必要がないいくつかのことがまだ必要ですが、少なくともそれらを単純なツールとして使用する方法をよく知っている必要があります。

だから、他に選択肢はないが、このようなものを使用し、単純なCSSフレームワークとしてのみ行動する必要があるのは必須ですか？

そうでない場合！依存関係のトンを学ぶ準備ができている場合を除き、あなたは今あきらめることができます!!!

そうであれば！最初にnodejsをインストールしてからnpmをインストールし、npmを使用してreactをインストールすることをお勧めしますbabel browserifyやwebpack（最高）などのツールをインストールしてからReactとその後、MUIの使用方法を学ぶことができます〜音...

彼らが言ったように、MUIのクイックピックアップ方法はありません！

3
Joephon

React + reduxを使用する場合、 https://github.com/takanabe/react-redux-material_ui-boilerplate を使用できます

テンプレート。

2
Ford Guo

サンプルノードプロジェクト を作成し、webpackを使用して非反応ウェブサイトで使用するために反応コンポーネントをバンドルする方法を示しました。 dkantowitzのアプローチと似ていますが、使用するWebサイトにreactまたはreactDomを導入する必要がなくなる点が異なります。

この例は、複数のコンポーネント（material-uiなど）で使用できるように拡張する必要がありますが、webpackやbabelなどに関係するものを確認するための良い出発点になると思います

1
witnessmenow