この記事に載せている JavaScriptのコードは、React + Redux を使っています。
但し、まだ何も意味のある処理を書いていないので、このままだと 属性 id="root"
を持った要素内に、以下のHTMLを出力するだけです。
<div>ここにHTMLを書きます。</div>
React + Redux を使ってシンプルなウェブページを作成する時の雛形として利用することができます。
実際にこのコードを利用する場合は、webpack などのモジュールバンドラーを利用することを想定しています。
JavaScript のコード
import React from 'react'
import { render } from 'react-dom'
import { Provider, connect } from 'react-redux'
import { createStore } from 'redux'
//import PropTypes from 'prop-types'
//-----------------------------------
// Action creators (Actionを返す)
//-----------------------------------
// 現段階では Action creators は使わないのでコメントアウトしておく
//const anAction = () => {
// return {
// type: ''
// }
//}
//-----------------------------------
// Reducer
//-----------------------------------
const appReducer = (state = null/*, action*/) => {
return state
}
//-----------------------------------
// Component
//-----------------------------------
class AppComponent extends React.Component {
//constructor(props) {
// super(props);
//}
render() {
return (
<div>
ここにHTMLを書きます。
</div>
);
}
}
AppComponent.propTypes = {};
//-----------------------------------
// Container
//-----------------------------------
const AppContainer = (() => {
const mapStateToProps = (/*state, ownProps*/) => {
return {};
}
const mapDispatchToProps = (/*dispatch*/) => {
return {}
}
return connect(
mapStateToProps,
mapDispatchToProps
)(AppComponent);
})();
//-----------------------------------
// Store
//-----------------------------------
const store = createStore(appReducer)
//-----------------------------------
// 画面に表示する
//-----------------------------------
render(
<Provider store={store}>
<AppContainer />
</Provider>,
document.getElementById('root')
)