React / Functional Component の書き方のバリエーション

Tweet

(インデントが崩れてしまうのは自分が使っているwordpressプラグインの仕様のようです…困った)

https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

//1.基本形
//もしこの例の用に、JSXを返すだけであれば3.省略形を使ってもいい
import React from 'react';

const App = ()=> {
  return (
    

<div>This is App component</div>


  );
};

export default App;

//2.propsを受け取る場合 また関数や変数を持たせる場合
//classで書いた場合と異なり、thisの扱いをしなくていいので、楽
//stateをもたせる必要がなければこれでいい
import React from "react";

const App = ({ name }) => {
  const mrName = "Mr. " + name;
  const alertName = name => {
    alert(name);
  };
  return (
    

<div>
      

<div>
        this is Component {mrName}
      </div>


      <button onClick={() => {
          alertName(name);
        }}
      />
    </div>


  );
};

export default App;

//3.省略形
//単にjsxを返すだけであれば、これが一番シンプルな記述
import React from 'react';

const App = ()=> (
  

<div>This is App component</div>


);

export default App;