まえがき
最近エンジニアとして就職しまして、
Reactとか触っているのですが難しいなーって思う瞬間がとても多い。。
こちらの記事はReactを勉強する前の自分が、あったらいいなと思うようなことを書いていきます。
対象となる人
この記事では以下のような方達を対象に書いています
- Reactって何？
- HTMLとか少し触っただけ
- でもJavaScriptはあんまわからない
そもそもReactとは？
- Angular,Vueに並ぶ、SPA(Single Page Application)フレームワークの御三家の1つ
- Facebook社が作ってる
- めっちゃ人気
Reactの考え方
- JSXかJSの中でHTMLを書く。(JSにHTMLっぽい記述をする感覚は、最初は違和感があるかも)
- コンポーネント（Component）：一言でいうと部品。ボタンとか。
- Atomicデザイン：原子的な部品を作ろうという考え方。役割を最小限にして使いまわせるようにする。Reactで当てはめると、それ以上分解不可能なComponentを作ろう。となる。
参考記事
https://qiita.com/fiftie/items/37b2212739b29f3e79cc
コンポーネントについて
昔はReactのComponentクラスを継承して作るのが一般的だった
class Welcome extends React.Component{
render(){
return <h1>Hello,{this.props.name}</h1>
}
}
今はfunctional component(関数コンポーネントとも)と呼ばれる、Componentを関数として定義することが一般的になりつつある
function Welcome (props) {
return <h1>Hello,{props.name}</h1>
}
stateについて
- stateとは状態を管理するための概念。Component内限定の変数みたいな感じ。
- 大きな特徴は、これが更新されるとそのComponentが再描画されること。
サーバーから取得したあるデータAを、ある要素Xに表示しないといけないとする。
そのとき、要素XにAを表示する、ということを指定さえしておけば、要素Xを捕捉してAを追加して…みたいなことをしないですむ。
propsについて
- propsとは別のComponentから受け渡されてきた値。
- ここでは、「props」という名前のpropsに、変数valueを渡している。
- ChildComponentは「props」を使って何かする。
- propsが更新されても、そのComponentは再描画される。propsにstateを指定することもできる。
<Child props={value} />
props drillingについて
例えば以下のような構成があるとします。
そして、ComponentAで持っているデータをComponentDに渡したいとします。
これはめっちゃ不毛
これがprops drilling問題・・。
Reduxでこれを解決する！
Storeと呼ばれるところに値を格納することで、どのコンポーネントでも使うことができる！
終わりに
かなりざっくりReactについて書いてみました。
参考になれば嬉しいです！