質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

ReactでマテリアルUIを用いたweb構築の記述方法と構成について

re-re-
re-re-

総合スコア13

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0リアクション

0クリップ

236閲覧

投稿2019/03/03 14:41

React初学者です。現在、入室管理アプリの作成を進めており、その選択肢の一つとしてViewにSPA要素を加えたく、Reactの学習をはじめました。Webに関してはHTML+css+jsの基本的なwebアプリの作成経験、MVCフレームワークではRailsを学び、タスク管理アプリなど基本的なアプリの作成経験がある程度です。動的Webに関してはあまり経験がありません。

React開発環境構築2018を参考にして環境を構築し、SPAの例を元に、単純なマテリアルUIを貼り付けることができるようになりました。

ここで、初歩的なことなのですが、Reactはサイトの例で出てくるようなRect.jsなどのコンポーネントと呼ばれるパーツのようなものを組み合わせてVIEW部分を作っていくために用いると理解しています。各コンポーネントの機能を実装するのがReactなのかなと理解しています。 ここでわからなくなったのが、デザインの構築の部分です。

複数のコンポーネントを貼っていくときに、そのページとしての構成の構築はどこに記述して行うのがよいのか?
例えばBootStrapならhtmlの記述に適応したいデザインを追加していくのでわかりやすかった。Reactではindex.jsxで最後に<div id="root">にApp.jsの仮装DOMを展開しているが、例えば

html

<div id="top"></div> <div id="body"></div> <div id="bottom"></div>

のようにhtmlに大まかに構成を記入してそこにそれぞれの仮装DOMを展開するのがよいのか?
そもそもApp.jsやindex.jsは何を記述するためのファイルを分割しているのか?

CSSやBootstrapは組み合わせてもいいのか?
前述の通り、IDなどに対してCSSやBootstrapを適応してページのレイアウトを構成してもよいのか?例えばReactのコンポーネントの配置を考えるときに、Gridデザインなどを適応したい場合にはどのように記述するのがいいのか?

データの入出力について
データの入出力はどのタイミングで行えばよいのか?いくつか記事を調べたところ、MVCと異なり、FLUXの原則としてはAPIベースで問い合わせを行うこと、そして子コンポーネントではそのAPI呼び出しは行わないこと。というように理解しました。
REDUXについて
つまりこれは「一番大元となり、他のコンポーネントを内部に持つ親コンポーネントを生成する際のコンストラクタ(?)でAPI(GET)を呼び出してJSONかなにかでデータを取得し、FORMやチェックリストは子コンポーネント内部のクリックアクションかなにかでDBなどのサーバサイドへAPI(PUT)呼び出しを行うようにしなさい」 ということでしょうか?

長文となり失礼いたします。サイトなどをいくつかみていたのですが、サイト間で書いてあることやコーディング方法に差分があり、サンプルプログラムもHello Worldやマテリアルを少し動かす程度で終わっているものが多かったため、先に進めず困ってしまっため質問いたしました。アドバイスをお願いいたします。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。