React教程

背景和目标

這是我第一次嘗試使用React，這是我留下的紀錄。
我通過React的教程製作了一個應用程序，並使用AWS進行部署和公開。
完成品的Git倉庫在這裡。

创建应用程序

我們將按照 React 教程進行創建。

准备教程

环境建设

这次我们将为本地环境建立开发环境。

在电脑上安装 Node.js

创建一个React应用程序。

使用下面的命令创建项目。

npx create-react-app my-app

将项目中 src 目录下的所有文件删除。请注意，不要删除 src 目录本身。

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

在 src 目录下创建以下文件。

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

根据教程创建应用程序。

我会按照书写的内容来制作三目棋游戏。关于内容，我会稍后进行补充。

部署

手动部署

自动部署

在src文件夹下创建以下文件，并将其推送到仓库。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Hello from V2</h1>
      </header>
    </div>
  );
}

export default App;

印象

我已经完成了发布应用程序的所有步骤。
相对于Rails等需要数据库的应用程序来说，部署非常简单。(AWS Amplify使得部署变得简单多了)
我已经理解了写作规范，但是关于HTML的渲染方面还需要更多的学习。
我希望通过添加外观和功能来进一步加深理解！