YKalashnikov

import React, { Fragment } from 'react';

 const myInput = (props) =>{
    const {input, type, placeholder, meta}=props;
    return (
        <Fragment>
        <input {...props.input} type={props.type} placeholder={props.placeholder}/>

        {meta.error &&
        meta.touched &&

YKalashnikov

export const requiredInput = (input) =>
  input ? undefined : `Требуется ввод`;

export const correctInput = input =>
  input !== 'Юрчик' ? 'Неправильное имя пользователя' : undefined;

YKalashnikov

submit = input=>{
    if(['Настя', 'Леша', 'Миша', 'Света'].includes (input.username)){
      throw new SubmissionError ({
        username : "Имя пользователя уже существует",
      });
    }else{
      window.alert (JSON.stringify(input))
    }
};

YKalashnikov

// Web scraping in Node

const rp = require('request-promise');
const cheerio = require('cheerio');
const Table = require('cli-table');


let table = new Table({
    head:['Username', '❣', 'challenges', 'Read', 'Visited','id'],
    colWidths: [15, 5, 10, 9, 9, 9]

YKalashnikov

import React, { Component } from 'react';

class Counter extends Component {
  constructor() {
    super();
    this.state = {
      count: 1
    };
  }

YKalashnikov

function CounterHooks() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  }

  return (
      <div>
        <h3 className="center">

YKalashnikov

function CounterHooks() {
  const [count, setCount] = useState(0);
  const [time, setTime] = useState(new Date())

  const handleClick = () => {
    setCount(count + 1);
    setTime(new Date())
  }

YKalashnikov

// 🐢 merge (setState) vs replace (useState)
// assume initial state is {name: "Ohans"}

setState({age: "unknown"})
// new state object will be 
// {name: "Ohans", age: "unknown"}

useState({age: "unknown"})
// new state object will be 
// {age: "unknown"} - initial object is replaced

YKalashnikov

function CounterHooks() {
  const [count, setCount] = useState(0);
  const [time, setTime] = useState(new Date())
  
  // 🐢 look here.
  useEffect(() => {
    console.log("useEffect first timer here.")
  }, [count])

YKalashnikov

// 🐢 custom hook - name starts with "use" (useMedium)
useMedium(() => {
  const URI = "https://some-path-api";
  // 🦄 custom hook can use any of the default 
  // React hooks - this is NOT compulsory.
  useEffect(() => {
    fetch(URI)
  },[])
})