JavaScript
es6
reactjs
babel
es2015

ReactでHelloWorldとカードアプリ作成 ~0からreact習得記 day 01~

これまでのreact習得記は、こちらから閲覧できます。

はじめに

株式会社VRizeでインターンとして勤務しているryo_tです。
短期目標に「1ヶ月でReactのUIを開発できるように」と伝えられたので、
Reactはほとんど未経験ですが一歩一歩頑張って行きます。

目的

React componentの基本的な使い方を覚える為に
簡単なチュートリアルに触れ、Reactを少しでも理解する。

今回作るもの

先ずはReactを使用してHello World出力から、簡単なカードを制作したいと思います。

ES2015をES6と呼ぶようです。このエントリではES2015と表記します。
今回はReactプロジェクトで多く採用されているES2015 (ES6)と呼ばれるJavaScriptを使用するので、未経験の方には見慣れない書き方が多々あり、困惑すると思いますが一緒に頑張っていきましょう!

今回の作成したものはこちらに公開しております。
https://github.com/ryotsuchiya/react_card_app

用語整理

React

  • ReactとはFacebookが開発したUIに特化したJavaScriptライブラリです。

JSX

  • JSXを用いることでXMLやHTMLによく似たマークアップ言語をJS内で使用出来るようになり、ReactでDOMを生成する際に可読性の高いコードを書くことが出来ます。

Boilerplate

  • 「Boilerplate = "常用文"のような意味で」の名前の通り、React Boilerplateは簡単にreact.jsの雛形を提供してくれます。

ES2015

  • ES2015は新しく策定されたJavaScriptです。従来のJavaScriptより簡潔かつ明瞭な構文で記述できるようになりました。Reactを使用するプロジェクトでは、ES2015を採用するプロジェクトが多い印象を受けます。

Babel

  • Babelとは標準的なブラウザで実行出来る形式に変換するツールです。また、この層を担うツールをトランスパイラといいます。

手順

開発環境のセットアップ

今回はReact Boilerplateを開発環境のセットアップに使います。
https://github.com/nolotz/react-simple-boilerplate

terminalで 
git clone https://github.com/nolotz/react-simple-boilerplate.git
を入力してクローンします。

# react-simple-boilerplate`内に移動する
cd react-simple-boilerplate

# パッケージをinstallする
npm install

# webpackの開発サーバーを起動する
npm start

ブラウザのアドレスバーにlocalhost:3000と入力すると
Hello React :) と画面左端にこのように表示されるはずです。

Screen Shot 2017-09-25 at 10.33.04.png (13.1 kB)

Card Componentの作成とHelloWorldの出力

index.htmlには<div id=“react-root></div>しか記入されていません。
この要素の中に表示されるようにJavaScript(JSX)で記述していきます。

App.jsx
import React, {Component} from 'react';
class App extends Component {
    render() {
        return (
            <h1>Hello React :)</h1>
        );
    }
}
export default App;

App.jsxの class Appのreturn内に
<h1>Hello React :)</h1>と記載されています。
ここにタグを書いて行けばいいのですが、Reactでは外側の要素は1つだけという
ルールがあるので複数タグを記入したい時は要素全部をdivタグ等で囲ってあげると機能します。

これだと反映されないので、

App.jsx
class App extends Component {
    render() {
        return (
            <h1>Hello React :)</h1>
            <h1>Hello World :)</h1>
        );
    }
}

divで外を囲ってあげると、

App.jsx
class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello React :)</h1>
                <h1>Hello World :)</h1>
            </div>
        );
    }
}

このように正しく反映されます!
Screen Shot 2017-09-25 at 10.52.54.png (22.1 kB)

先ほど、App.jsxのclass Appのreturn内に記述した<h1>Hello React :)</h1>などのコードは、
index.jsx内に記述されているReactDOM.render(<App />, document.getElementById(‘react-root'));によってindex.htmlの<div id="react-root"></div>内にレンダリングされます。

cssによるスタイリング

少しだけ理解できたところでタイトル、サブタイトル、画像の入ったカードを作ります。
App.jsx内の先ほどhello react :)と書いていた場所にタグを追加していきます。

構造は以下のような感じです。

App.jsx
class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello React :)</h1>
                <h3>This is my first React App.</h3>
                <img src="https://facebook.github.io/react/img/logo_og.png" />
            </div>
        );
    }
} 

react-simple-boilerplate/styles/home.scssに下記のcssを記述していくと、下記画像のようなスタイルで表示されると思います。

body {
  padding-top: 150px;
}
h1 {
  color: tomato;
}
div {
  width: 500px;
  height: 380px;
  background: papayawhip;
  margin: 0 auto;
  border: 2px solid papayawhip;
  box-shadow: 5px 5px 10px rgba(0,0,0,.3);
}
h1, h3 {
  text-align: center;
}
img {
  width: 100%;
  height: auto;
}

Screen Shot 2017-09-28 at 12.57.29.png (105.5 kB)

要素にクラスをつけるときは、HTMLのような<div class=“hoge”>だと通らないので
<div className=“hoge”>とします。

おわりに

一応完成したのですが、クラスとES2015の理解が乏しく、中々思うように進まないので
一度ES2015とクラスを理解してから次に進みたいと思います。

補足、間違っている箇所がございましたらご指摘よろしくお願いします。

株式会社VRizeは、VR広告ネットワークやVR動画アプリの制作等、VRに関わる様々なサービスを製作しています。VRとReactに興味があるフロントエンジニアさん、絶賛募集中です!
https://vrize.io/recruits/
https://www.wantedly.com/projects/79383