LoginSignup
0
0

More than 1 year has passed since last update.

React チュートリアル パート4 (useEffectフック)

Posted at

image.png

目標:military_medal:

ReactJsの新機能、”useEffect( )フック”を使ってみましょう:bangbang:
”useEffect( )フック”は、アプリケーションがレンダリングされたタイミングで動く機能になります:bangbang:

App.jsに記述

※前回までの、記述は一度すべて削除してください!
そして、下記の様に記述します!
記述内容は説明いたしますので安心を:blush:

image.png

まず、ターミナルに"npm i axios"を記述して、Axiosアプリケーションにインストールします!
これは、外部からJSONファイルを読み込む機能になります。

【1行目】 axiosをimportします。

【2行目】 useEffectをimportします。

【7行目】 useEffectとaxiosを使って、外部のJSONファイルを取得します(fetchの機能と全く同じです)。下記のサイトからJSONファイルを取得しています(ご参考に)!

【11行目】 responseにJSONファイルが入って、それをコンソールに表示させています。

コンソールで確認:fire::fire:

image.png

しっかりJSONファイルを取得できていますね:bangbang:
記述がとてもシンプルなので、わかりやすいですね!

次回:bell:

:white_check_mark: useEffect()で取得したデータをブラウザに表示させましょう!

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0