17.04.2019

Lesson5/package.json

@@ -1,7 +1,6 @@
 {
   "name": "lesson5",
   "version": "1.0.0",
-  "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -19,19 +18,27 @@
     "jquery": "^3.3.1",
     "popper.js": "^1.14.7",
     "prop-types": "^15.7.2",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
-    "react-router": "^3.2.1"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-redux": "^7.0.2",
+    "react-router": "^3.2.1",
+    "react-router-dom": "^5.0.0",
+    "redux": "^4.0.1",
+    "redux-logger": "^3.0.6",
+    "redux-promise-middleware": "^6.1.0",
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.5",
     "css-loader": "^2.1.0",
     "style-loader": "^0.23.1",
-    "webpack": "^4.29.5",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.1"
-  }
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.3.1"
+  },
+  "keywords": [],
+  "description": ""
 }

Lesson5/src/app.js

@@ -8,12 +8,14 @@ import MainPage from './app/pages/Main';
 import PageNotFound from './app/pages/PageNotFound';
 import Users from './app/pages/Users';
 import User from './app/pages/User';
-
+import {Provider} from 'react-redux';
+//import store from './store';
 
 const app = document.querySelector('#root');
 
 
 ReactDOM.render(
+//	<Provider store={store}>
 	<Router history={browserHistory}>
 		<Route path="/" component={Layout}>
 			<IndexRoute component={MainPage}/>
@@ -23,6 +25,7 @@ ReactDOM.render(
 			<Route path="*" component={PageNotFound}/>
 		</Route>
 	</Router>
+	//</Provider>
 	,
 app);
 

Lesson5/src/app/components/Menu.js

@@ -1,21 +1,19 @@
 import React from 'react';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
-export default class Menu extends React.Component {
-  render() {
-    return (
-      <nav className="navbar navbar-expand-lg navbar-light bg-light">
+const Menu = (props) => {
+  return (
+    <nav className="navbar navbar-expand-lg navbar-light bg-light">
       <div className="container">
-        <Link to="/" className="navbar-brand">{this.props.brand}</Link>
-
+        <Link to="/" className="navbar-brand">{props.brand}</Link>
         <div className="collapse navbar-collapse">
           <ul className="navbar-nav">
-            {this.props.children}
+            {props.children}
           </ul>
         </div>
       </div>
+    </nav>
+  );
+}
 
-      </nav>
-    );
-  }
-}
+export default Menu;

Lesson5/src/app/components/MenuItem.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
-export default class MenuItem extends React.Component {
-  render() {
-    return (
-      <li className={this.props.active ? 'nav-item active' : 'nav-item'}>
-        <Link className="nav-link" to={this.props.href}>
-          {this.props.children}
-        </Link>
-      </li>
-    );
-  }
-}
+const MenuItem = (props) => {
+  return (
+    <li className={props.active ? 'nav-item active' : 'nav-item'}>
+      <Link className="nav-link" to={props.href}>
+        {props.children}
+      </Link>
+    </li>
+  );
+}
+
+export default MenuItem;

Lesson5/src/app/components/User.js

@@ -1,20 +1,21 @@
 import React from 'react';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
-export default class User extends React.Component {
-  render() {
-    return (
-      <div className="card border-secondary mb-3">
-        <div className="card-header">
-          <Link to={`/users/${this.props.id}`}>{this.props.username}</Link>
-        </div>
-        <div className="card-body text-secondary">
-          <p>{this.props.name}</p>
-          <p>{this.props.email}</p>
-          <p>{this.props.phone}</p>
-          <p>{this.props.website}</p>
-        </div>
+const User = (props) => {
+  return (
+    <div className="card border-secondary mb-3">
+      <div className="card-header">
+        <Link to={`/users/${props.id}`}>{props.username}</Link>
       </div>
-    );
-  }
-}
+      <div className="card-body text-secondary">
+        <p>{props.name}</p>
+        <p>{props.email}</p>
+        <p>{props.phone}</p>
+        <p>{props.website}</p>
+      </div>
+    </div>
+  );
+}
+
+
+export default User;

Lesson5/src/app/components/UsersList.js

@@ -1,37 +1,27 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
 import axios from 'axios';
 import User from './User';
 
-export default class UsersList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      users: []
-    };
-  }
+const UsersList = () => {
+  const [userL, setUserL] = useState([]);
 
-  componentDidMount()
-  {
+  useEffect(() => {
     axios.get('https://jsonplaceholder.typicode.com/users/')
-    .then((response) => {
-      this.setState({users: response.data})
-    })
-  }
+      .then((response) => {
+        setUserL(response.data);
+        console.log(userL);
+      })
+  }, []);
 
-  render() {
-    if(!this.state.users.length) {
-      return null;
-    }
+  return (
+    <>
+    { userL.length && (
+    <div>
+      <h1>Пользователи</h1>
+      {userL.map((user, index) => <User key={index} {...user} />)}
+    </div>
+    )}
+</>
+}
 
-    const users = this.state.users.map((user, index) => {
-      return <User key={index} {...user} />
-    })
-
-    return (
-      <div>
-        <h1>Пользователи</h1>
-        {users}
-      </div>
-    );
-  }
-}
+export default UsersList;

