ReactアプリでCloudScapeを試してみた

やりたいこと

・JavaScriptでReactアプリを作る
・Cloudscape Design Systemを導入し、画面をAWSっぽくする

①Reactアプリを作る

まず、Reactアプリを構築

npx create-react-app react-app

すると、react-appというフォルダが作られ、フォルダへcdしてください

cd react-app

Reactアプリに必要なモジュールが自動で入れられ、package.jsonがこんな感じ

package.json

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

フォルダ構成がこんな感じ

アプリを起動してみてください。

npm start

ブラウザで開くと、
http://localhost:3000/

Reactの画面が出たら成功！

②CloudScapeを入れてみる

まず、react-app配下にCloudScapeに必要なモジュールを入れる

npm install @cloudscape-design/global-styles
npm install @cloudscape-design/components

すると、package.jsonのdependenciesがこうなるはず

package.json

  "dependencies": {
    "@cloudscape-design/components": "^3.0.400", #ここが追加された
    "@cloudscape-design/global-styles": "^1.0.12", #ここが追加された
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

これでCloudScapeのソースコードが書けるようになった

③CloudScapeで画面を作る

srcフォルダの下にあるファイルは、Reactのコンポーネントなので、ここでCloudScapeを作る

まず、初期段階で作られたindex.jsを微修正

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Test from './Test'; #これから作るCloudScapeのコンポーネント
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Test /> {/* CloudScapeで作ったコンポーネントを入れ替える */}
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

次に、Test.jsというコンポーネントを作成し、src配下に入れる
このソースは、AWSマネジメントコンソール画面風に、シンプルな入力フォームとボタンを配置する

Test.js

import React from 'react';
import { DatePicker } from 'antd';

const App = () => {
  return <DatePicker />;
};

export default App;

すると、もう一度で動作確認
http://localhost:3000/

このように、画面が出たら成功！

ほかにどんどんコンポーネントを作ったら、もっど完璧なAWS風のWebサイトになるよね！

参考サイト