6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React初心者から初心者に送る初歩的知識

Last updated at Posted at 2021-04-16

私はバリバリの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する

example.jsx
<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初心者に送る初歩的知識たちでした!
他にも覚えておくといい知識はたくさんありますが、やりながら調べれば間に合うと思います。

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?