BLOG

シンラボメンバーのあれこれ

  1. HOME
  2. ブログ
  3. 代表通信
  4. 代表通信~3Dプリンタでの食事生成とReactのHooks APIと

代表通信~3Dプリンタでの食事生成とReactのHooks APIと

こんばんは。代表の草場です。

本日ラボメンのスーパーライターの佐藤さんと3Dプリンタでお菓子を作っている若手の方にインタビューしました。形状が味にどう影響するか、なかなか測定が難しそうです。新たな分野なので、楽しみです。佐藤さんが記事にまとめてくれるので、こうご期待です!

さて、AmazonみたいなモノとかInstagramみたいなモノとかReactで作っています。Hooks API使っています。Hooks APIはReact 16.8で新たに追加された機能です。classを書かずに、Stateや他のReactの機能を利用できるようになります。基本以下のような形です(公式より)。

import React, { useState} from 'react';
function Example() {
//新しいstate変数、count、の宣言
const[count, setCount] = useState(0);
return(
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)} > Click me </button>
</div>
);
}

もちろん、

import React, { useState } from 'react';

も忘れずに。

そもそもHookって?というと、

Hookとは、Reactの機能に「フックイン」するための特別な関数です。例えば useState は、関数コンポーネントに React の状態を追加できるようにする Hook です。他のフックについては後ほど説明します。

どんなときにフックを使うのか?

関数コンポーネントを書いていて、そこにステートを追加する必要があることに気づいた場合、以前はそれをクラスに変換しなければなりませんでした。今では、既存の関数コンポーネントの中でフックを使うことができます。今すぐそれを実行してみましょう。

便利だなー。今後詳しく記事にしていきますが、皆さんお勧めです。

明日もHook。

関連記事