目標
今日は、fetch()を使って前回作成したjson-server (localhost:5000/posts)のデータをブラウザに表示させ、追加・削除機能を実装したいと思います
徐々に、アプリケーションっぽくなってきます
はじめにアプリケーションとjsonサーバーを起動させます。
Vscodeのターミナルを開いて、"npm start"を実行してください。新たにターミナルを開いて、”npm run server"を実行します。jsonサーバが起動しているかは、localhost:5000/postsをurlに入力していただき、ファイルが表示されれば成功です
今回は、App.jsとcomponentsフォルダにAddPost.jsを作成します。
App.js
【18行目】ここのコードがjsonサーバーにデータを取得するメソッドになります。
【26行目】ここのコードがjsonサーバーにデータを追加するメソッドになります。
【40行目】ここのコードがjsonサーバーにデータを削除するメソッドになります。
【57行目】ボタンをクリックすると、handleDelete（）にpostのidを渡す記述になります。これで、idが取得できjsonサーバーにある対象のファイルを削除します。
AddPost.js
こちらのコードは、簡単に説明すると入力した値をaddPostに格納して、App.jsにオブジェクトとして渡しています。
【12行目】ここでは、titleに入力されているか判定させています。
【22と23行目】ここでは、ボタンをクリックしたあと、インプットフォームを空白にするためです。
db.jsonも下記の様に変更してください
ブラウザで確認
リアルタイムで、jsonサーバーのデータをブラウザに表示でき、追加削除機能も実装することができました
次回
npm の便利なパッケージを紹介します！