From f536f4de3de7c6494e8f90ec1dc86f6bbc282eb7 Mon Sep 17 00:00:00 2001 From: Yutsuo Date: Thu, 28 Nov 2019 13:02:02 -0300 Subject: [PATCH] course ongoing --- 02/src/App.js | 106 +++++++++++++++++++++++++++++++++++++-- 02/src/Person/Person.css | 8 +++ 02/src/Person/Person.js | 6 ++- Dockerfile | 2 +- docker-compose-proxy.yml | 32 ++++++++++++ package.json | 31 ++++++++++++ 6 files changed, 177 insertions(+), 8 deletions(-) create mode 100644 02/src/Person/Person.css create mode 100644 docker-compose-proxy.yml create mode 100644 package.json diff --git a/02/src/App.js b/02/src/App.js index 73357ee1..475b4d85 100644 --- a/02/src/App.js +++ b/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 ( //
@@ -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 ( +//
+//

Hi, I'm a React App, I'm cute.

+//

Created using ES6 Functional code

+// +// +// +// +//
+// Main Character +// +// +//
+// ); +// // 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 (

Hi, I'm a React App, I'm cute.

Created using OOP code

- - Main Character - - + + + + + {/*
+ Main Character + + */}
- ); + ); // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`)); } } diff --git a/02/src/Person/Person.css b/02/src/Person/Person.css new file mode 100644 index 00000000..77eb792b --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/02/src/Person/Person.js b/02/src/Person/Person.js index e8c1fcc4..a3882b9b 100644 --- a/02/src/Person/Person.js +++ b/02/src/Person/Person.js @@ -1,10 +1,12 @@ import React from 'react'; +import './Person.css'; const person = (props) => { return ( -
-

I'm a {props.name} and my ilvl is {props.ilvl} and ready to raid!

+
+

I'm a {props.name} and my ilvl is {props.ilvl} and ready to raid!

{props.children}

+
) }; diff --git a/Dockerfile b/Dockerfile index ddaa24a7..6b2321c9 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node as builder +FROM node:current-alpine as builder RUN npm install -g create-react-app diff --git a/docker-compose-proxy.yml b/docker-compose-proxy.yml new file mode 100644 index 00000000..09bd2a58 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 00000000..b804129f --- /dev/null +++ b/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" + ] + } +}