Step 7 Разбивка на компоненты

[mooneex]

App.js

import React from 'react';
import './App.css';
import Header from './components/Header';
import Navbar from './components/Navbar';
import Profile from './components/Profile';

const App = () => {
  return (
    <div className='app-wraper'>
      <Header />
      <Navbar />
      <Profile />
    </div>);
}

export default App;

[mooneex]

Header.jsx

import React from "react";

const Header = () => {
    return <header className='header'>
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/512px-LEGO_logo.svg.png'></img>
    </header>

}

export default Header;

[mooneex]

Profile.jsx

import React from "react";

const Profile = () => {
    return <div className='profile'>
    <div>
    <img src='https://png.pngtree.com/thumb_back/fh260/background/20200714/pngtree-modern-double-color-futuristic-neon-background-image_351866.jpg'></img>
    </div>
    <div>
    ava + description
    </div>
    <div>
    My post
    <div>
    New Post
    </div>
    </div>
    <div>
    <div>
    Post 1
    </div>
    <div>
    Post 2
    </div>
    </div>
</div>
}

export default Profile;

[mooneex]

Navbar.jsx

import React from "react";

const Navbar = () => {
    return <nav className='nav'>
    <div>
    <a>Profile</a>
    </div>
    <div>
    <a>Messages</a>
    </div>
    <div>
    <a>News</a>
    </div>
    <div>
    <a>Music</a>
    </div>
    <div>
    <a>Settings</a>
    </div>
</nav>
}

export default Navbar;