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 参考サイト:

create-react-app が裏で何をやっているか理解する

Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する

npx 参考サイト:

npm 5.2.0の新機能！「npx」でローカルパッケージを手軽に実行しよう

npmに搭載されている「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;
}

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

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

class Square extends React.Component {

render() {

return (

{/* TODO */}

</button>

);

}

class Board extends React.Component {

renderSquare(i) {

return <Square />;

}

render() {

const status = 'Next player: X';

return (

<div>

<div className="status">{status}</div>

{this.renderSquare(0)}

{this.renderSquare(1)}

{this.renderSquare(2)}

</div>

{this.renderSquare(3)}

{this.renderSquare(4)}

{this.renderSquare(5)}

</div>

{this.renderSquare(6)}

{this.renderSquare(7)}

{this.renderSquare(8)}

</div>

);

}

class Game extends React.Component {

render() {

return (

</div>

<div>{/* status */}</div>

</div>

);

}

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

ReactDOM.render(

<Game />,

document.getElementById('root')

);

動作確認をする

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

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

$ cd my-app/

$ npm start

そして上部ナビゲーションにあるPreviewからPreview Running Applicationを選択。

すると

このようにプレビューが表示されて、きちんと動作しているのが確認できます。

このままindex.jsなどのファイルを変更し、セーブすれば自動で更新されるのもとてもいいです!!

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

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

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

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

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

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

やりたいこと

問題点

到達目標

解決策

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

アプリ作成 create-react-app

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

index.cssを編集する

index.jsを編集する

動作確認をする

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

コメントを残す コメントをキャンセル

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

コメントを残すコメントをキャンセル