project react 01 refresh

react/01/src/App.css

@@ -1,512 +1,38 @@
-body {
-  margin: 0;
-  font-family: 'Roboto';
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('Roboto-Regular.ttf');
-}
-
-/*Всегда пишем:*/
-html {
-  box-sizing: border-box;
-}
-
-/*Всегда пишем:*/
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-.container-top {
-  max-width: 1330px;
-  /*компенсация паддингов по 15рх*/
-  padding: 0 15px;
-  margin: 0 auto;
-}
-
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  text-decoration: none;
-}
-
-.header-top {
-  background-color: lightgray;
-  padding: 20px 0;
-  position: relative;
-}
-
-.header-wrap-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.nav {
-  flex: auto;
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.burger {
-  opacity: 0;
-  position: absolute;
-  left: -9999999px;
-}
-
-.opener {
-  position: relative;
-  height: 15px;
-  width: 20px;
-  cursor: pointer;
-}
-
-@media (min-width: 768px) {
-  .opener {
-      display: none;
-  }
-}
-
-.opener::before,
-.opener::after,
-.opener span {
-  FONT-WEIGHT: 200;
-  position: absolute;
-  height: 3px;
-  background: #000;
-  left: 0;
-  right: 0;
-}
-
-.opener::before,
-.opener::after {
-  content: '';
-}
-
-.opener::before {
-  top: 0;
-}
-
-.opener::after {
-  bottom: 0;
-}
-
-.opener span {
-  top: 16px;
-}
-
-.nav-list {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  left: 0;
-  background: lightgray;
+.App {
   text-align: center;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.burger:checked~.nav-list {
-  transition: opacity .3s ease-in-out;
-  opacity: 1;
-  visibility: visible;
 }
 
-.nav-item {
-  margin-bottom: 15px;
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
 }
 
-@media (min-width: 768px) {
-  .nav-list {
-      position: static;
-      display: flex;
-      align-items: center;
-      opacity: 1;
-      visibility: visible;
-  }
-
-  .nav-item {
-      margin-bottom: 0;
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
   }
-
-  .nav-item+.nav-item {
-      padding-left: 15px;
-  }
-}
-
-.nav-link {
-  color: #000;
-}
-
-.nav-link:hover {
-  opacity: .7;
 }
 
-.banner {
-  background-color: lightgray;
-  margin: auto;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-  padding-bottom: 50px;
-}
-
-.banner-img {
-  width: 230px;
-  padding-top: 20px;
-}
-
-.banner-text {
-  width: 600px;
-  padding-left: 100px;
-}
-
-.banner-btn {
-  width: 170px;
-  height: 40px;
-  background-color: #34547A;
-  color: white;
- 
-}
-
-.about {
-  display: block;
-  max-width: 470px;
-  text-align: center;
-  margin: auto;
-  padding-top: 50px;
-  padding-bottom: 50px;
-
-}
-
-.projects {
-  background-color: #34547A;
-  color: white;
-  height: 300px;
-  padding: 100px;
-
-
-}
-
-.projects-list {
-  display: flex;
-  justify-content: space-around;
-  width: 80%;
-  margin: auto;
-  flex-wrap: wrap;
-
-}
-
-.project-data {
-  display: flex;
-
-}
-
-.project-img {
-  padding: 20px;
-  background-color: transparent;
-}
-
-
-
-/*Всегда пишем:*/
-.wrapper {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
+.App-header {
+  background-color: #282c34;
   min-height: 100vh;
-  /*задавливание футера вниз*/
   display: flex;
-  /*задавливание футера вниз*/
   flex-direction: column;
-  /*задавливание футера вниз*/
-  padding-top: 50px;
-  padding-bottom: 50px;
-}
-
-/*Всегда пишем:*/
-.container {
-  max-width: 1330px;
-  /*компенсация паддингов по 15рх*/
-  padding: 0 15px;
-  margin: 0 auto;
-}
-
-/*Всегда пишем:*/
-img {
-  max-width: 100%;
-  height: auto;
-  vertical-align: top;
-}
-
-/*Всегда пишем:*/
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  text-decoration: none;
-}
-
-.section-skills {
-  padding: 100px 0 70px;
-}
-
-.section-skills .row {
-  display: flex;
   align-items: center;
-  margin: 0 -15px;
-}
-
-.section-skills .col {
-  width: 50%;
-  padding: 0 15px;
-}
-
-.skill-holder .section-title {
-  margin: 0 0 50px;
-  font-size: 32px;
-  line-height: 1.15;
-}
-
-.skill-list {
-  max-width: 445px;
-  width: 100%;
-}
-
-.skill-item {
-  margin-bottom: 30px;
-}
-
-.skill-item:last-child {
-  margin-bottom: 0;
-}
-
-.skill-title {
-  font-size: 16px;
-  line-height: 1.6;
-  display: inline-block;
-  margin-bottom: 20px;
-  color: #727272;
-}
-
-.skill-loader {
-  position: relative;
-  height: 4px;
-  background: #c4c4c4;
-}
-
-.skill-load {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  background: #34547A;
-}
-
-.col-img {
-  background-position: center;
-  background-size: cover;
-  padding-top: 81%;
-}
-
-.my-work {
-  margin: auto;
-  position: relative;
-  background-color: lightgrey;
-  padding-top: 50px;
-  padding-bottom: 50px;
-}
-
-.my-work-text {
-  margin: auto;
-  text-align: center;
-  max-width: 40%;
-  font-size: 32px;
-}
-
-.my-work-video {
-  position: relative;
-  display: flex;
-  flex-wrap: nowrap;
-  width: 70%;
-  margin: auto;
-
-}
-
-.video-main {
-  position: relative;
-  display: flex;
-  padding-bottom: 100px;
-  margin: auto;
-  max-width:  800px;
-  ;
-}
-
-.button-play {
-  position: absolute;
-  left: 50%;
-  top: 38%;
-  padding-bottom: 700px;
-  margin-bottom: 700px;
-}
-
-.section-gallery {
-  position: relative;
-  /*max-width: 1330px;*/
-  margin: auto;
-  background-color: #727272;
-
-}
-
-.gallery-list {
-  display: flex;
-  flex-wrap: wrap;
-
-}
-
-.gallery-item {
-  display: block;
-  height: 100px;
-  width: 25%;
-  padding-top: 25%;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  position: relative;
-}
-
-.gallery-item:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: rgba(52, 84, 122, 0.8);
-
-}
-
-.gallery-item:after {
-  content: '';
-  height: 58px;
-  width: 100px;
-  background: url('img/eye.png');
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.gallery-item:before,
-.gallery-item:after {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.gallery-item:hover:before,
-.gallery-item:hover:after {
-  transition: opacity .3s ease-in-out;
-  opacity: 1;
-  visibility: visible;
-}
-
-.clients {
-  position: relative;
-  display: flex;
-  flex-wrap: nowrap;
-  max-width: 1330px;
-  height: 40%;
-  margin: auto;
-
-}
-
-.client-logo {
-
-  max-width: 15%;
-  justify-content: space-around;
-  flex-direction: row;
-  align-self: center;
-  margin: auto;
-}
-
-.client-form {
-  background-color: rgb(211, 211, 211);
-}
-
-.form-wrapper {
-  display: block;
   justify-content: center;
-  width: 500px;
-  margin: auto;
-  text-align: center;
-
-}
-
-.form-name1 {
-  margin-left: 0px;
-  margin-right: 25px;
-  padding: 14px;
-
-}
-
-.form-name2 {
-  margin-left: 15spx;
-  margin-right: 0px;
-  padding: 14px;
-
-}
-
-.form-message {
-  margin-top: 18px;
-}
-
-.button-form {
-  margin-top: 18px;
-  width: 170px;
-  height: 40px;
-  background-color: #34547A;
+  font-size: calc(10px + 2vmin);
   color: white;
-  margin-bottom: 70px;
 }
 
-.footer {
-  background-color: #34547A;
-  min-height: 150px;
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-
+.App-link {
+  color: #61dafb;
 }
 
-.sign {
-  margin-left: 10%;
-  margin-top: 35px;
-  color: white;
-}
-
-.vk {
-  margin-right: 20%;
-  margin-top: 60px;
-
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
-
-.vk-i {
-  padding: 0 13px 0 13px;
-}

react/01/src/App.js

@@ -1,211 +1,108 @@
-/* проба отправить с уведомлением*/
-
 import logo from './logo.svg';
+import {useState} from 'react';
 import './App.css';
-const ProjectInfo=()=>
-<li className="project-item">
-<div className="project-data">
-  <div><img className="project-img" src="img/proj.png" alt="img" /></div>
-  <div className="project-txt">
-    <p>40+</p>
-    <p>проектов</p>
-  </div>
-</div>
-</li>
-const Projects = () =>
-<div className="projects">
-  <ul className="projects-list">
-    <ProjectInfo />
-    <ProjectInfo />
-    <ProjectInfo />
-    <ProjectInfo />
-    <ProjectInfo />
-    <ProjectInfo />
-  </ul>
+
+const Logo = () => {
+    return <>
+        <span style={{color: Math.random() > 0.5 ? 'red' : 'green'}}>TEXT</span>
+        <img src={logo} alt="logo" className="App-logo"/>
+    </>
+}
+
+const NavItem = ({text, url}) =>
+    <li><a href={url}>{text.toUpperCase() + Math.random()}</a></li>
+
+const Nav = () =>
+<ul>   
+    <NavItem url="/" text="Главная"/>
+    <NavItem url="/aboutus" text="О нас" />
+    <NavItem url="/contacts" text="Контакты" />
+</ul>
+
+const GoodCard = ({title='NoName', 
+                    url='#', 
+                    img='https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
+                    children}) => //title, url - объявление переменных. После `=` - значение по умолчанию
+<div className='GoodCard'>
+    <h2>{title}</h2> 
+    <a href={url}>
+        <img src={img} />
+    </a> 
+    <p>
+        {children}
+    </p>
 </div>
-const NavItem = ({text1}) => 
-<li className="nav-item">
-<a href="#" className="nav-link">{text1}</a>
-</li>
 
-function App() {
-  return (
-    <div>
-      <header className="header-topx">
-        <div className="container-top">
-          <div className="header-wrap-top">
-            <a href="#" className="logo-top">
-              <img src="img/wd.png" alt="logo" />
-            </a>
-            <nav className="nav">
-              <label className="opener" htmlFor="burger">
-                <span></span>
-              </label>
-              <input className="burger" type="checkbox" name="" id="burger" title="#" />
-              <ul className="nav-list">
-                <NavItem text1="ГЛАВНАЯ" />
-                <NavItem text1="ОБ АВТОРЕ" />
-                <NavItem text1="РАБОТЫ" />
-                <NavItem text1="ПРОЦЕСС" />
-                <NavItem text1="КОНТАКТЫ" />
-              </ul>
-            </nav>
-          </div>
-        </div>
-        <div className="banner">
-          <div className="banner-img">
-            <img src="img/frame.png" alt="img" />
-          </div>
-          <div className="banner-text">
-            <h2>Дизайн и верстка</h2>
-            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
-              Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI
-              века.</p>
-            <div><button className="banner-btn">НАПИСАТЬ МНЕ</button> </div>
-          </div>
-        </div>
-      </header>
-      <div className="about">
-        <h2>Обо мне</h2>
-        <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
-          Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI
-          века.</p>
-      </div>
-      <Projects />
-      <div className="wrapper">
+const Header = () =>
+<header className="App-header">
+    <Logo /> 
+    <Nav></Nav>
+</header>
+
+const Content = () =>
+<>
+    <GoodCard title='Пиво' 
+              url="https://ru.wikipedia.org/wiki/%D0%9F%D0%B8%D0%B2%D0%BE" 
+              img="https://m.dom-eda.com/uploads/images/catalog/item/cbb4387631/07042d6ed6_1000.jpg">
+        пей пиво <strong>пенное</strong> и все такое
+    </GoodCard>
 
-        <header className="header">
-          <div className="container">
-            <div className="header-wrap">
-            </div>
-          </div>
-        </header>
-        <main className="main">
-          <section className="section-skills">
-            <div className="container">
-              <div className="row">
-                <div className="col">
-                  <div className="skill-holder">
-                    <header className="section-header">
-                      <h1 className="section-title">Мои
-                        навыки</h1>
-                    </header>
-                    <div className="skill-list">
-                      <div className="skill-item">
-                        <span className="skill-title">Adobe
-                          Photoshop</span>
-                        <div className="skill-loader">
-                          <div className="skill-load"
-                            style={{width: "80%" }}>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="skill-item">
-                        <span className="skill-title">Adobe
-                          Photoshop</span>
-                        <div className="skill-loader">
-                          <div className="skill-load"
-                            style={{width: "90%"}}>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="skill-item">
-                        <span className="skill-title">Adobe
-                          Photoshop</span>
-                        <div className="skill-loader">
-                          <div className="skill-load"
-                            style={{width: "60%"}}>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="col">
-                  <div className="col-img"
-                    style={{ backgroundImage: "url(img/img.png)" }}>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </section>
-          <section className="my-work">
-            <div className="my-work-text">
-              <h2>Как я работаю</h2>
-              <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и
-                вэб-дизайне.
-                Lorem Ipsum является стандартной "рыбой" для текстов на
-                латинице с
-                начала XVI века.</p>
-            </div>
-            <div className="my-work-video">
-              <img className="video-main" src="img/video.png" alt="my-work-video" />
-              <img src="img\button.png" alt="play button" className="button-play" />
-            </div>
-          </section>
-          <section className="section-gallery">
-            <div className="gallery-list">
-              <a href="#" className="gallery-item"
-                style={{backgroundImage: "url(img/pic1.png)"}} alt="img"></a>
-              <a href="#" className="gallery-item"
-                style={{backgroundImage: "url(img/pic2.png)"}} alt="img"></a>
-              <a href="#" className="gallery-item"
-                style={{backgroundImage: "url(img/pic1.png)"}} alt="img"></a>
-              <a href="#" className="gallery-item"
-                style={{backgroundImage: "url(img/pic2.png)"}} alt="img"></a>
-              <a href="#" className="gallery-item"
-                style={{backgroundImage: "url(img/pic2.png)"}} alt="img"></a>
-              <a href="#" className="gallery-item"
-                style={{backgroundImage: "url(img/pic1.png)"}} alt="img"></a>
-              <a href="#" className="gallery-item"
-                style={{backgroundImage: "url(img/pic2.png)"}} alt="img"></a>
-              <a href="#" className="gallery-item"
-                style={{backgroundImage: "url(img/pic1.png)"}} alt="img"></a>
-            </div>
-          </section>
-          <section className="clients">
-            <img className="client-logo" src="img\microsoft.png" alt="logo client" />
-            <img className="client-logo" src="img\microsoft.png" alt="logo client" />
-            <img className="client-logo" src="img\microsoft.png" alt="logo client" />
-            <img className="client-logo" src="img\microsoft.png" alt="logo client" />
-          </section>
-          <section className="client-form">
-            <div className="form-wrapper">
-              <h2 style={{paddingTop:"50px"}}>Хотите веб-сайт?</h2>
-              <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и
-                вэб-дизайне.
-                Lorem Ipsum является стандартной "рыбой" для текстов на латинице
-                с начала XVI
-                века.</p>
-              <div className="form table">
-                <div className="form-name">
-                  <input className="form-name1" placeholder="Ваше имя" size="25" />
-                  <input className="form-name2" placeholder="Ваш e-mail" size="25" />
-                  <textarea className="form-message" placeholder="Сообщение" rows="8"
-                    cols="62"></textarea>
-                  <button className="button-form">ОТПРАВИТЬ</button>
+    <GoodCard title="ЕстьName" children="задаю children как атрибут"/>
+    <GoodCard title="ЕстьName">
+        задаю children как атрибут
+    </GoodCard>
+</>
 
+const Counter = () => {
+    const [counter, setCounter] = useState(1)
+    console.log('ПЕРЕЗАПУСК КОМПОНЕНТА', counter)
+    return (
+        <button style={{fontSize: `${counter/10}em`}}
+            onClick={() => setCounter(counter +1)}>{counter}</button>
+    )
+}
 
-                </div>
-              </div>
+const Input = () => {
+    const [text, setText] = useState('')
+    console.log('ИНПУТ ПЕРЕЗАПУСТИЛСЯ', text)
+    return (
+        <div>
+            <input value={text} 
+                       onChange={e => setText(e.target.value)}
+                       type="text"/>
+            <ShowFun text={text} onReset={() => setText('')}/>
+        </div>
+   )
+}
 
-            </div>
-          </section>
-        </main>
-        <footer className="footer">
-          <div className="sign">
-            <h3>Иванов Иван</h3>
-            <p>&#40;с&#41; 2018.Все права защищены.</p>
-          </div>
-          <div className="vk">
-            <img src="img/VK.png" alt="img" />
-            <img className="vk-i" src="img/VK.png" alt="img" />
-            <img src="img/VK.png" alt="img" />
-          </div>
+const ShowFun = ({text, onReset}) =>
+    <div style={{color: text.length > 10 ? 'red': 'green'}}
+        onClick={onReset}>
+        {text}
+    </div>
 
+const LoginForm = ({onLogin}) => {
+    //придумать пару стейтов для двух инпутов
+    //сделать так, что бы кнопка была disabled когда login или пароль
+    //слишком короткие
+    //запустить onLogin по клику
+    return (
+        <div>
+            <input placeholder='Login'/>
+            <input placeholder='Password'/>
+            <button>Login...</button>
+        </div>
+    )
+}
 
-        </footer>
-      </div>
+function App() {
+  return (
+    <div className="App">
+        <LoginForm onLogin={({login, password}) => console.log('ЛОГИН И ПАРОЛЬ', login, password)}/>
+        <Input/>
+        <Input/>
+        <Counter />
+        <Counter />
     </div>
   );
 }

react/___App.js

@@ -0,0 +1,110 @@
+import logo from './logo.svg';
+import {useState} from 'react';
+import './App.css';
+
+const Logo = () => {
+    return <>
+        <span style={{color: Math.random() > 0.5 ? 'red' : 'green'}}>TEXT</span>
+        <img src={logo} alt="logo" className="App-logo"/>
+    </>
+}
+
+const NavItem = ({text, url}) =>
+    <li><a href={url}>{text.toUpperCase() + Math.random()}</a></li>
+
+const Nav = () =>
+<ul>   
+    <NavItem url="/" text="Главная"/>
+    <NavItem url="/aboutus" text="О нас" />
+    <NavItem url="/contacts" text="Контакты" />
+</ul>
+
+const GoodCard = ({title='NoName', 
+                    url='#', 
+                    img='https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
+                    children}) => //title, url - объявление переменных. После `=` - значение по умолчанию
+<div className='GoodCard'>
+    <h2>{title}</h2> 
+    <a href={url}>
+        <img src={img} />
+    </a> 
+    <p>
+        {children}
+    </p>
+</div>
+
+const Header = () =>
+<header className="App-header">
+    <Logo /> 
+    <Nav></Nav>
+</header>
+
+const Content = () =>
+<>
+    <GoodCard title='Пиво' 
+              url="https://ru.wikipedia.org/wiki/%D0%9F%D0%B8%D0%B2%D0%BE" 
+              img="https://m.dom-eda.com/uploads/images/catalog/item/cbb4387631/07042d6ed6_1000.jpg">
+        пей пиво <strong>пенное</strong> и все такое
+    </GoodCard>
+
+    <GoodCard title="ЕстьName" children="задаю children как атрибут"/>
+    <GoodCard title="ЕстьName">
+        задаю children как атрибут
+    </GoodCard>
+</>
+
+const Counter = () => {
+    const [counter, setCounter] = useState(1)
+    console.log('ПЕРЕЗАПУСК КОМПОНЕНТА', counter)
+    return (
+        <button style={{fontSize: `${counter/10}em`}}
+            onClick={() => setCounter(counter +1)}>{counter}</button>
+    )
+}
+
+const Input = () => {
+    const [text, setText] = useState('')
+    console.log('ИНПУТ ПЕРЕЗАПУСТИЛСЯ', text)
+    return (
+        <div>
+            <input value={text} 
+                       onChange={e => setText(e.target.value)}
+                       type="text"/>
+            <ShowFun text={text} onReset={() => setText('')}/>
+        </div>
+   )
+}
+
+const ShowFun = ({text, onReset}) =>
+    <div style={{color: text.length > 10 ? 'red': 'green'}}
+        onClick={onReset}>
+        {text}
+    </div>
+
+const LoginForm = ({onLogin}) => {
+    //придумать пару стейтов для двух инпутов
+    //сделать так, что бы кнопка была disabled когда login или пароль
+    //слишком короткие
+    //запустить onLogin по клику
+    return (
+        <div>
+            <input placeholder='Login'/>
+            <input placeholder='Password'/>
+            <button>Login...</button>
+        </div>
+    )
+}
+
+function App() {
+  return (
+    <div className="App">
+        <LoginForm onLogin={({login, password}) => console.log('ЛОГИН И ПАРОЛЬ', login, password)}/>
+        <Input/>
+        <Input/>
+        <Counter />
+        <Counter />
+    </div>
+  );
+}
+
+export default App;