おすすめチュートリアルの紹介④　Build a CRUD App in React with Hooks

私は以前、「Tania Rascia」さんが作成された「React Tutorial」と「Vue Tutorial」を紹介しましたが、今回も同じ方が作成された「Build a CRUD App in React with Hooks」を紹介します。

「今までクラスコンポーネントでアプリを作ってきたけど、これからは関数コンポーネントでアプリを作っていきたい」と考えている人におすすめのReact Hooksの入門チュートリアルです。

React Developer Roadmapの紹介

私は以前、下記の記事の中で「React Developer Roadmap」について簡単に紹介しました。

React Developer Roadmapは「Fundamental Topics」と「Advanced Topics」のように難易度に分けてまとめられており、React Hooksについても赤線箇所と青線箇所の２箇所に分けて整理されています。

下記にReact Developer Roadmapのリンクを貼っておきます。

React Developer Roadmap: Learn to become a React developer

本記事で紹介する「Build a CRUD App in React with Hooks」では「Basic Hooks」の「useState」と「useEffect」の２つが登場しています。

Build a CRUD App in React with Hooksの概要

本記事では下記のチュートリアルを紹介します。

このチュートリアルはこれからReact Hooksを使ってみようという方におすすめのチュートリアルです。

下記のような簡単なアプリを関数コンポーネントとReact Hooksで作ることを目標とした内容になっています。

おすすめ理由は次の４点です。

・アプリのコードがシンプルで読みやすい
・React Hooksの「useState」と「useEffect」だけが使われている
・アプリのコードをGitHubからダウンロードできる
・アプリのデモサイトが存在する

GitHubのサイトのリンクを下記に貼っておきます。

GitHub - taniarascia/react-hooks: Build a CRUD app in React with Hooks.

デモサイトのリンクを下記に貼っておきます。

React CRUD App with Hooks

Build a CRUD App in React with Hooksへの行き方

Build a CRUD App in React with Hooksのサイトへの行き方ですが、検索を使うのが便利です。

「tania react hooks」というワードで検索するとすぐに見つかります。

アプリをインストールして動かしてみよう

デモサイトが用意されているので、アプリを動かすだけならそのサイトを利用すれば良いですが、自分のパソコンにインストールして動かすことができるとコードをいじっていろいろと調べたりできるので便利です。

インストールは次の手順で行います。

１．gitとNode.jsをインストールしておく
２．git clone https://github.com/taniarascia/react-hooks.git　を実行
３．cd react-hooks　を実行
４．npm install　を実行

私のパソコンでインストールを行ってみましたので画面を示しておきます。

１．gitとNode.jsをインストールしておく

２．git clone https://github.com/taniarascia/react-hooks.git　を実行

３．cd react-hooks　を実行

４．npm install　を実行

インストールが無事に終了すればアプリの起動は「npm start」で行います。

下記がアプリの画面です。

以上、ざっと紹介しましたが、興味を持たれた方は是非とも「Tania Rascia」さんのページを訪問してみてください。たくさんのチュートリアルが存在します。