【JS】Reactさんと戯れている – Raspiのダッシュボード計画(2)

スポンサードリンク

こんにちは、しきゆらです。

前々回から、Raspiを使ったダッシュボードを作ろうとしています。

 

今回は、クライアントサイドの方で使いたいと思っているReactさんと戯れていこうと思います。

環境構築から、簡単な触り方までを見ていきます。

スポンサードリンク


 

Reactさんをインストール

ReactさんはNode.jsさんのおヒサモトで動くものらしいです。

ということで、まずはNode.jsの環境を作りましょう。

あとは、Node.jsでパッケージ管理をしてくれるyarnを入れましょう。

 

っといっても、前回の記事で環境を作っていました。

詳しくはそちらを参照してくださいな。

【フロント開発環境】Webpackで開発環境を作る – Raspiのダッシュボード計画(1.1)

「クライアント側 > Webpackを使うための準備」あたり

 

次に、適当なディレクトリを作りましょう。

入ったら、パッケージ管理の準備です。

誘導に従いながらエンターを押して進んでいきます。

最終的には「package.json」と言うものが出来ているはずです。

 

Reactさんのインストールはここから。

以下のコマンドでインストールできます。

環境はこれで終わり。

Webpackに関しても、前回の記事を参照してくださいな。

 

簡単に戯れていく

Reactさんは、要素をコンポーネントとしてつくり、それらを組み合わせて画面を作っていきます。

まずは、コンポーネントの作り方から。

※classっぽい方も関数的な方も、同じものを定義しています。

 

classっぽい方は、コンポーネントに対して処理も付加するようなもの(クリックされたら何かを処理させたい、とか)を作るときに使われます。

そうでなく、単純な要素をJSで定義するような場合は関数的な作り方で良いようです。

 

なお、コンポーネントを描画するためには、要素が1つのみでなければいけません。

複数の要素を描画したい場合は、全体を何らかのタグで囲んで挙げなければいけない。

 

 

とりあえず、コンポーネントを作って描画するまではここまでで出来ます。

あとは、これらのコンポーネントを組み合わせたり、データをもとに再描画をしてもらったりすると楽しくなってきます。

それに関しては、後ほど別記事で更新します。

 

今回はここまで。

おわり。

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。