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

JavaScript

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

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

 

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

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

 

Reactさんをインストール

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

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

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

 

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

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

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

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

 

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

mkdir react-test
cd react-test

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

yarn init

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

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

 

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

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

yarn add react react-dom 
# Webpackも入れておくと後々便利
yarn add webpack webpack-cli

環境はこれで終わり。

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

 

簡単に戯れていく

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

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

import React from 'react';
import ReactDOM from 'react-dom';

// classっぽい作り方
class TestComponent extends React.Component {
  # 描画を行うメソッド
  render(){
    return (<div> Hello World </div>);
  }
}

// 関数的な作り方
//const TestComponent = function(){
//  return (<div> Hello World </div>);
//}

# 実際に画面にコンポーネントを追加
# 以下の例では、bodyにコンポーネントを追加
ReactDOM.render(<TestComponent />, document.body);

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

 

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

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

 

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

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

class TestComponent extends React.Component {
  render(){
    return (
      <div>
        <p>Hello</p>
        <p>World</p>
      </div>
    );
  }
}

// 以下のものは描画できない
return (
  <p>Hello</p>
  <p>World</p>
);

 

 

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

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

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

 

今回はここまで。

おわり。

Posted by しきゆら