pikesaku’s blog

個人的な勉強メモです。記載内容について一切の責任は持ちません。

React勉強メモ

メモ1

const Comp1 = () => (
  <div>
   comp1
   <p>comp1-p1</p>
   <p>comp1-p2</p>
   <p>comp1-p3</p>
   <Comp3 />
  </div>
);

const Comp2 = () => (
  <h3>comp2</h3>
);

const Comp3 = () => (
  <h3>comp3</h3>
);

const App = () => (
  <div>
    <Comp1 />
    <Comp2 />
  </div>
);

const render = () => ReactDOM.render(<App />, document.getElementById('app'));
setTimeout(render, 0);

・下2行が表示を指示する部分。この2行がないと何も表示されない。
・Comp1~3はHTML部分を記述するコンポーネント。名前の頭の文字が大文字である必要があり?(jsbinでは小文字だと動かなかった。)

メモ2

const hs = {
  fontSize: 50
}

const Hello = () => (
  <div style={{
    color: 'red',
    backgroundColor: 'black'
  }}>Hello</div>
);

const App = () => (
  <div style={hs}>
  <Hello />
  </div>
);

const render = () => ReactDOM.render(<App />, document.getElementById('app'));
setTimeout(render, 0);

・スタイルもコンポーネントで記述できる。ただ名前の頭文字は大文字でなくてもOK?
・"{{"でくくる部分は、inline styleの書き方。
・camel caseで書く。margin-leftはmarginLeft
・複数プロパティを指定する場合は、カンマで区切る
・外部定義も可能。(上記のhs)

メモ3

const Hello = ({ name, color, backgroundcolor }) => (
  <div>
    <p style={{ color, backgroundColor: backgroundcolor }}>Hello {name}!</p>
  </div>
);

const Jiro = ({ name }) => (
  <div>
    <p>Jiro {name}!</p>
  </div>
);

const App = () => (
  <div>
    <Hello name="World" color="blue" />
    <Hello name="Ebisu" color="red" />
    <Hello name="Ikebukuro" color="green" backgroundcolor="black" />
    <Jiro name={"World" + " Test"} />
  </div>
);

const render = () => ReactDOM.render(<App />, document.getElementById('app'));
setTimeout(render, 0);

コンポーネントにパラメタを渡せる(props機能)
・パラメタはコンポーネント呼び出し時に指定する。上記のHello name="World"部分。XMLフォーマットで記述する必要あり!そのため、名前付き引数にする必要あり。
・上記のHello name="World"部分では、Hello name={"World" + 3}のようにしてJavascript記法を利用する事が可能。
・{{ color }}は、{{ color: color }}の意味。ES2015では省略が可能。

メモ4

const items = [
  { name: 'aaa', color: 'black', backgroundcolor: 'white' },
  { name: 'bbb', color: 'green', backgroundcolor: 'white' },
  { name: 'ccc', color: 'pink', backgroundcolor: 'white' },
  { name: 'ddd', color: 'yellow', backgroundcolor: 'white' },
  { name: 'eee', color: 'blue', backgroundcolor: 'white' },
];

const items2 = [
  [1,2,3],
  [10,20,30],
  [100,200,300], 
];

const Hello = ({ name, color, backgroundcolor }) => (
  <div>
    <p style={{ color, backgroundColor: backgroundcolor }}>Hello {name}!</p>
  </div>
);

const Hello2 = ({ item2 }) => (
  <div>
    {item2.map((elem) => (
      <p>Hello {elem}!</p>
    ))}
  </div>
);

const App = () => (
  <div>
    {items.map((item) => (
      <Hello name={item.name} color={item.color} backgroundcolor={item.backgroundcolor}  />
    ))}
    {items2.map((item2) => (
      <Hello2 item2={item2}/>
    ))} 
  </div>
);

const render = () => ReactDOM.render(<App />, document.getElementById('app'));
setTimeout(render, 0);

・引数を渡すpropsで、配列を使うケース
・Appのdivの値部分にあたる{}はJSX内でJavaScriptを書くためのもの→JavaScript記述できる
・items . map ( ( item ) = > (処理) )は、JavaScriptの配列要素に対して特定の処理を実行するmapの記述
・itemsの要素が一つづつitemに格納されて、"処理"が実行される。
・mapの説明は、以下URL参照
 Arrayの基礎知識と各メソッドの使用方法 - Qiita
コンポーネント(constで定義された処理)に引数を渡す時は、常に名前付き引数にする必要あり?
→2次元配列処理をするは、だと動かない。
→→propsは、XMLフォーマットで記述する必要あり!そのため、名前付き引数にする必要あり。