我想做的事情 (Wǒ zuò de

使用JavaScript编写React应用程序并引入Cloudscape Design System来使界面看起来像AWS。

制作一个React应用

首先，构建一个React应用程序。

npx create-react-app react-app

然后，会创建一个名为”react-app”的文件夹，请切换到该文件夹中。

cd react-app

自动安装了React应用所需的模块，并生成了类似于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应该是这样的。

  "dependencies": {
    "@cloudscape-design/components": "^3.0.400", #ここが追加された
    "@cloudscape-design/global-styles": "^1.0.12", #ここが追加された
    "@sap/approuter": "^14.3.3",
    "@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文件。

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 管理控制台的界面中，放置一个简单的输入表单和按钮。

import { useState } from "react";
import Header from "@cloudscape-design/components/header";
import Container from "@cloudscape-design/components/container";
import SpaceBetween from "@cloudscape-design/components/space-between";
import Input from "@cloudscape-design/components/input";
import Button from "@cloudscape-design/components/button";

export default function Test() {
    const [value, setValue] = useState("");

    return (
        <Container>
            <SpaceBetween size="m">
                <Header variant="h1">Hello World!</Header>

                <Container>
                    <SpaceBetween size="s">
                        <span>Start editing to see some magic happen</span>
                        <Input
                            value={value}
                            onChange={(event) => setValue(event.detail.value)}
                        />
                        <Button variant="primary">Click me</Button>
                    </SpaceBetween>
                </Container>
            </SpaceBetween>
        </Container>
    );
}

然后，再次进行操作确认，
http://localhost:3000/

当你看到这样的画面时，表示成功了！

如果我们继续制作其他更多的组件，那么我们的网站将变得更加完美且类似于AWS的风格！

参考网站