{
"version": "1.0.0"
, "name": "react-redux-webpack"
, "description": "React Redux Webpack"
, "engines": {
"node": "6.3.1"
, "npm": "3.10.6"
}
, "dependencies": {
"webpack": "*"
, "webpack-dev-server": "*"
, "babel-core": "*"
, "babel-preset-es2015": "*"
, "babel-preset-react": "*"
, "babel-loader": "*"
, "react": "*"
, "react-dom": "*"
, "redux": "*"
}
, "scripts": {
"build": "node node_modules/webpack-dev-server/bin/webpack-dev-server --progress"
}
}
var path = require('path');
module.exports = {
entry: [path.resolve(__dirname + '/app.jsx')]
, output: {
path: path.resolve(__dirname)
, filename: 'bundle.js'
}
, module: {
loaders: [
{
test: /\.jsx?$/
, exclude: /node_modules/
, loader: 'babel-loader'
, query: {
presets: ['es2015', 'react']
}
}
]
}
};
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Redux + React</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
app.jsx
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
const reducer = (state = {say: 'Hi'}, action) => {
switch (action.type) {
case 'SAY OK': return {say: 'OK'};
default: return state;
}
}
const store = createStore(reducer);
class HelloWorld extends Component {
constructor () {
super(...arguments);
this.state = store.getState();
this.unsubscribe = store.subscribe(() => {
this.setState(store.getState());
});
}
sayOK () {
store.dispatch({type: 'SAY OK'});
}
render () {
return (
<div>
<h1>{this.state.say}</h1>
<h2 onClick={this.sayOK.bind(this)}>Скажи ОК</h2>
</div>
);
}
}
ReactDOM.render(<HelloWorld />, document.getElementById('root'));
Комментариев нет:
Отправить комментарий