├── .babelrc
├── .gitignore
├── README.md
├── index.html
├── package.json
├── src
├── actions
│ └── counterAction.js
├── components
│ ├── Btn.js
│ └── Show.js
├── containers
│ └── Panel.js
├── main.js
├── reducers
│ └── counterReducer.js
└── store
│ └── configureStore.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react", "es2015", "stage-0"]
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /dist
3 | npm-debug.log
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React ES6 start kit
2 |
3 | help everyone to start first React + ES5 front end enviroment with webpack and babel
4 |
5 | `npm run dev` run webpack dev server
6 |
7 | `npm run build` build dist file
8 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "project",
3 | "private": true,
4 | "version": "1.0.0",
5 | "description": "",
6 | "main": "webpack.config.js",
7 | "scripts": {
8 | "test": "echo \"Error: no test specified\" && exit 1",
9 | "dev": "webpack-dev-server --devtool eval --progress --colors --hot",
10 | "build": "webpack",
11 | "start": "npm run dev"
12 | },
13 | "author": "",
14 | "license": "ISC",
15 | "dependencies": {
16 | "babel-core": "^6.18.2",
17 | "babel-loader": "^6.2.8",
18 | "babel-preset-es2015": "^6.18.0",
19 | "babel-preset-react": "^6.16.0",
20 | "babel-preset-stage-0": "^6.16.0",
21 | "react": "^15.4.1",
22 | "react-dom": "^15.4.1",
23 | "react-hot-loader": "^1.3.1",
24 | "react-redux": "^5.0.1",
25 | "redux": "^3.6.0",
26 | "webpack": "^1.13.3",
27 | "webpack-dev-server": "^1.16.2"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/actions/counterAction.js:
--------------------------------------------------------------------------------
1 | export const incrementAction = () => {
2 | return {
3 | type: 'INCREMENT',
4 | number: 1
5 | }
6 | }
7 |
8 | export const decrementAction = () => {
9 | return {
10 | type: 'DECREMENT',
11 | number: 1
12 | }
13 | }
--------------------------------------------------------------------------------
/src/components/Btn.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class Btn extends React.Component {
4 | render() {
5 | const { increment, decrement } = this.props;
6 |
7 | return (
8 |
9 |
10 |
11 |
12 | )
13 | }
14 | }
15 |
16 | export default Btn;
--------------------------------------------------------------------------------
/src/components/Show.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class Show extends React.Component {
4 | render() {
5 | const { num } = this.props;
6 |
7 | return (
8 |
9 | { num }
10 |
11 | )
12 | }
13 | }
14 |
15 | export default Show;
--------------------------------------------------------------------------------
/src/containers/Panel.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import { bindActionCreators } from 'redux';
4 |
5 | import Show from '../components/Show';
6 | import Btn from '../components/Btn';
7 |
8 | import * as counterAction from '../actions/counterAction';
9 |
10 | class Panel extends React.Component {
11 | constructor() {
12 | super();
13 | }
14 |
15 | render() {
16 |
17 | const { number, actions } = this.props;
18 |
19 | return (
20 |
21 |
22 |
26 |
27 | )
28 | }
29 | }
30 |
31 | const mapStateToProps = (state) => {
32 | return {
33 | number: state.counterReducer.number
34 | }
35 | }
36 |
37 | const mapDispatchToProps = (dispatch) => {
38 | return {
39 | actions: bindActionCreators(counterAction, dispatch)
40 | }
41 | }
42 |
43 | export default connect(mapStateToProps, mapDispatchToProps)(Panel);
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import { Provider } from 'react-redux';
5 |
6 | import Panel from './containers/Panel';
7 |
8 | import configureStore from './store/configureStore';
9 |
10 | ReactDOM.render(
11 |
12 |
13 |
14 | , document.getElementById('app'));
15 |
--------------------------------------------------------------------------------
/src/reducers/counterReducer.js:
--------------------------------------------------------------------------------
1 | const initialState = {
2 | number: 0
3 | }
4 |
5 | const counterReducer = (state = initialState, action) => {
6 | switch(action.type) {
7 | case 'INCREMENT':
8 | return {
9 | ...state,
10 | number: state.number + action.number
11 | }
12 | case 'DECREMENT':
13 | return {
14 | ...state,
15 | number: state.number - action.number
16 | }
17 | default:
18 | return state;
19 | }
20 | }
21 |
22 | export default counterReducer;
--------------------------------------------------------------------------------
/src/store/configureStore.js:
--------------------------------------------------------------------------------
1 | import { createStore, combineReducers } from 'redux';
2 |
3 | import counterReducer from '../reducers/counterReducer';
4 |
5 | const rootReducer = combineReducers({
6 | counterReducer
7 | })
8 |
9 | export default createStore(rootReducer, window.devToolsExtension ? window.devToolsExtension() : undefined);
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | module.exports = {
3 | entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'src/main.js')],
4 | output: {
5 | filename: './dist/bundle.js'
6 | },
7 | module: {
8 | loaders: [
9 | {
10 | test: /\.jsx?$/,
11 | exclude: /node_modules/,
12 | loaders: ['react-hot', 'babel']
13 | }
14 | ]
15 | }, devtool: 'source-map'
16 | };
17 |
--------------------------------------------------------------------------------