reactjs
React
next.js

React.js/Next.js:Stateless Functional Componentの最低限の書き方、呼び出し方備忘録

概要

  • React.jsを使用してStateless Functional Component(SFC)を書く場合の備忘録
  • Next.jsを使用しているのでpageディレクトリなどが登場する
  • domをレンダリングするcomponentと、domをレンダリングしないcomponentの二種類

domをレンダリングするcomponent

component側

my_app/components/code_test/SfcDom.js
import React from 'react';

function SfcDom() {
    return <div>Hello World</div>;
}

export default SfcDom;

呼び出し側

my_app/pages/code_test/sfc_dom_test.js
import React from 'react';
import Head from 'next/head';

// 自作component
import SfcDom from '../components/code_test/SfcDom';

export default class extends React.Component {
    render() {

        return (
            <div>
                <SfcDom/>
            </div>

        )
    }
}

ブラウザからアクセス

sfc_dom.png

domをレンダリングしないcomponent

console.logで"Hello World"するだけのcomponent

component側

my_app/components/code_test/SfcConsole.js
function SfcConsole(){
    console.log('Hello World');
}

export default SfcConsole;

呼び出し側

my_app/pages/code_test/sfc_console_test.js
import React from 'react'
import Head from 'next/head'

// 自作component
import SfcConsole from '../../components/code_test/SfcConsole'

export default class extends React.Component {
    render() {
        SfcConsole();

        return (
            null
        )
    }
}

ブラウザからアクセス

sfc_console.png

まとめ的な

reactを不定期に少しずつ触っていますが、exportとかrenderとかreturnとか結局何がしたいのかわからなくて混乱する。

この辺は英語できる人はとくに支障無いんだろうか。