package.json
{
"version": "1.0.0"
, "name": "react-redux"
, "description": "React Redux"
, "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"
}
}
webpack.config.js
var path = require('path');
module.exports = {
entry: [path.resolve(__dirname + '/source/app.jsx')]
, output: {
path: path.resolve(__dirname)
, filename: 'app.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">
<script src="https://fb.me/react-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
<title>Redux React Counter</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>
source/app.jsx
const {createStore} = Redux;
// Reducer
const counter = (state = 0, action) => {
switch(action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
};
// Store
const store = createStore(counter);
// Subscribe
store.subscribe(render);
// Dispatch
const render = () => {
ReactDOM.render(
<Counter value={store.getState()}
onIncrement={() => store.dispatch({type: 'INCREMENT'})}
onDecrement={() => store.dispatch({type: 'DECREMENT'})}
/>, document.getElementById('root')
);
};
class Counter extends React.Component {
render() {
return (
<div>
<h1>{this.props.value}</h1>
<button onClick={this.props.onIncrement}>+</button>
<button onClick={this.props.onDecrement}>-</button>
</div>
);
}
};
render();
Thanks for posting this article.
ОтветитьУдалитьFull Stack online Training
Full Stack Training
Full Stack Developer Online Training