React コンポーネントとJSX記法

ReactのJSX記法

create-react-appを少しいじったもの。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    const logoOptions = {
      alt: "logo",
      className: "App-logo",
       src: logo
    };
    const title="こんにちは React";
    const targets = ["World", "Kanae", "Yukina"];

    return (
      <div className="App">
      <header className="App-header">
        {
        // コメントの書き方
        }
        <img {...logoOptions} />
         {title && <p>{title}</p>} 
        {targets.map(target => (
          <p>Hello, {target}!</p>
      ))}
        </header>
     </div>
    );
  }
}

export default App;

下のコードはtitleがもし存在すれば、

{title}

を描くという意味 if条件を＆＆を使って表現している。

  {title && <p>{title}</p>}

下のコードはtarget配列の要素を繰り返し描画する書き方。

   {targets.map(target => (
      <p>Hello, {target}!</p>
    ))}

注意するべきは、JSX でタグを階層化して書くときは、ツリ ー階層のトップレベルはひとつにしないとエラーが出る。 上のコードの場合は

タグの階層がトップレベルなので、ここに並列して他の

タグやなどを入れてはいけない。