header

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "antd": "^3.11.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1"
   },
   "scripts": {

src/components/Header/auth.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { Link } from "react-router-dom";
+import { Avatar } from 'antd';
+class Auth extends Component {
+    render() {
+        return (
+            <div className="auth">
+                <div className="avatar">
+                    <Avatar icon="user" style={{ backgroundColor: '#1890ff' }}/>
+                </div>
+                <div>
+                    <Link to="/auth">Мой профиль</Link>
+                </div>    
+                     
+            </div>
+        );
+    }
+}
+
+export default Auth;

src/components/Header/index.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import {Switch, Route} from 'react-router-dom';
+import HeaderLogo from '../Header/logo'
+import SearchLine from '../Header/searchLine'
+import Auth from '../Header/auth'
+import 'antd/dist/antd.css';
+class Header extends Component {
+    render() {
+        return (
+            <div className="header">
+               <HeaderLogo />
+               <SearchLine/>
+               <Auth/>
+            </div>
+        );
+    }
+}
+
+export default Header;

src/components/Header/logo.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import logo from '../../img/logoBazar.png'
+class HeaderLogo extends Component {
+    render() {
+        return (
+            <div className="logo">
+                <img src={logo} alt="Logo" />
+            </div>
+        );
+    }
+}
+
+export default HeaderLogo;

src/components/Header/searchLine.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { Input } from 'antd';
+
+const Search = Input.Search;
+
+class SearchLine extends Component {
+    render() {
+        return (
+            <div className="searchLine">
+                <Search className="searchInput"
+                    placeholder="input search text"
+                    onSearch={value => console.log(value)}
+                    enterButton
+                />
+            </div>
+        );
+    }
+}
+
+export default SearchLine;

src/App.js

@@ -1,12 +1,11 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import Header from '../components/Header'
 
 class App extends Component {
   render() {
     return (
       <div>
-        start
+        <Header/>
       </div>
     );
   }

src/index.css

@@ -12,3 +12,31 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+.logo{
+  
+  width: 20%;
+}
+.header{
+  display:flex;
+  
+}
+.searchLine{
+  width: 60%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  
+}
+.searchInput{
+  width: 80%;
+}
+.auth{
+  width: 20%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.avatar{
+  padding: 0 10px;
+}

src/index.js

@@ -1,10 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from '../src/container/App';
 import * as serviceWorker from './serviceWorker';
+import { BrowserRouter } from "react-router-dom";
+import Router from "./router";
+ReactDOM.render(
+    <BrowserRouter>
+            <Router />
+    </BrowserRouter>
+,
+document.getElementById("root")
+);
 
-ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/router.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+import App from "./container/App";
+
+export default () => (
+	<Switch>
+		<Route path="/" exact component={App} />
+	</Switch>
+);