反応で怠惰である方法を学ぶこと:初心者のためのガイド.

あなたが多くのdev記事を読む誰かであるならば、あなたはおそらく1回か2回(または、広告Nuruseamに群衆によって)それを聞いたでしょう.彼らは、コードを読みやすくしながら、できるだけ少ない複雑さで、できるだけ多く得られます.
幸運にも、私たちのために、遺産(すなわち、コンポーネントを使用すること)の上で構成を好む反応方法は、我々がそうすることができるように怠惰である(そして、効率的である)よう奨励します.

では、英語のコンポーネントは何ですか？

コンポーネントはツールです.部品は、あなたがそれを修理する必要があるとき、あなたの自動車のバッテリーの上で端末を締め付けるのに用いられるスパナである、時々、あなたは12を必要とするので、あなたはそれを『12』支柱を通過します.他の場合は、問題に応じてわずかに大きいか小さいサイズが必要です.
少し遅い日に、あなたがそうするならば、構成要素は鍋またはフライパンです.あなたが2つの卵を揚げる必要があるならば、あなたは大きなパンを必要としません(あるいは、反応話して、あなたは『大きな』小道具を必要としません).あなたはそれを渡す小さな“小道具”、';フライ';あなたの卵が必要に応じて、自分自身に良い軽快な喜びを持っている.
それはあなたが参照してください小さなものでは、初心者なら、単に“反応で考えて”のロープを学んで、それは数週間または数ヶ月も完全に把握し、再利用可能なコンポーネントの力を活用するために数ヶ月かかることがあります.
この記事CUMのチュートリアルでは、再利用可能なコンポーネントを構築することによってあなたの旅に役立ちます.

スペーサー部品A . A「シフトABEG」

Don't worry if you don't understand the alias, it's a Nigerian slang for "gimme some space". I've found that making your code as relatable as possible makes it stick faster.

つのキツネは、CloudVisualで“シフトabeg”写真にお互いを語っている.Unsplashの上のCO . uk
それで、あなたは多くのものにマージンを加える必要があるフロントエンド開発者です.良い日には、最も人気のあるCSSライブラリがあなたのために処理されます.しかし、再び、あなたはナイフファイトにバズーカをもたらすその男になりたくないです.場合によっては単純なネイティブマージンプロパティが行われます.
したがって、マージンのプロパティをここではなく、そこに配置し、コンポーネントクラスとすべてに追加すると、余分なタイピングが嫌いですが、何ができますか?短い答えは以下の通りです
どのような場合は、最小限の手順を使用してどのくらいのスペースを決定する支柱を受け入れたコンポーネントを作るか?

ステップ1：コンポーネントの足場を作成します。

import React from 'react'

export default Spacer = () => {}

ステップ2：それに行動を与える

import React from 'react'

export default Spacer = () => {
return(
<div style={{margin: ""}}></div>
)
}

このケースでは、私たちのコンポーネントは、私たちのために私たちの車を修正したり、2つの卵を揚げるしたくない.今でも素晴らしいものになっても、それを適用するときはいつでも、スペースが欲しい.

ステップ3：いくつかの小道具を渡します。

あなたの心が小道具を聞くとき、あなたの心が霧になるならば、それはちょうど財産のために短いです..オブジェクトがプロパティ(またはキー)とそのプロップに関連付けられた値を持つ方法のように?

import React from 'react'

export default Spacer = (props) => {
return(
<div style={{margin: props.unit }}>{props.children}</div>
)
}

待ってホールドアップ、私たちは、なぜ私たちのコンポーネントは子供がいるか？

私たちのコンポーネントが子供を持つ必要がある理由は、それが私たちのコンポーネントにそれがどのようにその空間をつくっている力を適用するかについて気にかけるのを望まないからです.我々は、それが公平で、不吉であることを望みますShift-abeg(er) . 「子供」は本質的に言って、あなたが手の前に何を得るかを知るつもりはありません.
次に、私たちのユニットの小道具は、魔法が起こる場所です.今、私たちはシフトAbEGコンポーネントに私たちにどんな数のマージン(ピクセル単位)を与えて欲しいです.今私たちのスペーサーは、このプロパティはまだ番号であることを知っていないので、我々は以前に反応するために使用されるパッケージの助けを求める前に、彼らは解散した.悲しい.
パッケージは' prop type 'と呼ばれます.それはあなたの小道具のデータ型をチェックするのを助けるので、あなたの構成要素は右の小道具がそれに渡されるとき、そしてその逆も知っています.

