react.js勉強日記-インストール & hello world

4/18 火曜日 雨→晴れ 暑いなあ

やほー、react勉強、スタート！
僕もわからないことがいっぱいあり、react.jsを勉強する経過を共有して,
react.jsに興味を持つ友達と共に成長していく気持ちです。
まあ、日本人じゃないので、日本語の使い方おかしいところ遠慮なくご指摘ください。
どうぞ、よろしく。

Php,java,.netを使って10何年もずっとサーバー側プログラムを作っていましたが、フロント側の世界へ一歩踏み出し始めました。
angularとreactとどっちってちょっと迷いましたがreactの方はスペル短いから、じゃあ決まり

**今日のミッションは？**
1. プロジェクト作成
2. もちろんHello world!を出力でしょう

いきましょう！

##ミッション1：プロジェクト作成
[reactドキュメントへ](https://facebook.github.io/react/docs/installation.html)
> npm install -g create-react-app
> create-react-app my-app
> cd my-app
> npm start

シンプルに見えるんだけど、npmって何？
Google先生に聞きましたが、javascriptのパッケージを管理するもんですね。
パッケージ及び依存するパッケージ全部管理してもらう素晴らしいものです。
phpだとcomposer、javaだとmaven、似たものですね

下手に説明したくないので、これをご参考まで
[npmについてへ](https://www.npmjs.com/)

自分の環境にnpmコマンドあるか、チェックしてね
`$ npm -v`

なかったら、node.jsをダウンロードしてインストルするだけでOKです。
[nodejsインストールはこちらへ](https://nodejs.org/en/)

よし、準備できました。インストルしましょう！

**STEP1:開発環境をインストール**
> npm install -g create-react-app

-g:パッケージをグローバル領域にインストールするという意味です。
もっと知りたい場合は
[npmについてへ](https://docs.npmjs.com/cli/install)

僕の場合、下記の場所にインストールしました
`
$ 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
![スクリーンショット 2017-04-19 10.31.35.png](https://qiita-image-store.s3.amazonaws.com/0/160293/3aeaf679-f72a-7232-afbf-ea941594f71b.png)

##ミッション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です

```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に定義されています

```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!出た！
![スクリーンショット 2017-04-19 13.29.46.png](https://qiita-image-store.s3.amazonaws.com/0/160293/f929f4c2-dd54-27e9-4246-855fc7b355e6.png)


:sunny:ミッションコンプリート!:sunny::v:

次はどこから勉強したらいいでしょうか
とりあえず、reactを開発用のIDEを決めましょう！