easycode-react-08-2018 · PaskoDmitry · Aug 31, 2018
diff --git a/README.md b/README.md
diff --git a/homework_1/.babelrc b/homework_1/.babelrc
@@ -0,0 +1,5 @@
+{
+	"presets": [
+		"@babel/preset-react"
+	]
+}
diff --git a/homework_1/index.html b/homework_1/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Document</title>
+</head>
+<body>
+	<div id="app"></div>
+	<div id="button"></div>
+
+	<script src="bundle.js"></script>
+</body>
+</html>
diff --git a/homework_1/package-lock.json b/homework_1/package-lock.json
diff --git a/homework_1/package.json b/homework_1/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "react-course-easycode-PaskoDmitry",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "./node_modules/.bin/webpack-dev-server --inline --hot"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/easycode-react-08-2018/react-course-easycode-PaskoDmitry.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/easycode-react-08-2018/react-course-easycode-PaskoDmitry/issues"
+  },
+  "homepage": "https://github.com/easycode-react-08-2018/react-course-easycode-PaskoDmitry#readme",
+  "dependencies": {
+    "bootstrap3": "^3.3.5",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "style-loader": "^0.23.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.0",
+    "bootstrap": "^4.1.3",
+    "bootstrap-sass": "^3.3.7",
+    "css-loader": "^1.0.0",
+    "webpack": "^4.17.1",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.7"
+  }
+}
diff --git a/homework_1/src/main.css b/homework_1/src/main.css
@@ -0,0 +1 @@
+@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
diff --git a/homework_1/src/main.js b/homework_1/src/main.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './main.css';
+// import _ from 'lodash';
+// import 'bootstrap3/dist/css/bootstrap.css';
+// import 'bootstrap3/dist/css/bootstrap.min.css';
+
+const mountNode = document.getElementById('app');
+const button = document.getElementById('button');
+
+
+const users = [
+    {
+        id: 1,
+        fullName: 'Иванов Иван',
+        avatarUrl: 'https://randomuser.me/api/portraits/thumb/men/57.jpg',
+        birthdate: '1976-10-10',
+        gender: 'мужской',
+        address: 'ул. Звенигороская, 47б',
+        email: 'ivanov@mail.ru'
+    },
+    {
+        id: 2,
+        fullName: 'Петров Петр',
+        avatarUrl: 'https://randomuser.me/api/portraits/thumb/men/7.jpg',
+        birthdate: '1957-01-14',
+        gender: 'мужской',
+        address: 'ул.Пушкиская, 13',
+        email: 'ivanov@mail.ru'
+    },
+    {
+        id: 3,
+        fullName: 'Натальина Наталья',
+        avatarUrl: 'https://randomuser.me/api/portraits/thumb/women/7.jpg',
+        birthdate: '1990-07-03',
+        gender: 'женский',
+        address: 'ул. Лермонтова, 59',
+        email: 'ivanov@mail.ru'
+    }
+];
+
+let newUsers = users;
+const arr = [{key:'birthdate', val:'Дата рождения'}, {key:'gender', val:'Пол'}, {key:'address', val:'Адрес'},{key:'email', val:'Email'} ];
+
+const Table = (props) => {
+    console.log(props.user);
+	return (
+		<table className={"table table-user-information"}>
+            <tbody>
+			{
+                arr.map(data => {
+                    console.log(data);
+                    return (
+                        <TableRow data={data} user={props.user}/>
+                    )
+                })
+            }
+            </tbody>
+		</table>
+	)
+};
+
+const TableRow = (props) => {
+  return (
+      <tr>
+          <td>{props.data.val}</td>
+          <td>{props.user[props.data.key]}</td>
+      </tr>
+  )
+};
+
+const UserContent = (props) => {
+    return (
+
+        props.users.map(user => {
+            return (
+                <div className="panel panel-info">
+                    <div className="panel-heading">
+                        <h3 className="panel-title">{user.fullName}</h3>
+                    </div>
+                    <div className="panel-body">
+                        <div className="row">
+                            <div className="col-md-3 col-lg-3 " align="center">
+                                <img src="http://psdexport.com/storage/avatars/default.png" className="pull-left" />
+                            </div>
+                            <div>
+                                <div className="col-md-3 col-lg-3 " align="center">
+
+                                </div>
+                                <div className=" col-md-9 col-lg-9">
+                                    <Table user={user} />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )
+        })
+
+    )
+};
+
+const Button = (props) => {
+    return <button className="btn btn-primary" onClick={() => addUsers(props.users)}>Add users</button>
+};
+
+ReactDOM.render(<UserContent users={users}/>, mountNode);
+
+ReactDOM.render(<Button users={users} />, button);
+
+
+function addUsers(users) {
+    newUsers = newUsers.concat(users);
+    ReactDOM.render(<UserContent users={newUsers}/>, mountNode);
+}
diff --git a/homework_1/webpack.config.js b/homework_1/webpack.config.js
@@ -0,0 +1,22 @@
+const path = require("path");
+
+module.exports = {
+	entry: path.resolve('./src/main'),
+	output: {
+		filename: 'bundle.js',
+		publicPath: '/',
+	},
+	mode: 'development',
+	module: {
+		rules: [
+			{
+				test: /.js$/,
+				loader: 'babel-loader'
+			},
+            {
+                test: /\.css$/,
+                use: [ 'style-loader', 'css-loader' ]
+            }
+		]
+	}
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');