プロップタイプのインストール.

 npm install prop-types  || yarn add prop-types

インストールが完了したら、私たちはコンポーネントのプロップとして受け取ることになっているもののいくつかの理解を与えるためにそれをコンポーネントに追加します.

import React from 'react';
import PropTypes from 'prop-types';

export default Spacer = (props) => {
return(
<div style={{margin: props.unit }}>{props.children}</div>
)
}


Spacer.propTypes = {
   unit: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}

パニックじゃない!私たちは、私たちのコンポーネントに、私たちが単位=“5 px”またはunit =“5 em”などのようなものを加えたいときに、ストリングのどちらかを期待するように言っています.そして、私たちがちょうどこれをしたいときに数日を期待しなければなりません.

私たちのスペーサーコンポーネントはほとんど完了です！

今、私たちのスペーサーコンポーネントは、私たちのマージンを非常に大金を与えることができますが、マージンが欲しい場合は何ですか?またはマージン権利?それは失敗した.そして、我々は右に怠惰なものに最善を尽くしていますか?
もう一歩行きましょう

import React from 'react';
import PropTypes from 'prop-types';

export default Spacer = (props) => {
return(
<div style={{
   margin: props.unit,
   marginLeft: props.left,
   marginRight: props.right,
}}>
   {props.children}
</div>
)
}


Spacer.propTypes = {
   unit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   left: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   right: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   children: PropTypes.elementType
}

Proptypes.elementType means: "hey Spacer, expect your children props to be react elements"マッドooo!スラング"素晴らしい"この文脈では、我々はほとんどそこにいる.今、私たちのスペーサーは、コンポーネントには、左または右に移動する能力に渡されるすべての子供に与えることができます.
しかし、1つの小さな問題があります.
値が渡されない場合私たちはその事件のために立ち去りません.例えば、もし我々が探している行動だから余ったマージンを与えれば、値を期待しているマージンとマージンの正しいスタイルの小道具がどうなるのでしょうか?
修正しましょう

import React from 'react';
import PropTypes from 'prop-types';

export default Spacer = (props) => {
return(
<div style={{
   margin: props.unit || "",
   marginLeft: props.left || "",
   marginRight: props.right || "",
}}>
   {props.children}
</div>
)
}


Spacer.propTypes = {
   unit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   left: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   right: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   children: PropTypes.elementType
}

田大!我々のコンポーネントは、そのスタイルプロパティのどれにも渡されない場合にバグをスローしないことを保証しました.

どのようなマージントップと下のサー？

ここで美しいものは、あなたのコンポーネントの上部または下部にスペースが欲しい場合は、任意の子を渡す必要はありません.あなたはそれを渡すことができますunit プロップ、ピクセル単位で指定するスペースを指定し、ターゲットコンポーネントの上または下に配置します.
スペーサー

import React from 'react';
import Spacer from './components/common/Spacer'; 

const App = () => {

return (
  <div>
  <Spacer unit={40}/>
  <ComponentThatNeedsAMarginTopProperty />
  </div>
)

}


export default App;

通常のマージン権限の場合:

import React from 'react';
import Spacer from './components/common/Spacer'; 

const App = () => {
//This would give it space to the left side of the component!
return (
  <div>
  <Spacer left={40}>
  <ComponentThatNeedsAMarginLeftProperty /> 
  </Spacer>
  </div>
)

}


export default App;

A side note(updated):
Please note that using the style property of jsx tags give them more power over your styles than classes. This could lead to issues that make css hard to debug, classes are better as rightly pointed out in the comments section. However for the purpose of keeping this tutorial as beginner-friendly as possible, I'll leave as is.
</code> 


##Laziness is Achieved!
Congrats dear beginner! You've made a reusable component! Now the amount of time you spend writing margin-this or margin-that for classes have reduced significantly. You can now spend more time on other parts of your code! This is just a brief introduction to the power of re-usability to the uninitiated in React. Hope this helped. 

Stay lazy.