Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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
スクリーンショット 2017-04-19 10.31.35.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

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

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

ousyuryu
開発言語はなんだろうが、複雑なことを簡単にするのは楽しい〜I love programming
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away