create-react-app の使い方

こちらのページに create-react-app のインストール方法があります。
Arch Linux に React Js をインストール

次のページの冒頭にあるのと同じ内容を私なりに行ってみました。
create-react-appを使ってReactでToDoリストを作成するぞ

プロジェクトの作成

create-react-app react-todo-list

開発サーバーで動作の確認

cd react-todo-list
yarn start

コードの作成

src/App.js を改造
src/ToDoListItem.js を作成
src/ToDoListItem.css　を作成

src/App.js

// -----------------------------------------------------------------------
//	App.js
//
//						May/22/2021
// -----------------------------------------------------------------------
import React, { Component } from 'react'
import './App.css'
import ToDoListItem from "./ToDoListItem.js"

class App extends Component {
  render() {
    return (
      <div className="App">
        <div>
          <ToDoListItem title="灰かぶり" description="グリム童話" />
          <ToDoListItem title="白雪姫" description="グリム童話" />
          <ToDoListItem title="ヘンゼルとグレーテル" description="グリム童話" />
        </div>
      </div>
    );
  }
}

export default App
// -----------------------------------------------------------------------

src/ToDoListItem.js

// -----------------------------------------------------------------------
//	ToDoListItem.js
//
//					May/05/2019
// -----------------------------------------------------------------------
import React, { Component } from 'react'
import './ToDoListItem.css'

class ToDoListItem extends Component {
  render() {
    const {
      title,
      description
    } = this.props;

    return (
      <div className="ToDoListItem">
        <div className="ToDoListItem-title">{title}</div>
        <div className="ToDoListItem-description">{description}</div>
      </div>
    );
  }
}

export default ToDoListItem
// -----------------------------------------------------------------------

src/ToDoListItem.css

.ToDoListItem {
  border: 1px solid aquamarine;
  margin: 12px;
  border-radius: 4px;
  width: 300px;
  background-color: #fafbfd;
  box-shadow: 1px 2px 5px 3px rgba(0,0,0,.1);
  padding: 4px 2px;
}

.ToDoListItem-title {
  font-size: 18px;
  margin: 0 8px 4px;
  border-bottom: 1px solid #333;
  text-align: left;
  padding: 4px 8px;
}

.ToDoListItem-description {
  word-wrap: break-word;
  padding: 8px;
}

サーバーを起動

yarn start

ブラウザーで http://hostname:3000 にアクセス

フォルダーの構造

$ tree -I node_modules
.
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── ToDoListItem.css
│   ├── ToDoListItem.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock

次の環境で確認

$ node -v
v18.4.0
$ yarn -v
1.22.5
$  npx create-react-app --version
3.4.0

Production build

yarn build

サーバーの実行

serve -s build

cd build
http-server

cd build
python -m http.server

php -S 0.0.0.0:8000 -t build

S3 で公開

test-re01 というバケットで公開するとすると、

aws s3 sync build/ s3://test-re01 --delete

次の URL にアクセスする
http://test-re01.s3-website-ap-northeast-1.amazonaws.com/

参考ページ
AWS S3 でページを公開する