Reactをローカル環境にインストールする方法 by Chromebook

eyecatch-react Javascript

Reactの公式サイト

背景

今働いている会社でフロント部分をjQueryで組んでいる。SPA(Single Page Application)で

出退勤管理や在席管理として使用するのが目的だ。

フォームのボタンをクリックすると、各個人の出退勤時間や行き先がDBへ更新される仕組み。

そのDBへ更新するロジックはAjaxを使っており、クリックしたらボタンの色を反転する仕組み。

在席管理ツールということは、当然使用する人数や端末は不特定多数です。

本来ならばリアルタイム更新して、どの端末で表示しても常に最新情報をGETしたい。

が、!会社のサーバーがWindows server 2012でセキュリティもきつくNode.jsをインストールすることも厳しい。

苦肉の策で、60秒ごとにブラウザ側でページの更新をかけている。

その自動更新がかかる間に複数の端末間で、同じユーザの出退勤を操作すると色が変わらなくなる。

そこでjQueryでAjaxが成功したら、ボタンのclassのvalueを書き換えようと思った。

そしたらなんと、jQueryはDOMを擬似的に変更しているので、ブラウザの見た目は変わらない。

ってことを忘れていた。

どうしようもなく、モダンなライブラリでもこの際導入してみようと思ったわけだ。

会社で自分のPCもWIndowsだが、Reactに必要なNode.jsをインストールしてみた。

オフィシャルサイトのスタートガイドかGithubに沿ってインストールする。

今どきのツールはオンラインで解決。わざわざインストーラをダウンロードとかしなくてもよし。

もうたった3行でインストールできちゃうなんて素晴らしい。

npx create-react-app my-app
cd my-app
npm start

Chromebookでもインストールしてみよう

前提条件

  1. ChromebookにLinux機能を有効にする
  2. Node.jsをインストールする

まずはターミナルを起動する

まずはNode.jsがインストールされているか確認する。

インストールされていないですね。さっそくインストールしていきましょう。

はい、ここでGithubの出番。READMEをみるクセをつけておくこと。

もうちょっとスクロールして。。。

ターミナルにもどって、以下のコマンドを入力する。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

インストールが終わったら一旦ターミナルを再起動する。

nvm install v12.14.0

これで下準備OK

Chromebookでもモリモリ開発できそう

Reactのインストール

React ローカル環境にインストールにある3行をコピペ。

npx create-react-app my-app
cd my-app
npm start

Happy hacking!が表示されたら、インストール完了です。

なんだか下準備が手間かかるけど、Reactのインストール自体は3行で終了。あとは待つだけ。

コメント

タイトルとURLをコピーしました