course ongoing

02/src/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import './App.css';
 import Person from './Person/Person';
 
+// // ## Functional code generated by creat-react-app ##
 // function App() {
 //   return (
 //     <div className="App">
@@ -16,18 +17,113 @@ import Person from './Person/Person';
 //   // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
 // }
 
+// // ## Functional code created using ES6 (React Hooks) ##
+// const App = props => {
+//   const [charState, setCharState] = React.useState({
+//     character: [
+//       { name: 'Yutsuo', ilvl: 320 },
+//       { name: 'Schwarz', ilvl: 110 },
+//       { name: 'Murom', ilvl: 78 }
+//     ]
+//     // somethingElse: 'something something'
+//   });
+
+//   const [somethingElseState, setSomethingElseState] = React.useState('yadda yadda yadda');
+
+//   console.log(charState, somethingElseState);
+
+//   const switchNameHandler = () => {
+//     // console.log('\"CLICK\"');
+//     // DON'T DO THIS: this.state.character[1].name = 'Schwarzgeist';
+//     // Do not mutate state directly. Use setState()  react/no-direct-mutation-state
+//     setCharState({
+//       character: [
+//         { name: 'Yutsuo', ilvl: 320 },
+//         { name: 'Schwarzgeist', ilvl: 110 },
+//         { name: 'Murom', ilvl: 79 }
+//       ],
+//       somethingElse: charState.somethingElse
+//     });
+//   };
+
+//   return (
+//     <div className="App">
+//       <h1>Hi, I'm a React App, I'm cute.</h1>
+//       <p>Created using ES6 Functional code</p>
+//       <button onClick={switchNameHandler}>Switch Char</button>
+//       <Person name={charState.character[0].name} ilvl={charState.character[0].ilvl} />
+//       <Person name={charState.character[1].name} ilvl={charState.character[1].ilvl} />
+//       <Person name={charState.character[2].name} ilvl={charState.character[2].ilvl} />
+//       <br />
+//       <Person name="Yutsuo" ilvl="320"> Main Character </Person>
+//       <Person name="Schwarzgeist" ilvl="200"/>
+//       <Person name="Murom" ilvl="78"/>
+//     </div>
+//     );
+// // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
+// }
+
+
+// ## OOP code ##
 class App extends React.Component {
+  state = {
+    character: [
+      { name: 'char1', ilvl: 320 },
+      { name: 'char2', ilvl: 110 },
+      { name: 'char3', ilvl: 78 }
+    ],
+    somethingElse: 'something something'
+  }
+
+  switchNameHandler = () => {
+    // console.log('\"CLICK\"');
+    // DON'T DO THIS: this.state.character[1].name = 'Schwarzgeist';
+    // Do not mutate state directly. Use setState()  react/no-direct-mutation-state
+    this.setState({
+      character: [
+        { name: 'Yutsuo', ilvl: 320 },
+        { name: 'Schwarzgeist', ilvl: 110 },
+        { name: 'Murom', ilvl: 79 }
+      ]
+    })
+  }
+
+  nameChangedHandler = (event) => {
+    this.setState({
+      character: [
+        { name: 'Yutsuo', ilvl: 320 },
+        { name: event.target.value, ilvl: 110 },
+        { name: 'Murom', ilvl: 79 }
+      ]
+    })
+  }
+
   render() {
       return (
         <div className="App">
           <h1>Hi, I'm a React App, I'm cute.</h1>
           <p>Created using OOP code</p>
-          <button>Switch Name</button>
-          <Person name="Yutsuo" ilvl="320"> Main Character </Person>
-          <Person name="Schwarzgeist" ilvl="200"/>
-          <Person name="Murom" ilvl="78"/>
+          <button onClick={() => this.switchNameHandler()}>Switch Char</button>
+          <Person
+            name={this.state.character[0].name}
+            ilvl={this.state.character[0].ilvl}
+          />
+          <Person
+            name={this.state.character[1].name}
+            ilvl={this.state.character[1].ilvl}
+            click={this.switchNameHandler.bind(this, 'Schwarzgeist')}
+            changed={this.nameChangedHandler}
+          />
+          <Person
+            name={this.state.character[2].name}
+            ilvl={this.state.character[2].ilvl}
+          />
+          {/* <br />
+          <Person name="Yutsuo" ilvl="320">Main Character</Person>
+          <Person name="Schwarzgeist" ilvl="200" />
+          <Person name="Murom" ilvl="78" /> */}
         </div>
-        );
+      );
     // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
   }
 }

02/src/Person/Person.css

@@ -0,0 +1,8 @@
+.Person {
+    width: 500px;
+    margin: 16px auto;
+    border: 1px solid #eee;
+    box-shadow: 0 2px 3px #ccc;
+    padding: 16px;
+    text-align: center;
+}

02/src/Person/Person.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import './Person.css';
 
 const person = (props) => {
     return (
-        <div>
-            <p>I'm a {props.name} and my ilvl is {props.ilvl} and ready to raid!</p>
+        <div className="Person">
+            <p onClick={props.click}>I'm a {props.name} and my ilvl is {props.ilvl} and ready to raid!</p>
             <p>{props.children}</p>
+            <input type="text" onChange={props.changed} defaultValue={props.name} />
         </div>
     )
 };

Dockerfile

@@ -1,4 +1,4 @@
-FROM node as builder
+FROM node:current-alpine as builder
 
 RUN npm install -g create-react-app
 

docker-compose-proxy.yml

@@ -0,0 +1,32 @@
+version: "3.7"
+services:
+
+  react:
+    container_name: react
+    image: yutsuo/react
+    build:
+      context: .
+      args:
+        - HTTP_PROXY=http://192.168.128.1:3128
+        - HTTPS_PROXY=http://192.168.128.1:3128
+        - http_proxy=http://192.168.128.1:3128
+        - https_proxy=http://192.168.128.1:3128
+    environment:
+      - HTTP_PROXY=http://192.168.128.1:3128
+      - HTTPS_PROXY=http://192.168.128.1:3128
+      - http_proxy=http://192.168.128.1:3128
+      - https_proxy=http://192.168.128.1:3128
+    volumes:
+      - $PWD/src:/usr/src/app/src
+      - $PWD/public:/usr/src/app/public
+    ports:
+      - "3000:3000"
+      - "9229:9229"
+    # command: ["echo",$PWD/src]
+    command: ["npm", "start"]
+networks:
+  default:
+    ipam:
+      driver: default
+      config:
+        - subnet: 172.17.0.0/24

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "udemy-react",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "3.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}