おにちゃん塾の商品一覧*準備中

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

【入門編】React hooksとは|基礎知識を徹底解説【書籍付き】
URLをコピーする
URLをコピーしました!
本記事の想定読者
  • React hooksとは何なのか
  • React hooksの使い方を学習したい
  • React hooksの学習教材を知りたい

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

おにちゃん

執筆者:2021年4月中旬からreactの学習を始めている大学生です。


2021年5月18日執筆

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


本記事の概要

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

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

おにちゃん

質問などがありましたら、Twitterで受け付けています。

(スポンサーリンク)

目次

React hooksとは

React hooksとは
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で記述するメリット

  • 複雑なクラスコンポーネントを格段に減らせる
  • propsバケツリレーを対策できる
  • コンポーネント間でstateが共有しやすい
  • ライフサイクルメソッドの分だけ学習コストが下がる

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


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

【入門】React hooksで使われる基本フック一覧
【入門】React hooksで使われる基本フック一覧
  • usestate
  • useeffect
  • usecontext
  • usereducer
  • usecallback
  • usememo
  • useref
おにちゃん

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


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

おにちゃん塾ではReactフォルダの中でファイルを作成していきます。

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

  • mkdir React
  • cd React

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

  1. npx create-react-app react_hooks
  2. cd react_hooks
  3. npm start

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

おにちゃん

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


フック1:useState

React hooksひとつ目はuseStateです。

  • 関数コンポーネントでstateが使える
  • 状態を管理できるようになる
  • 数値、真偽値、文字列扱える
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を扱う場合にやるべきことは下記の通りです。

  1. useStateをインポートする
  2. 状態変数、状態変数を変化させる関数を準備

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

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

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


フック2:useEffect

React hooksふたつ目はuseEffectです。

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

おにちゃん

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

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

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

  • マウント時:console.logが読まれる
  • アップデート時:console.logが読まれる
  • アンマウント時:console.logが読まれる

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


フック3:usecontext

現在準備中です

フック4:usereducer

現在準備中です

フック5:usecallback

現在準備中です

フック6:usememo

現在準備中です

フック7:useref

現在準備中です。


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

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

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

  • おにちゃん塾
  • 書籍
  • 動画教材
おにちゃん

おにちゃん塾ではReactに関する知識を沢山公開していますで、無料で学習したい方はぜひ活用してみてください


React hooksが学べる書籍

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

  • Kindle価格:500円
  • Kindle Unlimitedユーザー:無料

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

おにちゃん

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


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

  1. Kindle Unlimitedの30日間の無料期間を活用して、無料の技術書を沢山読む。
  2. 30日が経つ前にKindle Unlimitedを解約する

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

おにちゃん

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

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


React hooksが学べる動画教材

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

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

おにちゃん

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


まとめ:React hooksをマスターしよう

まとめ:React hooksをマスターしよう
まとめ:React hooksをマスターしよう

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

本記事のまとめ
  • React hooksを使えばクラスコンポーネントを削減できる
  • React hooksには7つほど基本的な使い方がある
  • React hooksを学びたいならおにちゃん塾がおすすめです
おにちゃん

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



読者におすすめの記事

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる