やりたいこと
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
デフォルトファイルを整理する
ここからはチュートリアルに書かれている通りにすればいいのだが、一応書いておく。
srcフォルダの中身を全部消して、index.jsとindex.cssにしろとのことなので、
index.cssを編集する
元サイトはこちら: Tic Tac Toe css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
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)

React チュートリアルを始めよう
ここまでくれば、無事Reactチュートリアルを開始できます。
チュートリアルが終われば、書籍やUdemyの講座などでさらに理解を深めていくといいでしょう。
このコースなんかおすすめです。
フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
Udemyはよくセールをしているので、そのセールのタイミングをうまく狙うと安く購入することができます。
自分にあったコースを自分でお手軽に学ぶことができるので、独学で勉強する人御用達ですね。
React公式のドキュメントはこちら
コメントを残す