皆さまお久しぶりです:-3

今回はReactについて全く無知な私が実践的に使えるようになるまで皆さまと一緒に勉強していこうと思います。

なぜReactを勉強しようと思ったか

私は本業でホームページなどを制作する事が多いのですが、Webサービスなどはあまり制作しない為、実はReactに触れたことがありませんでした。。。
稀に作成するWebサービスではいつもphpとjqueryを使い制作していましたが、ふと思ったのです。

「フロントエンジニアの人たちは最近なに使って開発しているのだろう？」と。

調べてみると２つのフレームワークが目立ちました。

１つはVue.js、もう一つがReactです。

この記事を読んでいる方もこの２つのどちらを学ぶか迷われたかと思います。
この二つの違いを書くとまた長くなるので、ここでは省きます。。

私がReactにした理由としては単純に「なんか楽しそうだから」です。

ReactではJSXといったjsとhtmlを一緒に書く書き方があるそうで、あとロゴと名前もかっこよくてなんとなくそそられました。
ただそれだけです。

Reactとは？

そもそもReactとは何なのでしょうか？

調べれば大量に資料がでてくるかと思いますが、どれもピンと来ない方も多いかと思います。
（私もその一人です^3^）

私の見解だと以下の解釈になりました。

• HTML と JavaScript が合体した JSX 記法で記述する
• コンポーネントといったものでパーツ化してそれを必要な時に呼び出して使う
• 仮想DOMというもののおかげでわざわざ画面を更新しなくても必要な部分だけ自動で更新してくれるし動作が早い

上記の３つが主なReactの特徴だと思います。

とりあえず環境を作ってみる

早速Reactを勉強する為に環境を作っていきます。

Node.jsをインストール

まずは下記URLからNode.jsをダウンロードします。
https://nodejs.org/ja/

URLを開くとLTS版と最新版とあります。
特に最新版は必要ないので、私は安定してそうなLTS版をダウンロードしました。

ダウンロードが終わったら実行してインストールします。

無事にインストールされているか確認する為に以下のコマンドを打ちます。

$ node -v

バージョンがでてくればおｋ

create–react–app インストール

Node.jsをインストールしたディレクトリに移動して下記コマンドを打ちます。

npm install -g create-react-app

アプリケーション作成

次にアプリケーションを作成します。

今回は「sample」という名前で作成します。
アプリを配置したいディレクトリに移動して下記コマンドを打ちます。

npx create-react-app my-appapp sample

Happy hacking!と表示されたら完了です。

これだけで環境ができました。

アプリケーション起動

いま作ったアプリケーションを起動させてみましょう

アプリの場所に移動して下記コマンドを打ちます。

npm start

ブラウザが立ち上がって下のなにやらカッコイイ画面がでてきたら成功！

いやー割と簡単に環境は作れましたねぇ！ψ(｀∇´)ψ

次回は簡単な超簡単なアプリを作ってみます！(以下リンクからジャンプできます。)

【第２回】Reactについて全くの無知の私が入門～実践的に使えるようになるまで (勉強編)