#ざっくり
私はReact学習の超初期段階で「なんでこんな難しいの・・」「単語いちいち検索するのめんどい・・」「もう無理・・」
ってなったうちのひとりです。
ここでは大まかなイメージを掴んで、詳しいことはリンク先の賢人たちにお世話になりましょう！！
#目次
- なんでReact??
- 仮想DOM
- Redux
- ２種類のコンポーネント
- Node.jsとSSR、ついでにSPA
- JSX記法
- Babel,Webpack
- propsとstate
- 実際に開発していこう
はい。
Reactを説明する最低限の要素についてまとめました。
初学者ということと、全体像を把握するためにだいぶ割愛しています。詳しい記事は各リンクを参考にしてみてください。もはやリンク集みたいになってます。
（＊端的に表現するために誤解を生む可能性があります。あらかじめご了承ください。）
【URL】（TotalCover）
今から始めるReact入門
Hypertext Candy
React 入門
##なんでReact??
結論から言うと**「早い」**からですね。
この速さってよくよく考えてみるとめちゃくちゃ大事な要素なんです。なめてました。
だってちょっと考えてみてください。ロードに毎回10秒もかかるアプリ、どんなにコンテンツが良くても見るのやめますよね。現代ユーザーにとって速さは命なんです。
【URL】
Reactのパフォーマンス改善でjsの実行速度を1.85倍早くしたお話
こちらの記事では２倍近く早くなっていますね。
特に情報量の多いサイトだと大きな差だと思われます。
##仮想DOM
これがReactを早くしてくれる要因ですね。
毎回１からページを構築して表示するんじゃなくて、**変わった部分の差分だけ変更すれば早くない？？**って考え方です。仮想DOM自体も仮想なのでDOMより構築に時間がかかりません。
【URL】
なぜ仮想DOMという概念が俺達の魂を震えさせるのか
##Redux
Reduxはstateの状態管理をしてくれるライブラリです。
Reduxを使うと、アプリの全ステートを保持する「ストア」が使えるようになり、複雑なタスクを組むときに容易にしてくれます。情報の倉庫ってイメージでしょうか。
【URL】
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解
『Redux』を用いて状態管理をしてみよう！
Reduxが必要なとき/不要なとき
公式HP
##propsとstate
Reactのコンポーネントの中で、UIの状態や情報を管理している変数です。
大きな違いはその変数自体の値を変えられるか否かです。
propsは不可で、stateでは可能です。
そのためpropsは読み取り専用と位置付けられています。
stateはさっき出てきましたね、Reduxで管理してくれます。
【URL】
Reactで絶対に抑えるべき『props』とは？
『state』を用いて、文字数カウンターを作成しよう！
##２種類のコンポーネント
これを知らなくて自分は四苦八苦してました。
クラスコンポーネントと関数コンポーネントがあって、用途別で使い分けます。
凄い雑ですが、クラスコンポーネントではconstructor()、super()、render() などがよく出てきます。
最近は関数コンポーネントにHooksを導入した手法がメインになってきているようです。
【URL】
関数コンポーネントはクラスとどう違うのか?
公式HP
React Hooksを用いて関数コンポーネントを操る
##Node.jsとSSR、ついでにSPA
Node.jsはサーバサイドでJavaScriptを実行できるようにしてくれるプラットフォームです。
つまり、サーバーサイドで動くJSです。普段はブラウザ（ユーザーサイド）で動いているJSを同じ言語で使えるようにしてくれます。垣根を超えた感じですね。
SSRはServer Side Renderingの略称で、サーバー側で初期状態のDOMレンダリングを完了した状態にしてくれることです。これによってWebの初期ページの表示が早くなります。
（その都度ブラウザでDOMを構築しないから）
SPAはSingle Page Apricationの略称で、毎回ページ遷移しないやつですね。最近よく見る。
【URL】
初心者向け！3分で理解するNode.jsとは何か?
ユーザー体験を向上させるサーバーサイドレンダリングJavaScript — 歴史と利点
【基礎】ReactでServer Side Rendering
React系(別言語含む)の サーバーサイドレンダリング について考えよう
##JSX記法
**JSをHTMLみたいに書ける方式です。**これを使わなくても同じことはできるけど、 記述するコードが多くなってくるとだいぶ大変です。ここでは書き方だけですが、実際に比較してみましょう。
【JS】
import React from 'react';
import ReactDOM from 'react-dom';
const greeting = React.createElement('h1', null, 'Hi!');
ReactDOM.render(
greeting,
document.getElementById('root')
);
【JSX】
import React from 'react';
import ReactDOM from 'react-dom';
const greeting = <h1>Hi!</h1>;
ReactDOM.render(
greeting,
document.getElementById('root')
);
From React の JSX とは？
##Babel,Webpack
Babelはトランスパイラといって、翻訳してくれます。具体的にはJSのES6に対応していないブラウザ用にES5に書き換えてくれます。
Webpackはバンドラーといって、複数のファイルを１つにまとめてくれるものです。Reactは構成上、たくさんのコンポーネントが作られるので、一括でHTMLが読み込めるようにしてくれます。
【URL】
【５分でなんとなく理解！】Babel入門
【５分でなんとなく理解！】Webpack入門
##実際に開発していこう
全体の流れ掴んで基礎を覚えたら、開発に進んじゃいましょう。
もちろん分からない部分だらけだけど、自分がどこをわかってないのかが分かると思います。
【URL】
[ReactJSで作る今時のSPA入門（基本編）]
(https://qiita.com/teradonburi/items/fb91e5feacab5071cfef#reactjs%E3%81%A7single-page-application%E3%82%92%E4%BD%9C%E3%82%8B)
React公式チュートリアル