Lesson5/src/app/layouts/Layout.js

@@ -2,40 +2,36 @@ import React from 'react';
 import Menu from '../components/Menu';
 import MenuItem from '../components/MenuItem';
 
+const Layout = props => {
 
-export default class Layout extends React.Component {
-  constructor(props) {
-    super(props);
-    this.brand = 'React blog!';
-  }
+  const brand = 'React blog!';
 
-  isActive(href) {
+  const isActive = (href) => {
     return window.location.pathname === href;
   }
 
-  render() {
-    return (
-      <div>
-        <Menu brand={this.brand}>
-          <MenuItem href="/" active={this.isActive('/')}>
-            Главная
+  return (
+    <div>
+      <Menu brand={brand}>
+        <MenuItem href="/" active={isActive('/')}>
+          Главная
           </MenuItem>
-          <MenuItem href="/users" active={this.isActive('/users')}>
-            Пользователи
+        <MenuItem href="/users" active={isActive('/users')}>
+          Пользователи
           </MenuItem>
-        </Menu>
-        <div className="container">
-          <div className="row">
-            <div className="col-12">
-              {this.props.children}
-            </div>
+      </Menu>
+      <div className="container">
+        <div className="row">
+          <div className="col-12">
+            {props.children}
           </div>
         </div>
-        <footer className="card-footer">
-        &copy; 2019
-        </footer>
       </div>
+      <footer className="card-footer">
+        &copy; 2019 React
+        </footer>
+    </div>
+  );
+}
 
-    );
-  }
-}
+export default Layout;

Lesson5/src/app/pages/Main.js

@@ -1,12 +1,12 @@
 import React from 'react';
 
-export default class Main extends React.Component {
-  render() {
-    return (
-      <div>
-        <h1>Главная страница</h1>
-        <p>Добро пожаловать</p>
-      </div>
-    );
-  }
-}
+const Main = () => {
+  return (
+    <div>
+      <h1>Главная страница</h1>
+      <p>Добро пожаловать</p>
+    </div>
+  );
+}
+
+export default Main;

Lesson5/src/app/pages/PageNotFound.js

@@ -1,12 +1,12 @@
 import React from 'react';
 
-export default class PageNotFound extends React.Component {
-  render() {
-    return (
-      <div>
-        <h1>Страница не найдена</h1>
-        <p>Error 404!</p>
-      </div>
-    );
-  }
-}
+const PageNotFound = () => {
+  return (
+    <div>
+      <h1>Страница не найдена</h1>
+      <p>Error 404!</p>
+    </div>
+  );
+}
+
+export default PageNotFound;

Lesson5/src/app/pages/User.js

@@ -1,27 +1,23 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
 import UserProfile from '../components/User';
 import axios from 'axios';
 
-export default class User extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      user: null
-    };
-  }
+const User = props => {
+  const [userS, setUserS] = useState(null);
 
-  componentDidMount() {
-    axios.get(`https://jsonplaceholder.typicode.com/users/${this.props.params.userId}`)
-    .then((response) => {
-      this.setState({user: response.data});
-    });
-  }
+  useEffect(() => {
+    axios.get(`https://jsonplaceholder.typicode.com/users/${props.params.userId}`)
+      .then((response) => {
+        setUserS(response.data);
+        console.log(userS);
+      });
+  }, []);
 
-  render() {
-    return (
-      <div>
-        {this.state.user && <UserProfile {...this.state.user} />}
-      </div>
-    );
-  }
-}
+  return (
+    <>
+      {userS && <UserProfile {...userS} />}
+    </>
+  );
+}
+
+export default User;