ポートフォリオサイト公開中

cloud9でReactチュートリアルをするための環境開発をする【AWS】

やりたいこと

Reactチュートリアルcloud9で実行したい。

問題点

cloud9でReactを動かしたことがない。

いや、そもそもReact自体に触ったことがない。(cloud9はレイルズチュートリアルで経験済み)

到達目標

Reactチュートリアルチュートリアルの準備 をcloud9で済ませて、チュートリアルを進められるようにする。

もしくはcloud9で create-react-app を使うまでの環境設定。

解決策

cloud9で新しいワークスペースを作る

Create environmentで新しい環境を設定。

Environment settingsはいつも初期設定で流してます。

  • Environment type
    Create a new instance for environment (EC2)
  • Instance type
    t2.micro (1 GiB RAM + 1 vCPU)
  • Platform
    Amazon Linux
  • Cost-saving setting
    After 30 minutes

アプリ作成 create-react-app

$ npx create-react-app my-app

npxもcreate-react-appもあまりよくわからないままとりあえず実行。
そしたらreactで新規アプリの環境構築がなあされる(のだろう。知らんけど。)
それぞれについては以下参考サイトでほんのりと理解することにする。
create-react-app 参考サイト:
npx 参考サイト:

デフォルトファイルを整理する

ここからはチュートリアルに書かれている通りにすればいいのだが、一応書いておく。

srcフォルダの中身を全部消して、index.jsとindex.cssにしろとのことなので、

$ cd my-app/src
$ rm -f *
$ touch index.js index.css
これでOK

index.cssを編集する

元サイトはこちら: Tic Tac Toe css

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;
}

index.jsを編集する

元サイトはこちら: Tic Tac Toe js

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')
);

動作確認をする

ついでのついでなので、作ったアプリがしっかりと動いているのかを確認する。

新しいターミナルを開き(optionキー+T)

$ cd my-app/
$ npm start
そして上部ナビゲーションにあるPreviewからPreview Running Applicationを選択。
すると
このようにプレビューが表示されて、きちんと動作しているのが確認できます。
このままindex.jsなどのファイルを変更し、セーブすれば自動で更新されるのもとてもいいです!!

React チュートリアルを始めよう

ここまでくれば、無事Reactチュートリアルを開始できます。

チュートリアルが終われば、書籍やUdemyの講座などでさらに理解を深めていくといいでしょう。

このコースなんかおすすめです。

フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

Udemyはよくセールをしているので、そのセールのタイミングをうまく狙うと安く購入することができます。

自分にあったコースを自分でお手軽に学ぶことができるので、独学で勉強する人御用達ですね。

React公式のドキュメントはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です