React 入門チュートリアル① #JavaScript

はじめまして、あけましておめでとうございますm(_ _)m
開発でReactを使うおことになり、現在もReact勉強中なのですが、プログラミング初心者向けのReactの記事が意外と少なかったので、書いていこうと思います。

自分もプログラミング歴４ヶ月程のひよっこなので、これからアプリ作ってみたい方がいましたら、ReactNativeにも触れていこうと思うので是非是非~

今回の目標

・できるだけ簡単にReactに触れてみる
・基本中の基本の「コンポーネント作成→HTMLに変換→表示」の部分を理解する
・文字の表示とCSSを当てる

用意するもの

html,css,js（javascript）のちょっとした知識
jsに関しては自分も「確かな力が身につくJavaScript「超」入門」を 2/3くらいやった(途中で飽きた)程度
テキストエディタ(Sublime、Atomとか)
ブラウザ(Cromeがオススメ)

では、さっそくHello Worldを表示から

まずは新規のhtmlファイルを作成して、以下のコピペしてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  // idを付けてdivを宣言してます
  <div id="content">
  </div>

  // reactとreact-domのライブラリを読み込む
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>

  // babelを読み込む
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>

  <script type="text/babel">

  </script>

</body>
</html>

Hello,Worldを表示するために、divにid付けて宣言して,
reactのライブラリを読み込んで、JSXとかES6を使いたいのでBabelを読み込むみたいな感じです。

JSXとES6はjavascriptの拡張構文で、JSXとかES6の記法で書いたものを、Babelが標準のjavascriptにコンパイルしてくれます。

実際にReactを使って書いていきます。

index.html

<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, World</h1>,
    document.getElementById('content')
  );
</script>

このように追記して、ブラウザにindex.htmlを読み込ませればHello, Worldが表示できるはずです。

説明していくとReactDOM.render()はコーポネントをHTMLに変換するメソッドで

<script type="text/babel">
  ReactDOM.render(Reactコーポネント、表示場所);
</script>

みたいな感じで書きました。

コーポネント？<h1>Hello, World</h1>ていうhtmlをそのままid="content"のdiv内に渡してるように見えますが、
<h1>Hello, World</h1>はJSXで書かれたもので、Babelでコンパイルしてみると

React.createElement(
  "h1",
  null,
  "Hello, World"
);

// ↓ここでいろいろ試せる
// https://babeljs.io/repl/

となる。お察しの通りこのこのReact.createElement()というメソッドがReactコンポーネントを作成するメソッドで
引数の意味はReact.createElement(HTMLのタグ名,要素の属性,要素の内容);です。

JSXを使う意味

今のところ自分がわかっているのは、

短くかける
htmlぽくかける(書きやすい)
ネストさせても見やすい(一番効果を感じるところかも)

結論綺麗にかけるてことです。

JSX記法に関しては、別の記事で詳しく書く予定。

CSSを当ててみる

コンポーネントにクラス名を指定する

Reactコンポーネントにcssを当てるのはいくつか方法があると思うのですが、１つ目は従来のHTMLのようにclassを付けて、cssファイルを読み込む方法があると思います。

自分もこの方法やったことないので実際に今からやっていきたいと思います。

<h1 className="text">Hello, World</h1>

className=""でクラス名を指定してます。

次に少しご法度ですが、<head>内にcssを定義します。

<head>
  <!-- 省略 -->
  <style type="text/css">
    .text { color: blue; }
  </style>
</head>

これで、Hello, Worldが青くなるのがわかるはずです

scriptタグ内でCSSを定義する

CSSをJavaScriptのオブジェクトにして、コンポーネンのstyleに読み込ませます
。
styleというオブジェクトを定義して、style={}でcssを読み込みます。
変数は{}でくくって呼び出します。

const style = {
  container: {
    color: 'blue',
    fontSize: 32
  }
};

ReactDOM.render(
  <h1 style={style.container}>Hello, World</h1>,
  document.getElementById('content')
);

おわり

ガチガチの入門になったので、次回はもう少しアプリっぽいものを作れるところまで、やりたいたいと思います。お疲れ様でした。

記事作成TODO

React 入門チュートリアル②
=> http://qiita.com/stivan622/items/52596d39e8b02bfbc8a9
カスタムコンポーネント作成
同じく => http://qiita.com/stivan622/items/52596d39e8b02bfbc8a9
JSX記法