私はバリバリのReact初心者(初めて2週間)ですが、そんな私でも簡単なタイピングゲームを作れました
https://hobbypro.github.io/typing/
そんな初心者な私が、これからReactを始める人に「Reactやるならこの知識覚えといたほうがいいよ」を共有したいと思います。
React始めるなら覚えておくべき知識
###心構え編
ほぼjavascript・jQueryという認識でOK
Reactを勉強し始めると、やれSPAだ仮想DOMがあーだこーだと小難しい話が出てきます。
しかし、最初のうちはそんなことを覚えなくても、結構テキトーに使えます。
あまり難しいことは考えず「js使える場面ならReactも使える」くらいの認識でOKです。
###環境構築編
webpackとbabelの背景と用途を知っておく
残念ながらReactを使うには、環境構築の知識も必要らしいです。
それがwebpackとbabelです。
nodeでこれらを含めたツールをインストールして、せっせとReact開発用の環境を作る必要があります。
環境構築が面倒な場合は、CDNだけでもできるらしい
自分はこれ試してないのですが、CDNでもできるらしいです。
環境構築とか面倒クセェって人は、こちらを採用しても良いのかも。
【React.js】CDNを使ってReactを手軽に試す(React 入門) | Code Database
初っ端編
まずはReact公式のチュートリアルをやってみるのがオススメ
様々な入門記事があると思いますが、Reactの使い方を簡単に知りたいなら公式チュートリアルが一番な気がします。
実際、抑えておくべき利用法をめちゃくちゃ丁寧に解説してくれてます。
また、実際に手を動かして検証できるページも用意してくれているので、頭への定着度が抜群です。
チュートリアルを始めるために環境構築をするなんていうこともありません。ブラウザひとつあればReactを体験できます。
初心者の方々はまずこのチュートリアルを行うことをオススメします
チュートリアル:React の導入 – React
Tips編
「state」と「props」は厚めに理解する
この2つはReactのキモです。
チュートリアルをやるとわかると思うのですが、ありとあらゆる場面でstateとpropsが登場します。
なのでこれらの背景や用途はサボらずに理解すると良いです。
state とライフサイクル – React
コンポーネントと props – React
とりあえずメソッドはbindする
<div onClick={this.handlerClick.bind(this)}>
</div>
このようにメソッド?をコンポーネントなどに渡す時にはbindしておくと安全です。
逆にbindしないことで、うまく動かないということが結構おきます。
もっと詳しく知りたい方は、他の記事で調べちゃってください。
コンポーネントに関数を渡す – React
key属性を理解しとく
私的にReact1番のハマりポイントです。
ちゃんと理解してないと、「stateを更新してるのに表示が全く変わらない!!」なんてことが発生します。
実は私もあまり正確に理解しておらず、ぽいkey属性を与えて乗り越えてまして...
皆さんは、エラーで時間を無駄にしないよう、ちゃんと理解しちゃってください!
[https://ja.reactjs.org/docs/reconciliation.html](差分検出処理 – React)
ReactでCSSを使いたいなら、一旦脳死でstyled-componentsを採用
Reactコンポーネントを装飾する方法は結構あるそうです。
Reactのコンポーネントのスタイリングをどうやるか - Qiita
ただ自分が調べた感じ「styled-components」を使ってる方々が多い印象を受けました。
なので脳死でstyled-componentsを利用してみましょう。
使い方もそんなに複雑ではないです。
styled-components
まとめ
以上、React初心者からReact初心者に送る初歩的知識たちでした!
他にも覚えておくといい知識はたくさんありますが、やりながら調べれば間に合うと思います。