easycode-react-08-2018 · MShcherbyna · Aug 31, 2018 · Sep 8, 2018
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
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,30 @@
+{
+  "name": "homework_1",
+  "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"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "bootstrap": "^4.1.3",
+    "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",
+    "bootstrap3": "^3.3.5",
+    "css-loader": "^1.0.0",
+    "url-loader": "^1.1.1",
+    "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,119 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './main.css';
+import _ from 'lodash';
+// import 'bootstrap/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'
+    }
+];
+
+const header = [
+    {
+        key: 'birthdate',
+        val: 'Дата рождения'
+    },
+    {
+        key: 'gender',
+        val: 'Пол'
+    },
+    {
+        key: 'address',
+        val: 'Адрес'
+    },
+    {
+        key: 'email',
+        val: 'Email'
+    }
+];
+
+var usersCopy = users;
+
+const UserPanel = (props) => {
+	return (
+        <div>
+		{
+            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>
+                                    <div className="col-md-3 col-lg-3 " align="center">
+                                        <img src="http://psdexport.com/storage/avatars/default.png" className="pull-left" />
+                                    </div>
+                                    <div className=" col-md-9 col-lg-9">
+                                        <UserTable user={user} header={header} />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )
+            })
+        }
+        <button type="button" className="btn btn-primary" onClick={() => copyUsers(props.users)} >Добавить Пользователей</button>
+        </div>
+	);
+};
+
+const UserTable = (props) => {
+    return (
+        <table className="table table-user-information">
+            <tbody>	
+                {
+                    props.header.map(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 copyUsers = (props) => {
+    ReactDOM.render(<UserPanel users={usersCopy.concat(props)} />, mountNode);
+}
+
+ReactDOM.render(<UserPanel users={users} />, 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');