Azure Static Web AppsでReactをはじめーる

はじめに

Azure Static Web Appsで簡単にSPA（シングルページアプリケーション）を作れるようになったので、試してみました。なお、javascript初心者です。

静的 Web アプリ https://azure.microsoft.com/ja-jp/services/app-service/static/

開発環境

• MacBook Pro
• VSCode

導入

Azureポータルを開き、「静的」で検索

　「追加」をクリック

githubアカウントを連携し、リポジトリを作成しておく(gachimoto, private)
index.htmlを追加し、pushしたら、見えた

apiの追加をしていく

package.jsonに"react-router-dom": "^5.2.0"を追加し、

package.json

  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.4.0",
    "react-router-dom": "^5.2.0"
  },

下記の記事を参考にした
React入門 #ルーティングでページを切り替える

App.js

import React from 'react';
import { BrowserRouter, Link, Route } from 'react-router-dom';
// http://www.tohoho-web.com/ex/react.html#routing
// package.jsonに追加 "react-router-dom": "^5.2.0"

function HelloA() {
  return <h1>HelloA</h1>;
}

function HelloB() {
  return <h1>HelloB</h1>;
}

function App() {
  // const value = 'World';
  // return <div>Hello {value}</div>;
  return (
    <BrowserRouter>
      <div>
        <ul>
        <li><Link to="/hello-a">HelloA</Link></li>
        <li><Link to="/hello-b">HelloB</Link></li>
        </ul>
        <Route path="/hello-a" component={HelloA} />
        <Route path="/hello-b" component={HelloB} />
      </div>
    </BrowserRouter>
  );
}

export default App;

React完全に理解した pic.twitter.com/ChTOwveJ91

— 藤本賢志(ガチ本)@pixivFANBOXはじめました (@sotongshi) July 11, 2020