Lesson 04: Props (Part I)

Author: Yauhen

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "prop-types": "^15.6.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
     "react-scripts": "1.1.5"
@@ -13,4 +14,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/04_props/Lesson.jsx

@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+const Counter = ({ counter, func, number, string }) => {
+  return <h1>{`Counter component. Counter value is: ${counter}`}</h1>
+}
+
+Counter.propTypes = {
+  counter: PropTypes.number.isRequired,
+  func: PropTypes.func,
+  number: PropTypes.number,
+  string: PropTypes.string,
+}
+
+Counter.defaultProps = {
+  func: () => {},
+  number: 0,
+  string: '',
+}
+
+class CounterButton extends Component {
+  state = {
+    counter: 0,
+  }
+
+  handleClick = () => {
+    this.setState(({ counter }) => ({
+      counter: ++counter,
+    }))
+  }
+
+  render() {
+    const { counter } = this.state;
+
+    return (
+      <div>
+        <div>{counter}</div>
+        <Counter
+          counter={counter}
+          />
+        <button onClick={this.handleClick}>+1</button>
+      </div>
+    );
+  }
+}
+
+export default CounterButton;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import CounterButton from './03_state/Lesson.jsx';
+import Lesson from './04_props/Lesson.jsx';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<CounterButton />, document.getElementById('root'));
+ReactDOM.render(<Lesson />, document.getElementById('root'));
 registerServiceWorker();