Reactでよく利用するjsの書き方紹介とRechartsの紹介

こんにちは、きーぼうです。
Reactの勉強をはじめて数ヶ月になります。
今回は、Reactでよく利用するjsの書き方とReactのチャート描画ライブラリのRechartsを使ってみたのでその内容を紹介します。

Reactでよく利用するjsの書き方

 

アロー関数

従来の関数

アロー関数

• アロー関数の注意事項
  • 引数が１つの場合は、()を省略できる
    
    PHP

    const test2 = value => { return value; }; // 実行した結果の出力 console.log(test2('アロー関数だよ'));

    1 2 3 4 5

    const test2 = value => {         return value;     };     // 実行した結果の出力     console.log(test2('アロー関数だよ'));

  • 処理を単一行で返却する場合は波カッコとreturnを省略できる
    
    PHP

    const test3 = (value1, value2) => value1 + value2; // 実行した結果の出力 console.log(test3(10, 20)); //30

    1 2 3 4

    const test3 = (value1, value2) => value1 + value2;       // 実行した結果の出力     console.log(test3(10, 20)); //30

    
     

分割代入

分割代入をしない場合

分割代入

 

 

スプレッド構文「…」

「…」で内部の要素を順番に展開します。

 

＊もし配列に値が４つ以上ある場合は、最初の３つだけが使用される

Rechartsを使ってみた

使い方は、簡単です。
1.npm install rechartsでRechartsをインストール
2.サンプルから利用したいグラフを選びましょう。
3.見た目の表示を確認して完了

私の開発環境で試してみた画像は以下になります。

Rechartsを使ってみた感想

学習コストもそこまで高くなく、導入も比較的に容易と感じたので、Reactプロジェクトへの導入はありかと思いました。
添付した画像が見づらくて申し訳ないですが、リッチなグラフになってるのでぜひぜひ皆さん試してみてください。

まとめ

簡単ではありますが、Reactでよく利用するjsの書き方とReactのチャート描画ライブラリのRechartsを使ってみた内容を紹介させていただきました。
React習得は大変ですが、１つずつ学んでいけばきっと幸せな未来があると信じて一緒に頑張りましょう！
きーぼう