4/18 火曜日 雨→晴れ 暑いなあ
やほー、react勉強、スタート！
僕もわからないことがいっぱいあり、react.jsを勉強する経過を共有して,
react.jsに興味を持つ友達と共に成長していく気持ちです。
まあ、日本人じゃないので、日本語の使い方おかしいところ遠慮なくご指摘ください。
どうぞ、よろしく。
Php,java,.netを使って10何年もずっとサーバー側プログラムを作っていましたが、フロント側の世界へ一歩踏み出し始めました。
angularとreactとどっちってちょっと迷いましたがreactの方はスペル短いから、じゃあ決まり
今日のミッションは？
1. プロジェクト作成
2. もちろんHello world!を出力でしょう
いきましょう！
ミッション1：プロジェクト作成
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
シンプルに見えるんだけど、npmって何？
Google先生に聞きましたが、javascriptのパッケージを管理するもんですね。
パッケージ及び依存するパッケージ全部管理してもらう素晴らしいものです。
phpだとcomposer、javaだとmaven、似たものですね
下手に説明したくないので、これをご参考まで
npmについてへ
自分の環境にnpmコマンドあるか、チェックしてね
$ npm -v
なかったら、node.jsをダウンロードしてインストルするだけでOKです。
nodejsインストールはこちらへ
よし、準備できました。インストルしましょう！
STEP1:開発環境をインストール
npm install -g create-react-app
-g:パッケージをグローバル領域にインストールするという意味です。
もっと知りたい場合は
npmについてへ
僕の場合、下記の場所にインストールしました
$ npm -g install create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
/usr/local/lib
└─┬ create-react-app@1.3.0
・・・省略・・・
見てわかるだろう、create-react-appコマンドは実はnode_modules/create-react-app/index.jsが実行されます。
こちらはnode.jsの知識がいるんだろう。あんまり詳しくないので、今の時点はサーバーで実行するjavascriptぐらいわかれば結構でしょう。
さて、自分の初めてのreact.jsプロジェクトを作りましょう
STEP2:開発環境をインストール
create-react-app my-app
my-appはプロジェクトのパスを指定することができます。
僕だと下記のように作成しました。
$ create-react-app ~/dev/myworkspace/reactjs/myapp
作成するのに少し時間かかりました。
作成したプロジェクトを確認しましょう
myapp
├─┬ README.md
│ ├ node_modules
│ ├ package.json
│ ├ public
│ ├ src
README.md : プロジェクトの説明ファイルでしょう
node_modules : プロジェクト必須のパッケージ
package.json : プロジェクトの設定ファイルです。プロジェクト情報や依存関係など管理します
public : 外から見えるコンテンツでしょう
src : 実際のロジック処理を実装するところでしょう
見たら、MVCの匂いが嗅げるだろう。
一体なにもので今の時点僕もよくわかりません。
詳しくわかりませんが、動作確認しましょう
STEP3:動作確認
cd my-app
npm start
my-appはreactプロジェクトのパスです
まじでnpm startだけでwebサーバーが立ち上がった、apache,nginxなくても動作確認できます。いいね。
localhost:3000
で下記の画面見えましたね。wow、ようこそ初めてのreact
ミッション2：Hello world!を出力
README.mdを読んで見ましょう。
- public/index.html` is the page template;
- src/index.js` is the JavaScript entry point.
index.htmlはテンプレート、src/index.jsはJavascriptのエントリーポイントということですね。
要はプログラムの入り口はsrc/index.jsです
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);`
ReactDOM.renderはなにってgoogleに聞いて定義を見つけました
ReactDOM.render(
element,
container,
[callback]
)
id="root"のコンテナーにAppを入れるということでしょう。
Appはsrc/app.jsに定義されています
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
JSXという文法でしょうか、将来勉強しましょう。
なんか return()に書かれているcodeは画面上に表示されるものですね。
よし、Hello world！にしましょう。
<div className="APP">〜</div>
この中の内容で書き換えると
<h1>Hello world!</h1>
Hello world!出た！
ミッションコンプリート!
次はどこから勉強したらいいでしょうか
とりあえず、reactを開発用のIDEを決めましょう！