tagty

React Hooks で外部APIの情報を表示したいときにはどうすればよいのか？

React で Hooks を使っているとします。 画面を表示した時に、外部APIから取得した情報を表示したい場合には、どうすればよいでしょうか？

useEffect の中で axios を使う

React Hooks で画面を表示したときに一度だけ処理を行いたいときには useEffect を使います。 外部APIにリクエストをするのに、今回は axios を使います。

txoof

Updated Instructions for App Building

@bpteague Has an excellent update solution as of February 2025 using modern tools and an updated workflow.

This gist will remain here, but is deprecated. I'll keep it here historical and link-preservation purposes only. I strongly encourage everyone to check out the solution above!

Setup

• Create a developer account with Apple
  • https://developer.apple.com and shell out $99 for a developer account
• Download and install X-Code from the Apple App Store

LeeDDHH

置換で改行を削除する

:s/\n//g

文字列を一括削除

:%d

現在の行をコピー

LeeDDHH

一覧

• その都度記載
• sed
• 正規表現
• grep
• awk
• sortとuniq
• xargs
• bashによるメタプログラミング

LeeDDHH

ルートディレクトリの全体像

ほとんどのコードは src ディレクトリにあり、以下のような構造になる

src
|
+-- assets # 画像、フォントなどの静的ファイルを全て含む
|
+-- components # アプリケーション全体で使用される共有コンポーネント

LeeDDHH

入力した値をすべて削除する

• カーソル位置から行の先頭までの文字が削除する
  • Ctrl + U
• カーソル位置から行末までを削除
  • Ctrl + K

カーソルの移動

• カーソルを行の先頭に移動

OrionReed

// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
(() => {
  const SHOW_SIDES = false; // color sides of DOM nodes?
  const COLOR_SURFACE = true; // color tops of DOM nodes?
  const COLOR_RANDOM = false; // randomise color?
  const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
  const MAX_ROTATION = 180; // set to 360 to rotate all the way round
  const THICKNESS = 20; // thickness of layers
  const DISTANCE = 10000; // ¯\\_(ツ)_/¯

LeeDDHH

• react-sample

資料

• CodePenでReactを使用する方法 | sinpe-Blog
• CodepenでReactを使ってみます