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

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

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

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

今日のミッションは？

1. プロジェクト作成
2. もちろんHello world!を出力でしょう

いきましょう！

##ミッション1：プロジェクト作成
reactドキュメントへ

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です

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!出た！

ミッションコンプリート!

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