30

Web サイトのフロントエンドをデザインするために、 Material-UI CSS フレームワーク ( http://material-ui.com ) を使用する予定ですが、このフレームワークの使用方法がわかりません。

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

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

4

6 に答える 6

42

webpack やその他の (素晴らしい) ビルド ツールの (明らかな) 複雑さに怯えてはいけません。 ."

material-ui の実装 (使用法) がこれらのツールに基づいている理由は、現在ソフトウェアを作成する最良の方法であり、このフレームワークや他のフレームワークを理解することが、これが「正しい」方法である理由を学び、習熟するための優れた方法であるためです。高品質のモジュラーコードを書くこと。

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

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

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

material-ui を使い始めるために、 webpack の使用を開始するためのサンプルがいくつか作成されています。簡単な手順に従って npm と依存関係 (package.json で見つけることができます) をインストールし、エディターで /src ディレクトリを開きます。あなたはすぐにそれを理解するでしょう。

質問をすること、優れた開発者になることを学ぶこと、目標を達成するための最も簡単な方法を研究して見つけようとすることによって、あなたは正しい姿勢で正しい道を進んでいます。

于 2016-03-29T12:53:59.813 に答える
11

Material-UI は、CSS フレームワークであることに加えて、React コンポーネントのセットです。React を理解していないと、それを十分に活用できるかどうかはわかりません。

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

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

于 2015-04-23T19:15:56.773 に答える
3

正直なところ、このようなものを使用するには大きな問題があると思います。

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

第二に、React は完全に JavaScript のものであり、単純な JavaScript をコーディングして使用すると、別の大きな問題になり、それがあなたを止める可能性があります。 React がどのように機能するかを理解し、それをプロジェクトで使用できるようにします。

第三に、上記のことが起こる前に、NodeJs や webpack や NPM について十分に理解する必要はありませんが、少なくともそれらを単純なツールとして使用する方法を十分に理解する必要があることがいくつかあります。

では、他に選択肢がなく、このようなものを使用し、単純な css フレームワークとしてのみ機能させる必要がありますか?

そうでなければ！大量の依存関係を学ぶ準備ができている場合を除いて、今すぐあきらめることができます!!!

もし、そうなら！最初にnodejsをインストールしてからnpmをインストールし、npmを使用してreactをインストールすることをお勧めします.babel browserifyやwebpack（最高）などのツールをインストールしてReactに飛び込む必要があるかもしれません.MUIの使い方を学び始めることができます. 〜音...質量

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

于 2015-10-24T19:29:52.020 に答える
2

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

テンプレート。

于 2016-07-14T02:55:26.830 に答える
1

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

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

于 2016-05-04T10:22:18.463 に答える