Reactの勉強中です。
テキスト内にjsonを(URLを利用したエンドポイントとして)利用するサンプルソースが載っていますが、どのようにエンドポイントを作成するかが省かれています。
調べてみたところ、以下のサイトに立ち当たりました。
https://nakanishi-s.jp/react-x-db/
しかし、これを動かしても、jsonの中身が表示されませんでした。
CodeSandboxでは出来ないのでしょうか?
以下、私が行った手順です。
1.CodeSandboxでプロジェクトを作成。
作成時、「react type」で検索し、officialマークのあるreact Typescriptを選択。
2.terminalを選択
選択すると、cloudにするか?と聞かれる。断れない雰囲気なので、yes coveertをクリックします。
3.しばらく待ちます
ここから、上記URLの内容に沿った設定をして行きます。
4.右上の+マークからNewTerminalを選択
5.npm install json-server --dev を実行
CodeSandbox
1➜ workspace git:(master) ✗ npm install json-server --dev 2npm WARN config dev Please use --include=dev instead. 3 4added 57 packages, changed 1 package, and audited 1291 packages in 10s 5 6241 packages are looking for funding 7 run `npm fund` for details 8 96 high severity vulnerabilities 10 11To address all issues (including breaking changes), run: 12 npm audit fix --force 13 14Run `npm audit` for details. 15npm notice 16npm notice New major version of npm available! 8.15.0 -> 9.6.2 17npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.2 18npm notice Run npm install -g npm@9.6.2 to update! 19npm notice
6.db.jsonはデフォルトのままにしておきます。
db.json
1{ 2 "posts": [ 3 { 4 "id": 1, 5 "title": "json-server", 6 "author": "typicode" 7 } 8 ], 9 "comments": [ 10 { 11 "id": 1, 12 "body": "some comment", 13 "postId": 1 14 } 15 ], 16 "profile": { 17 "name": "typicode" 18 } 19}
7.npx json-server --watch db.json --port 3100 を実行
CodeSandbox
1➜ workspace git:(master) ✗ npx json-server --watch db.json --port 3100 2 3 \{^_^}/ hi! 4 5 Loading db.json 6 Oops, db.json doesn't seem to exist 7 Creating db.json with some default data 8 9 Done 10 11 Resources 12 http://localhost:3100/posts 13 http://localhost:3100/comments 14 http://localhost:3100/profile 15 16 Home 17 http://localhost:3100 18 19 Type s + enter at any time to create a snapshot of the database 20 Watching... 21 22
8.URLを開くけど、何も表示されません・・・。
URL
1http://localhost:3100/posts
CodeSanboxでは使えないのでしょうか?
また、仮に使えない場合、CodeSandboxからエンドポイントとしてjsonを扱えるサービスがあるのでしょうか?
取り止めもない質問ですいません。
追記1)
3100ポートなので、
https://***ouz-3100.csb.app:3100/
でアクセスしてみましたが、ローディングしたままです。

回答1件
あなたの回答
tips
プレビュー