Add another component example

goncalomb · goncalomb · commit 926326359864 · 2020-06-17T22:42:12.000+01:00
diff --git a/scripts/.gitignore b/scripts/.gitignore
@@ -3,3 +3,4 @@
 /package-lock.json
 
 /07-components.js
+/08-components.js
diff --git a/scripts/08-components.html b/scripts/08-components.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="https://unpkg.com/react@16.12.0/umd/react.production.min.js"></script>
+        <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js"></script>
+    </head>
+    <body>
+        <p>class component</p>
+        <div id="root0"></div>
+
+        <hr/>
+
+        <p>class component with state</p>
+        <div id="root1"></div>
+
+        <hr/>
+
+        <p>class component with state and conditional</p>
+        <div id="root2"></div>
+
+        <script src="08-components.js"></script>
+    </body>
+</html>
diff --git a/scripts/08-components.jsx b/scripts/08-components.jsx
@@ -0,0 +1,90 @@
+
+// npm install @babel/core @babel/preset-react @babel/cli
+// npx babel --presets @babel/preset-react --no-comments -o 08-components.js 08-components.jsx
+
+
+
+
+
+
+
+
+// class component
+
+class MyClassComponent extends React.Component {
+    render() {
+        return (
+            <div>
+                <p>{this.props.name} ({this.props.age})</p>
+            </div>
+        );
+    }
+}
+ReactDOM.render(<MyClassComponent name="John" age={45} />, document.getElementById("root0"));
+
+
+
+
+
+
+
+
+// class component with state
+
+class MyClassComponentWithState extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            date: "NOP",
+        };
+    }
+
+    render() {
+        return (
+            <div>
+                <p>Click for the date: <button onClick={() => this.setState({ date: (new Date()).toISOString() })}>PUSH</button></p>
+                <p>{this.props.message}{this.state.date}</p>
+            </div>
+        );
+    }
+}
+ReactDOM.render(<MyClassComponentWithState message="The date is: " />, document.getElementById("root1"));
+
+
+
+
+
+
+
+
+// class component with state and conditional
+
+class MyClassComponentWithToggle extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            showing: false,
+        };
+
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick() {
+        this.setState(state => {
+            return {
+                showing: !state.showing
+            }
+        });
+    }
+
+    render() {
+        return (
+            <div>
+                <p>{this.props.message}<button onClick={this.onClick}>PUSH</button></p>
+                {this.state.showing ? <MyClassComponentWithState message="The date is: " /> : null}
+            </div>
+        );
+    }
+}
+ReactDOM.render(<MyClassComponentWithToggle message="Click to toggle: " />, document.getElementById("root2"));

Original file line number	Diff line number	Diff line change
`@@ -3,3 +3,4 @@`
`3`	`3`	`/package-lock.json`
`4`	`4`
`5`	`5`	`/07-components.js`
	`6`	`+/08-components.js`