エンジニアじゃない人でもできるReact入門【導入編】

こんにちわ、ゆえっくま（@ux_bear）です。

僕は、本職のエンジニアではないのですが、フロントで何かと話題のReactを、まずは触って試してみることにしてみました。

結論から言うと、実際やってみたところ、どんなものか試してみるのは、そこまでに難しくありませんでした…!

 まず、React入門 “Hello,World” からはじめていきたいと思います。

Reactを試してみよう

1. Node.jsを入れます。

Reactを使うには、“黒い画面”こと“ターミナル”を開いて設定が必要になります。

と言っても、そこまで難しい手順ではないので

Node.jsについては、こちらの記事にまとめているのでご参考ください。

2. Creat React Appをインストールします。

Facebook社が提供しているReact.jsのひな形を簡単に作れるcreate-react-appというものを使います。

こちらのコマンドを入力します。

$ npm install -g create-react-app

これを使うと、Reactを使うのに必要な準備ができてる状態にしてくれます。

3. create-react-appを使ってアプリを作成する

実際にコマンドで、Reactアプリを作ってみます。

$ npx creat-react-app test-react-app

指定したディレクトリ名（ここでは”test-app”という名前）でディレクトリが作られ、Reactに必要なものがインストールされます。

ディレクトリに移動しましょう。

$ cd test-react-app

コマンドを実行します。

$ npm start

なにやら起動が始まります。（サーバが立ち上がってます）

そして「http://localhost:3000/」のように、ローカルでブラウザが開くので

このような画面が表示されていたら成功です

4. ちょっと、いじってみる。

先ほど作成したReactのディレクトリの中身はこんな感じになっているので

お好きなエディタで「App.js」ファイルを開きます。

ターミナルからエディタやFinderを直接開きたい時は、openコマンドを使うと便利です。

open -a Atom src/App.js

ちょっと目に見える箇所に、変更を加えてみましょう。

”App.js”ファイルの、htmlの<p>タグの部分を変更してみました。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
           「src/App.js」を書き換えてみましたよ。
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

リアルタイムに、ブラウザの方も表示の変更が反映されます。

ようこそ、Virtual DOMの世界、シームレスな表示と遷移の第一歩ですね！

“App.js”は大元となるコンポーネントで、コンポーネントを追加していくことになります。”App.css”を編集すれば、デザインも変更できます。

Webで公開するには？

ここまで、ローカルの開発環境で。Reactを動かすことができました。
試すだけなら開発環境で十分だと思いますが

実際に世の中に公開するにはどうしたらいいのでしょうか？

5. ビルドする

先ほど”$npm start”で起動したプロセスを “Ctrl+C”などで止めます。

以下のビルドコマンドを実行します。 

$ npm run build

下記が表示されたらビルド成功です！

[抜粋]
Creating an optimized production build...
Compiled successfully.

“/build”ディレクりが作られ、公開に必要なファイルが中に作られます。

6. デプロイ（公開）する

AWSなどお持ちのサーバ環境に、作られた”/build”ディレクトリの中身のファイルをアップロードすれば、公開完了です。

個人的にはFireBaseを使ってますが、後ほどそのやり方も書いていきたいと思います。

まとめ

気になってはいたものの、サーバサイドが絡むと、ちょっと及び腰になっていたReactでしたが

ちょっと環境構築して、表示を試してみる分には特に問題なく楽しかったです！

関連記事

関連書籍