【JS】今更ながらReact.js入門として触ってみた

はじめに、この記事はCodezineを見ながら手を動かして、一部自分のメモなどもしたかったので加筆修正したものなのでリンクしてきます。
Reactの概要と基礎技術要素を理解する (1/3)：CodeZine（コードジン）

古い記事だと記法や手順が違ったりして面倒なことになりそうなので信用できるソース＋体系的にまとまってるということでこちらを参考にさせていただいた。

基本書いてあることはすべて記事内にあるので詳細知りたい方はそっちがいいかと。
ここではざっくりとまとめたものを抜粋している。

てことでスタート。

Reactとは

JavaScriptフレームワークの2台巨塔の1つ。
Facebook製。
競合はAngularらしい。

特徴

1.宣言型
2.コンポーネントベース（機能を兼ね備えたUI部品のこと）
3.一度学べばどこでも使える

特に3が強力で、クライアントサイドの描画以外にも
・Nodeを使ったサーバーサイドレンダリング
・ReactNativeというモバイルアプリ開発フレームワーク

つまりReactを学ぶことで、デスクトップクライアント、サーバー、モバイルアプリが開発できる。

公式ドキュメント
https://reactjs.org/docs/add-react-to-a-new-app.html#create-react-app

ここにも記載されてる標準ツールとして新しいアプリを作るときはcreate-react-appの利用が推奨とのことなのでそのとおりにするのがいいっぽい。

環境構築

グローバル環境にツールをインストール
$ npm install -g create-react-app

プロジェクトの作成
$ create-react-app hello-world

移動して実行
$ cd hello-world
$ npm start

確認
http://locahost:3000/

確認できてるなら、今ここまでができてるということになる。
・nodeサーバー起動
・BabelによるES6（ECMAScript6）コードの変換
・Webpackによるモジュール依存関係解決処理

ファイルの関係と手順

こんな感じになる予定。
Export,Inportはセットらしい。

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">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

↓
src/index.js
③モジュールインポート
④DOMの操作

import React from 'react';
import ReactDOM from 'react-dom';

function Greeting(props){
  return <h1>hello {props.name}!</h1>;
}

const element = <Greeting name="Tom"/>;


ReactDOM.render(
  element,
  document.getElementById('root')
);

↓
public/index.html

   <div id="root"></div>

［構文］renderメソッド
ReactDOM.render(
element,
container,
[callback]
)

element：描画するタグ要素、container：コンテナ要素、callback：描画コールバック

JSX

XML風に書くからXだと思う。
基本はHTMLを変数化するという理解で問題なさそう。
ただしこのときclass,forはJavaScriptの予約語なので使えない。
→className,htmlForというプロパティ名として使える。

変数利用や、

const sample1 = <img src={user.profilePhoto}>

タグに子要素をもたせることも可能。

const sample2 = (
<div>
  <h1>good morning</h1>
</div>
);

コンポーネントの概要

2種類ある。

■関数型
・簡潔にコードが書ける。
・状態を管理できない（ステートレス）

function sample(props){
  return <h1>hello {props.name}</h1>
}

■クラス型
・状態を管理出来る（ステートフル）
→状態変化に応じてViewを更新したいような場合はこっち。

class sample extends React.Componet {
  render(){
    return <h1>hello {this.props.name}</h1>;
  }
}

コンポーネント宣言時に設定したタグ属性はpropsオブジェクトとしてコンポーネントに渡される。
props.nameのように書くとname変数として取り出される。