【入門編】React hooksとは｜基礎知識を徹底解説【書籍付き】

本記事は上記の方に向けて、執筆しています。

2021年5月18日執筆

本記事は常に最新の情報を掲載しております。

本記事の概要

本記事は私のようにこれからReactを始める方対象に執筆しています。

私がよく躓いたポイントなどを重点的に解説していきますので、react初心者の方でも安心してご覧ください

あわせて読みたい

【技術ブログ】おすすめブログサービス【始め方から収益化まで】 技術ブログの始め方を知りたい。始める際におすすめのブログサービスを有名ブロガーから聞きたい 本記事は上記の方を想定しています。 結論から言うと、技術ブログを始...

React hooksとは

React hooksとは、Reactのクラスコンポーネントでしか使えなかったstateやライフサイクルを関数コンポーネントでも使用できるようにしたものです。

React hooksが導入されるまではクラスコンポーネントを活用していた

以前までは、React hooksがなかったので、クラスコンポーネントを活用して、状態管理などを行なっていました。

実際に上記の動画のような機能を作るときのReact hooksとクラスコンポーネントの違いを見てみましょう。

クラスコンポーネント

import React from 'react';

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      count: 0
    }
  }
  render(){
    return(
      <React.Fragment>
        <h1>React hooksとクラスコンポーネントの違い</h1>
        <h2>{this.state.count}</h2>
        <button onClick={() => this.setState({count: this.state.count + 1})}>ボタン</button>
      </React.Fragment>
    )
  }
}

export default App;

一方の関数コンポーネントは下記の通りです。

import React, {useState} from 'react';

function App(){
  const [count, setCount] = useState(0);

  return(
    <React.Fragment>
      <h1>React hooksとクラスコンポーネントの違い</h1>
      <h2>{count}</h2>
      <button onClick={()=> setCount(count + 1)}>ボタン</button>
    </React.Fragment>
  )
}

export default App;

こんなにも、React hooksとクラスコンポーネントでは記述量が異なります。

React公式サイトもReact hooksを推奨しているので、これからの学習者はReact hooksを中心に学んでいくべきです。

もちろん、クラスコンポーネントの理解も必要ですが、最初は不要だと思います。*後で覚えればよし

React hooksで記述するメリット

今はわからなくても、徐々にReact hooksのメリットを実感するはずです。

【入門】React hooksで使われる基本フック一覧

React hooksで使われているフックをまとめると下記の通りです。

ここからは、React hooksを実際に手を動かしながら学習してみましょう。

React hooksファイルを作成しよう

当サイトではReactフォルダの中でファイルを作成していきます。

まずは下記のコマンドでフォルダを作成します。作成後はReactフォルダに移動しましょう。

Reactフォルダ内で【react_hooks】のReact作業フォルダを作成しましょう。

これでReact hooksを学ぶ土台は完了です。

当サイトで、React hooksについて学ぶときはこの作業フォルダを活用するので、削除しないようにしておきましょう。

React hooks1つ目「useState」

React hooksひとつ目は『useState』です。

import React, {useState} from 'react';

function App(){
  const [count, setCount] = useState(0);

  return(
    <React.Fragment>
      <h1>React hooksとクラスコンポーネントの違い</h1>
      <h2>{count}</h2>
      <button onClick={()=> setCount(count + 1)}>ボタン</button>
    </React.Fragment>
  )
}

export default App;

React hooksでuseStateを扱う場合にやるべきことは下記の通りです。

たったこれだけで、React hooksの一種類を扱うことができます。

今回紹介しているコードは数値ですが、下記の記事では真偽値、文字列など、useStateの使用ケースをたくさん公開しています。

useStateを深く学びたい方は下記の記事を参考にしてください。

あわせて読みたい

【useState編】React hooksをイチから理解しよう 本記事の想定読者 useStateとは何かuseStateの使い方 本記事は、上記の悩みを解決したい方向けに執筆しています。 useStateはかなり多くの場面で使いますので、早い段階...

React hooks２つ目「useEffect」

React hooksふたつ目は『useEffect』です。

useEffectとは、React Componentの時に使用していたマウント→アップデイティング→アンマウンティングの処理をひとまとめにしたものです。

useEffectを扱うためには『ライフサイクル』という前提知識が必要です。

あわせて読みたい

【設計】Reactのライフサイクルメソッドを分かりやすく解説 本記事の想定読者 Reactの土台となるライフサイクルメソッドを完璧にマスターしたいuseEffectを扱えるようになるためのReactのライフサイクルメソッドをマスターしたい ...

useEffect(() => {
    console.log("click")
},);

useEffectは上記のような書き方をしていきます。

ここを理解できないと、firebaseとの連携が上手くできませんので、必ず理解できるようにしましょう。

あわせて読みたい

【useEffect編】React hooksをイチから理解しよう 本記事の想定読者 useEffectとは何かuseEffectの使い方 本記事は上記の悩みを解決したい方向けに執筆しています。 2021年5月20日執筆 本記事は常に最新の情報を掲載して...

フック3：usecontext

現在準備中です

フック4：usereducer

現在準備中です

フック5：usecallback

現在準備中です

フック6：usememo

現在準備中です

フック7：useref

現在準備中です。

React hooksを本気で学習したい方向け

React hooksを本気で学習したい方は下記の３つの方法をおすすめしています。

エコおじい

当サイトではReactに関する知識を沢山公開していますで、無料で学習したい方はぜひ活用してみてください

React hooksが学べる書籍

唯一、React hooksについて学べるKindleの本でありました。

私はこの本をKindle Unlimitedの30日間無料期間中に無料で購入しました

エコおじい

今は、無料期間が終わり、Kindle Unlimited月額料金980円を支払っています。

裏技無料でReact系の技術書を読む方法

この方法を使えば、Reactの技術書を無料で沢山読むことができるので、かなりおすすめの方法です。

エコおじい

無料期間が終了しても月額1000円程度なので、本で技術を学ぶ方はそのまま契約してても良いかもです。

Kindle Unlimitedに登録する
無料期間30日間
登録は簡単
React系の技術書が沢山読める

React hooksが学べる動画教材

React hooksが学べるUdemyの動画教材は下記の２つがおすすめです。

どちらか一本でも満足できる内容になっています。

エコおじい

個人的にはfirebaseが扱える動画教材をおすすめします。

まとめ：React hooks入門｜徹底的に使い方をまとめました

ここまで『【入門編】React hooksとは｜基礎知識を徹底解説【書籍付き】』の解説をしてきました。

エコおじい

本記事は以上です。最後までご覧下さりありがとうございました

読者におすすめの記事