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>

        )
    }
}

ブラウザからアクセス

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
        )
    }
}

ブラウザからアクセス

まとめ的な

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

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