本記事について

本記事は本当にReactの表面の表面です。
ただただReactを簡単に触ってみたい！
そんな方向けです。

またこの記事だけでToDoアプリが作れるわけではないです。
HTMLファイルやCSSファイル,JSファイルをこうやって作成して、

タグはこうやってつかうんだよ、というような、いわばToDoアプリを作成するための土台だと思っていただければ幸いです。

なぜ何も作れない記事を作成するのか？

以前、会社の同僚にReactを教えたことがありました。
その際に「Reactのチュートリアルをやると簡単に覚えられる」と言ったのですが、同僚は相当に苦労をしていました。
HTML,CSS,JS全てを持ち合わせていなかったため苦労していたようですが、それ以外にも
Reactの基本的なお作法でつまずいていることが多かったりしたので、今回はそんなReactの基本的なお約束をまとめようと思ったのがきっかけです。

Node.js

まずはNode.jsをインストールしましょう。
Vue.jsよろしくReactにもCDNと呼ばれるURLを埋め込むだけでReactコーディングが可能な代物も存在しますが、Node.jsをインストールすれば比較的簡単に立ち上げれるますし、何より幅が広がるのでNode.jsを選択します。
余談ですが、CDNを使用するとGoogle Apps ScriptでもReactが使用できたりします。

では実際にNode.jsをインストールしていきます。
ここへアクセスし、Node.jsをダウンロードします。
無理に最新版を使用せずに推奨版で十分かと思います。
ダウンロード後にインストーラーを起動し同意すればたぶん問題なくインストールできる・・・と思います。
インストールができたら、Windowsであればコマンドプロンプト、Macであればターミナルを開きます。
私はMacなのでこんな画面です。

真っ黒ですね。
Windowsも真っ黒な画面が出るかと思います。
まずはそんな画面に向けて以下のコマンドを入力します。

$ node --version
v10.15.１
$ npm --version
6.8.0

と私のは少し古いのでこのようなかたちになっていますが、今回インストールされた方は最新の推奨版がインストールされていることかと思います。

create-react-appの導入

Reactを導入するにあたって、まずはReact.jsを簡単に始められるcreate-react-appをインストールします。
インストールすると言っても、コマンドプロンプトで一行打つだけです。

$ npm install create-react-app

たったこれだけです。
ただしネットワークに繋がっている前提です。
もしあなたがネットワークに繋がっていない環境にある場合、ネットワークのある環境でnpmboxを使用しネットワークのない環境併設することをお勧めしますが、本記事から大きく逸脱するためネットワークに繋がっている前提で進めていきます。

Reactテンプレートの作成

先ほど入れたcreate-react-appを使用しReactが使える状態にしていきましょう。
コマンドは簡単です。

$ create-react-app myapp

以上です。
create-react-appがReactを準備するためのコマンド、そしてスペースのあとがあなたの作成するアプリです。
ただし注意してください。アプリ名に大文字は使えません！

さてこのコマンドを打つといろいろダウンロードしてきてくれて、Reactが使える状態になります。
ではいよいよReactに入っていきましょう。

React.js

長い旅路でしたがようやくReactのお作法に入っていきます。
その前にまずはReact.jsを動かしてみましょう。

$ cd myapp
$ npm start

このコマンドを打つとデフォルトで設定しているブラウザが立ち上がり下のような画面になります。

さていよいよ本題のお作法ですが、Reactの作法はカンタンに三つです。
それらをコードを見ながら説明していきましょう。

JSX記法のルール

Reactと聞けばJSXをみなさんが想像するかと思います。
しかしJSXにはいくつかの簡単なルールが存在します。

JSXのかける場所

ReactにおいてJSX記法が使える場所は基本的に決まっています。
classの場合はrender関数のreturnの中だけ。
functionの場合はreturnの中だけです。
もちろん変数化することも可能ですが、基本的にはreturnの中！と覚えておきましょう。

import React from "react"; 

class Hello extends React.Component {
  render() {
    return (
      <div>Hello World!</div>
    );
  }
}

さらにreturnの中でも下記のような書き方はNGです。

import React from "react"; 

class Hello extends React.Component {
  render() {
    return (
      <div>Hello World!</div>
      <div>Hello World2!</div>
    );
  }
}

もしこんなことがやりたいなら下のようにしましょう。

import React, { Fragment } from "react"; 

class Hello extends React.Component {
  render() {
    return (
      <Fragment>
        <div>Hello World!</div>
        <div>Hello World2!</div>
      </Fragment>
    );
  }
}

これはreturnの中では一番外のタグが必ず一つではなければいけないからです。

JSX内での変数の使用

JSX内で変数や関数を使用したい場合、必ず{}で囲みます。
stylesなどでよく見かける

<div style={{ fontSize: 14 }}>TEST</div>

こう言ったものは、まず外側の{}がJSX内で変数を使用するという宣言。
そして内側の{}はDictionaryであることを意味します。

ReactにおけるCSS

通常CSSを使用する場合、例えばtext-alignやfont-sizeなど間にハイフンが入るものが多く存在します。
当然これらもReact内で使用可能ですが、あくまでReact内で用意されているもの、つまりJSになります。
なのでJS内の変数で使用しようとすると、Errorとなってしまいます。
そのためReactではこれらのハイフンで繋がれたものはハイフンを削除し、その先頭の文字を大文字とします。

text-align => textAlign
font-size  => fontSize

等

またclassnameなどの予約語もclassNameなど大文字にすることで対応しています。
もちろんこれらはReactが用意したものなので、一部使用できないものもありますがほぼ全て使えると思って大丈夫でしょう。

Reactでよく書かれる記法

Reactではallow関数がよく使用されます。
難しいことはないのでこれくらいは覚えておくとReactを実際に記述する際に役立つでしょう。

import React, { Fragment } from "react"; 

const HELLO_LISTS = [
  "Hello World!",
  "Hello World2",
];

class Hello extends React.Component {
  render() {
    return (
      <Fragment>
        {HELLO_LISTS.map((value, index) => (
           <div key={index}>{value}</div>
        ))}
      </Fragment>
    );
  }
}

最後に

Reactは本当に簡単ないくつかのルールを提供しているだけです。
他にも色々なルールがあったりもしますが、ここさえ押さえておけば「とりあえず」書くことはできるかと思います。

React入門 チュートリアルの三歩手前