create-react-app の使い方

こちらのページに create-react-app のインストール方法があります。
[Arch Linux に React Js をインストール](https://qiita.com/ekzemplaro/items/10e8c1a08fa897a18cf0)

次のページの冒頭にあるのと同じ内容を私なりに行ってみました。
[create-react-appを使ってReactでToDoリストを作成するぞ](https://qiita.com/rioc/items/8723c236e10d989e827d)

## プロジェクトの作成 ##

```bash
create-react-app react-todo-list
```

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

```bash
cd react-todo-list
yarn start
```

## コードの作成 ##
   src/App.js を改造
   src/ToDoListItem.js を作成
   src/ToDoListItem.css　を作成

```js: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
// -----------------------------------------------------------------------
```

```js: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
// -----------------------------------------------------------------------
```

```css: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;
}
```

## サーバーを起動 ##

```bash
yarn start
```

ブラウザーで http://hostname:3000 にアクセス
![react_may22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/b2cd428f-a44b-df05-6f72-780a2328275b.png)

## フォルダーの構造 ##

```text
$ 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
```

## 次の環境で確認 ##

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

## Production build ##

```bash
yarn build
```

サーバーの実行

```bash
serve -s build
```

```bash
cd build
http-server
```

```bash
cd build
python -m http.server
```

```bash
php -S 0.0.0.0:8000 -t build
```

## S3 で公開 ##

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

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

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

参考ページ
[AWS S3 でページを公開する](https://qiita.com/ekzemplaro/items/dc2a8403c2096c232cff)