141
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

React 入門チュートリアル①

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

自分もプログラミング歴4ヶ月程のひよっこなので、これからアプリ作ってみたい方がいましたら、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を当てるのはいくつか方法があると思うのですが、1つ目は従来の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

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
Sign upLogin
141
Help us understand the problem. What are the problem?