Reactってなんぞ？

そもそもコレを使うメリットって何なん？

• 世界中で使われている為、ライブラリやコンポーネントのパッケージが多く、１からコードを書く必要がない。
• 各所から提供されているコンポーネントのパッケージを使って、きれいなUIが作りやすい
• Webアプリが効率的にレンダリングが出来て、サクサク動く為、ユーザービリティが高い
• jsを使ったアプリを作る場合、htmlとjqueryだと両方の修正が必要になるが、reactだとjsxコードの修正が主になるのでコードの変更管理が楽
• React Nativeを使うと、iOSアプリとAndroidアプリを一括で開発出来る。

うん、ちょっと魅力的に見えてきた。

逆に言うと、動き・見た目の変化が少ないWebサイトの構築には向いていない。ブログ、ニュースサイトの場合はhtml、phpでやったほうがいいかもね

どうやって導入すんねん

まずNode.jsとnpmっていうやつが必要

Node.js

サーバーサイドのJSの実行環境、という感じ？

ただ、Electron、React Nativeを使ってモバイルアプリケーション、デスクトップアプリケーションの開発も出来るらしい。

Electron

js、html、cssをつかってデスクトップアプリケーションを作る為のフレームワーク。

React Native

モバイルのアプリケーションを作る場合のフレームワーク

npm

Node.jsのパッケージ管理ツール

パッケージ？

ライブラリやフレームワークのこと、React、jQueryなど

あと、TypeScriptって何？

jsを拡張してMicrosoftが作った言語、大きな違いは「型の定義ができるか否か」

jsにコンパイルしないといけないらしいので、コンパイラが必要。

とりあえず、まずはNode.jsを導入

めんどくせえな…。
ここでやってみる

簡単にできた、次はnpmのインストール、はされてたわ。

それじゃあ開発環境を作ってみよう。

Node.jsとExpressでローカルサーバーを構築する(1) ―Node.jsとnpmの導入―

$ npm init -y

//コアモジュールの一つであるhttpモジュールを読み込む
const http = require('http');

//httpのcreateServerメソッドを用いてサーバを生成して変数に格納
const server = http.createServer((req, res)=>{
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World!!');
});
//生成されたサーバオブジェクト（server)のlistenメソッドを実行してリクエストの受付を開始
server.listen(8080);

$ node app.js

ようやくReact導入

まず「yarn」っていうパッケージマネージャを導入
→npmもパッケージマネージャだけど、こっちの方が高速で信頼度が高いらしい…？

$ npm install --global yarn

でけた

creat-react-appのインストール
→これはreactでの開発に必要なパッケージを自動でインストールできるやつ

全部言われるがまま…

$ yarn global add create-react-app

これでできたらしい…

hello worldを表示

アプリケーションを作成、この「helloworld」は任意のフォルダ名っぽいな

$ yarn create react-app helloworld

実行

$ cd helloworld
$ yarn start

でけた

備忘録：sublime textでのreactのファイルのシンタックスハイライト設定について
【ReactJS入門】SublimeTextでのシンタックスハイライトの設定 ~Bable編~

※僕の環境では「view(表示)」にbabelの設定は出てこなくって、ctrl + shift + p でパッケージの入力欄を出した後に「babel」って打つとシンタックスハイライトの設定が出てきた。