add lifecycle examples

Author: vinogradov

src/entry.js

@@ -1,7 +1,8 @@
-/* eslint-disable */
-import 'file-loader?name=[name].[ext]!./favicon.ico';
-/* eslint-enable */
+import 'file-loader?name=[name].[ext]!./favicon.ico'; // eslint-disable-line import/no-webpack-loader-syntax
 
+// import './examples/lifecycle/1.setState';
+// import './examples/lifecycle/2.props';
+// import './examples/lifecycle/3.redux';
 import './examples/react/index';
 // import './examples/redux/one-file';
 // import './examples/redux/separate-files';

src/examples/lifecycle/1.setState.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class Component extends React.Component {
+  constructor(props) {
+    super(props);
+    console.log('constructor'); // eslint-disable-line no-console
+    this.state = {value: 1};
+
+    this.onClickHandler = this.onClickHandler.bind(this);
+  }
+
+  componentWillMount() {
+    console.log('componentWillMount'); // eslint-disable-line no-console
+  }
+
+  componentDidMount() {
+    console.log('componentDidMount'); // eslint-disable-line no-console
+  }
+
+  componentWillReceiveProps() {
+    console.log('componentWillReceiveProps'); // eslint-disable-line no-console
+  }
+
+  shouldComponentUpdate() {
+    console.log('shouldComponentUpdate'); // eslint-disable-line no-console
+    return true;
+  }
+
+  componentWillUpdate() {
+    console.log('componentWillUpdate'); // eslint-disable-line no-console
+  }
+
+  componentDidUpdate() {
+    console.log('componentDidUpdate'); // eslint-disable-line no-console
+  }
+
+  onClickHandler() {
+    this.setState({value: 1});
+  }
+
+  render() {
+    console.log('render', this.props); // eslint-disable-line no-console
+
+    return <button onClick={this.onClickHandler}>setState</button>;
+  }
+}
+
+ReactDOM.render(
+  <Component />,
+  document.querySelector('#app')
+);

src/examples/lifecycle/2.props.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Component} from './component';
+
+class ParentComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {value: 1};
+
+    this.onClickHandler = this.onClickHandler.bind(this);
+  }
+
+  onClickHandler() {
+    this.setState({value: 1});
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={this.onClickHandler}>setState</button>
+        <Component value={this.state.value} />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <ParentComponent />,
+  document.querySelector('#app')
+);

src/examples/lifecycle/3.redux.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {Provider, connect} from 'react-redux';
+import {createStore, applyMiddleware, combineReducers} from 'redux';
+import logger from 'redux-logger';
+import {Component} from './component';
+
+const VALUE_1_INCREMENT = 'VALUE_1_INCREMENT';
+function value1Increment() {
+  return {
+    type: VALUE_1_INCREMENT
+  };
+}
+
+const VALUE_2_INCREMENT = 'VALUE_2_INCREMENT';
+function value2Increment() {
+  return {
+    type: VALUE_2_INCREMENT
+  };
+}
+
+function reducer(state = {value1: {deepProp: 0}, value2: 0}, action) {
+  switch (action.type) {
+    case VALUE_1_INCREMENT:
+      return {
+        ...state,
+        value1: {deepProp: state.value1.deepProp + 1}
+      };
+    case VALUE_2_INCREMENT:
+      return {
+        ...state,
+        value2: state.value2 + 1
+      };
+    default:
+      return state;
+  }
+}
+
+const ConnectedComponent = connect(state => ({
+  value: state.reducer.value1
+}))(Component);
+
+const store = createStore(
+  combineReducers({reducer}),
+  applyMiddleware(logger)
+);
+
+window.value1Increment = () => {
+  store.dispatch(value1Increment());
+};
+
+window.value2Increment = () => {
+  store.dispatch(value2Increment());
+};
+
+
+ReactDOM.render(
+  <Provider store={store}>
+    <ConnectedComponent />
+  </Provider>,
+  document.querySelector('#app')
+);

src/examples/lifecycle/component.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export class Component extends React.Component {
+  constructor(props) {
+    super(props);
+    console.log('constructor'); // eslint-disable-line no-console
+  }
+
+  componentWillMount() {
+    console.log('componentWillMount'); // eslint-disable-line no-console
+  }
+
+  componentDidMount() {
+    console.log('componentDidMount'); // eslint-disable-line no-console
+  }
+
+  componentWillReceiveProps() {
+    console.log('componentWillReceiveProps'); // eslint-disable-line no-console
+  }
+
+  shouldComponentUpdate() {
+    console.log('shouldComponentUpdate'); // eslint-disable-line no-console
+    return true;
+  }
+
+  componentWillUpdate() {
+    console.log('componentWillUpdate'); // eslint-disable-line no-console
+  }
+
+  componentDidUpdate() {
+    console.log('componentDidUpdate'); // eslint-disable-line no-console
+  }
+
+  render() {
+    console.log('render', this.props); // eslint-disable-line no-console
+
+    return <span>{JSON.stringify(this.props.value)}</span>;
+    // return null;
+  }
+}
+
+Component.propTypes = {
+  value: PropTypes.shape({}).isRequired
+};