#2 Созданы и выведены компоненты

.idea/.gitignore

+# Default ignored files
+/workspace.xml

.idea/exam_7.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/inspectionProfiles/Project_Default.xml

+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="JSXNamespaceValidation" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+  </profile>
+</component>
\ No newline at end of file

.idea/misc.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="JSX" />
+  </component>
+</project>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/exam_7.iml" filepath="$PROJECT_DIR$/.idea/exam_7.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

src/App.js

-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/components/Basket/Basket.css

+.Basket {
+    width: 30%;
+    border: 3px solid silver;
+    min-height: 400px;
+    border-radius: 10px 0 0 10px;
+}
\ No newline at end of file

src/components/Basket/Basket.js

+import React from "react";
+import BasketItem from "./BasketItem/BaskeItem";
+import TotalPrice from "./TotalPrice/TotalPrice";
+import './Basket.css'
+const Basket = props => {
+    return (
+        <div className='Basket'>
+        <BasketItem/>
+        <TotalPrice/>
+        </div>
+    );
+};
+
+export default Basket;
\ No newline at end of file

src/components/Basket/BasketItem/BaskeItem.js

+import React from "react";
+import './BasketItem.css'
+
+const BasketItem = props => {
+  return (
+        <div className='BasketItem'>
+          <h3> testik </h3>
+          <span> 232 KZT </span>
+          <span>x22</span> </div>
+  );
+};
+
+export default BasketItem;
\ No newline at end of file

src/components/Basket/BasketItem/BasketItem.css

+.BasketItem {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    align-items: center;
+
+}
\ No newline at end of file

src/components/Basket/TotalPrice/TotalPrice.css

+.TotalPrice{
+    border-top: 1px solid black;
+    padding-top: 10px;
+}
\ No newline at end of file

src/components/Basket/TotalPrice/TotalPrice.js

+import React from "react";
+import './TotalPrice.css'
+const TotalPrice = props => {
+  return (
+    <div className='TotalPrice'>
+    4234234 KZT</div>
+  );
+};
+
+export default TotalPrice;
\ No newline at end of file

src/components/Menu/Menu.css

+.Menu {
+    width: 70%;
+    border: 3px solid silver;
+    border-radius: 0 10px 10px 0;
+    padding: 10px;
+
+}
\ No newline at end of file

src/components/Menu/Menu.js

+import React from "react";
+import MenuItem from "./MenuItem/MenuItem";
+import './Menu.css'
+
+const Menu = props => {
+  return (
+      <div  className='Menu'>
+      <MenuItem/>
+      </div>
+  );
+};
+
+export default Menu;
\ No newline at end of file

src/components/Menu/MenuItem/MenuItem.css

+.MenuItem {
+    margin: 10px;
+    background: #ccc;
+    height: auto;
+    width: 35%;
+    border: 3px solid #eee;
+    padding: 20px 0 ;
+    padding-left: 70px;
+}
\ No newline at end of file

src/components/Menu/MenuItem/MenuItem.js

+import React from "react";
+import './MenuItem.css'
+const MenuItem = props => {
+  return (
+    <div  className='MenuItem'>
+        <h3 className='MenuItem_name'>testik</h3>
+        <span className='MenuItem_price'>Price: 1321312</span>
+    </div>
+  );
+};
+
+export default MenuItem;
\ No newline at end of file

src/App.css → src/containers/App.css

+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+
+
 .App {
   text-align: center;
+  max-width: 1200px;
+  margin: 20px auto;
+  display: flex;
+
 }
 
 .App-logo {

src/containers/App.js

+import React, {Component} from 'react';
+import './App.css';
+import Basket from "../components/Basket/Basket";
+import Menu from "../components/Menu/Menu";
+
+class App extends Component {
+
+
+    render() {
+
+        return (
+            <div className='App'>
+                <Basket/>
+                <Menu/>
+            </div>
+        )
+    }
+}
+
+export default App;
+

src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './containers/App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(