Антон Спирин

const Example = () => {
  const [order, setOrder] = useState({
    building: '',
    otherProp: '',
  });

  const handleChange = useCallback(e => {
    const { name, value } = e.target;
    setOrder(s => ({ ...s, [name]: value }));
  }, []);

  return (
    <Input
      name="building"
      onChange={handleChange}
      value={order.building}
    />
  );
};

const Example = () => {
  const dispatch = useDispatch();
  const order = useSelector(orderSelector);

  const handleChange = useCallback(e => {
    const { name, value } = e.target;
    dispatch(updateOrder({ [name]: value }));
  }, []);

  return (
    <Input
      name="building"
      onChange={handleChange}
      value={order.building}
    />
  );
};

const updater = (component, prevState) => {
  if (Object.keys(prevState).some(
    key => prevState[key] !== component.state[key],
  )) {
    component.render();
    
    if (component.componentDidUpdate) {
      component.componentDidUpdate(prevState);
    }
  }
}

const domRender = (Component) => {
  const component = new Component();
  
  component.render();
  
  if (component.componentDidMount) {
    component.componentDidMount();
  }
}

class Component {
  constructor() {
    this.updater = updater;
  }
  
  setState(newState) {
    const prevState = this.state;
    
    if (typeof newState === 'function') {
      this.state = newState(prevState);
    } else {
      this.state  = { ...prevState, ...newState };
    }
    
    this.updater(this, prevState);
  }
}

class Example extends Component {
  constructor() {
    super();
    this.state = {
      value: 'Initial value',
    }
  }
  
  componentDidMount() {
    setTimeout(() => {
      this.setState({ value: 'New value' });
    }, 2000);
  }

  componentDidUpdate(prevState) {
    console.log('Prev state: ', prevState);
    console.log('New state: ', this.state);
  }

  render() {
    const { value } = this.state;
    
    document.querySelector('.example').innerHTML = value;
  }
}


domRender(Example);

<a href="/path/file_name.xml" download>Download</a>

<a href={require('../path/file_name.xml')} download>Download</a>

<Switch>
  <Route exact path="/services" component={Services} />
  <Route exact path="/login" component={Login} />
  <Route path="/" component={Wrapper} />
</Switch>

const useFetch = (url, options) => {

  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  const fetchData = async () => {
    try {
      setIsLoading(true);
      const res = await fetch(url, options);
      const json = await res.json();
      setData(json);
      setIsLoading(false);
    } catch (error) {
      setError(error);
      setIsLoading(false);
    }
  };  

  useEffect(() => {
    fetchData();
  });

  return [
    data,
    isLoading,
    error,
    fetchData,
  ];
};

const Example = ({ slug }) => {
  const [ product, isLoading, error, fetchFn ] = useFetch(`/api/product/${slug}`);
  
  if (isLoading) return <Preloader />;

  if (error) return <Error error={error} tryAgainFn={fetchFn} />;

  if (!product) return <NotFound />;
  
  return <Product product={product} />
};

после некоторого времени обнаружил что вебпак изменяет путь
То есть
путь import video from '../../img/video/mainstream.mp4'
он видит как Video /static/media/mainstream.bbae5fec.mp4

<video src={require('../../img/video/mainstream.mp4')} />

onChange={(e) => this.limitSwitchHandler(e, row.id)}

createLimitPerDayHandler = (rowId) => (e) => { ... };

interface Props {
  someProp: string;
}

const Herberito: React.FC<Props> = ({ someProp }) => <div>{someProp}</div>;

const Header = ({ children }) => (
    <div className="navHeader">
      {children}
    </div>
  );

<Header>
  <Top />
</ Header>

const Header = ({ top }) => {
  const HeaderTop = top || Top;
  
  return (
    <div className="navHeader">
      <HeaderTop />
    </div>
  );
};

<Header /> // используем компонент по-умолчанию Top

<Header top={OtherTopCompnent} /> // используем другой компонент

const MovieList: React.FC<MovieListPropsType> = ({ ... }) => { ... };

const mapStateToProps = createStructuredSelector({ ... });

const mapDispatchToProps = { ... };

export default connect(mapStateToProps, mapDispatchToProps)(MovieList);

weather app react github,
todo app react github,
reddit app react github,
etc.

chat node github,
rest api node github,
video editor node github,
etc.