いまさらReactを使い始めてみる(2018年12月末)

- 12月

2018

Posted By : boomin

No Comments

いまさらReactを使い始めてみる(2018年12月末)

1. 必要に迫られて

ちょっとやんごとなき事情があり、いままでのフロントエンド開発で触ったことがなかったReactを触ってみることにしました。

で、何に困ったかというと

中途半端に長く広く使われていて、Frameworkの決め手に欠ける
- 要するに、これがデファクト！って言えるかというと言えない
- AngularやらbackboneやらvueやらRiotやら、、、、
- そもそも、フロントエンドって流行り廃りが激しすぎる
バージョンによって、記述方式がかなり異なる
- 困ったときにググっても、何が正解だかわからない
- っていうか、まず最初に何を信じればいいかわからない
開発環境やテスト、デプロイのデファクトがわからない
- Visual Studio Codeを使いたいけど、それでいいよね？
- Nodeの流れからしてAtom使えって言われても、いまさらちょっと使いたくないかな。。。
- plug-inは何を使えばいいの？

ってことで、これやっておけば良さそう、というのをまとめてみます。

もう、どこかほかの人もやってるはずですが。。。。

2. 用意するもの

基本的には、ここを読みました。

2.1 開発実行環境

Node.js
- 説明不要
npm
- 説明不要
create-react-app
- Facebook謹製の、React環境構築パッケージ

2.2 開発デバッグ環境

Visual Studio Code
- plug-in : Debugger for Chrome
Google Crome
- plug-in : React Developer Tools

以上！

2. 準備すること

# npmとyarnのglobal install
npm install yarn npm -g
# Facebook謹製のプロジェクトテンプレート開始ツール(?)
npm install -g create-react-app

以上！

3. やること

# 環境準備：結構時間がかかる
create-react-app react_project
# 開発作業用のリポジトリディレクトリへ移動
cd react_project
# webサーバ起動（webappと言ってもよい）
yarn start
# デプロイするときに実行
# yarn build

これで、ローカル環境にnodeによるwebサーバが立ち、そこでデフォルトサイトが参照できるようになります。

これに加えて、Visual Studio Codeでデバッガ―を実行します。
すると、Visual Studio CodeとChromeとの間で通信し、breakpointが使えるようになります。

そのためのlaunch.jsonの中身はこんな感じ

{
  "version": "0.2.0",
  "configurations": [{
    "name": "Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceRoot}/src",
    "sourceMapPathOverrides": {
      "webpack:///src/*": "${webRoot}/*"
    }
  }]
}

4. チュートリアル開始

React.js チュートリアル超入門

ここ一通りやったら、十分理解できました。ありがとう！作者の方！

公式のチュートリアルは、create-react-appで作ったプロジェクトとファイル構成や内容が違ったので、超ド初心者からみると、まずとっかかりで？？？？となってしまい、先になかなか進みませんでした。。。

X. 参考にしたサイト

(イマドキの)手探りReact.js入門記
- 以前のversionと記述方法などが結構違うため、今はこんなだよ！と教えてくれました。
React における State と Props の違い – Qiita
- あと、Reactの肝である（と理解できた）State と Propsの違いは、ここを参考にしました。

以上！

ITに頼って生きていく