Задать вопрос
nDiviD

Николай Домбровский

Делать проекты, которыми можно гордиться
Ответы пользователя по тегу JavaScript

  • Как пофиксить 100vh в safari ios?

    nDiviD
    @nDiviD
    Делать проекты, которыми можно гордиться 
    @supports (-webkit-touch-callout: none) {
  .h-screen {
    height: -webkit-fill-available;
  }
}
    Ответ написан
    Комментировать
    Комментировать

  • Как проверить совпадение в конце строки?

    nDiviD
    @nDiviD
    Делать проекты, которыми можно гордиться
    Элементарный ответ: /(car)$/ -для случая, когда после слова вообще ничего нет - символов, пробелов, переноса строк.
    С переносом строки, но без табов, пробела: /(car)(?=$|\n)/
    Мб я что-то не так понял из задачи.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать оформление главного экрана наподобие того, что дали?

    nDiviD
    @nDiviD
    Делать проекты, которыми можно гордиться
    Можно на чистом css сделать:
    бокс, внутри 4 бокса повернутые через transform, с overflow: hidden;
    Анимация, где контент выезжает на том же transform: translate.
    Ну а дальше играем с размерами и позиционированием.
    Не забываем про transition.
    Ответ написан
    Комментировать
    Комментировать

  • Разумно ли делать блог на React?

    nDiviD
    @nDiviD
    Делать проекты, которыми можно гордиться
    Да ничего сложного нет.
    Я использую связку react+redux.
    Store "Articles" -> REST экшены: запрос на список постов, запрос поста (если надо то на создание/обновление/удаление). У каждого события есть request/success/failure состояние. Просто создаем по 3 константы на каждое событие: 
    const prefix = '@@ARTICLE/';

export const REQUEST = `${prefix}REQUEST`;
export const RECEIVE_SUCCESS = `${prefix}RECEIVE_SUCCESS`;
export const RECEIVE_FAILURE = `${prefix}RECEIVE_FAILURE`;

    такого плана.

    Умные компоненты - "контейнеры". Создаем для работы с данными, для списка, например.
    Глупые - "компоненты". Для отображения отображения, например непосредственно верстки списка.
    Ну и все, при клике по посту -> dispatch(LoadPost(postId)), где:
    import { REQUEST, ... и другие нужные константы } from '../constants';
const LoadPost = postId => (dispatch) => {
 dispatch({ type: REQUEST, id: postId });
 fetch(куда нам надо)
   .then(r => r.json())
   .then((request) => {
      // обработка успеха
   })
   .catch((ex) => {
     // обработка ошибки
   })
}


    Ну, а анимация легкая: transition на translate и opacity.

    Успехов!
    Ответ написан
    Комментировать
    Комментировать

  • Как реализовать динамический import для code splitting в Webpack 2?

    nDiviD
    @nDiviD Автор вопроса
    Делать проекты, которыми можно гордиться
    Нашел я решение, опубликовал ответ на подобный вопрос, напишу и сюда. Все довольно просто, если знать нюансы:
    1) Нужно понимать, что то что мы хотим загрузить должно быть в отдельном файле - чанке.
    2) Для того что бы создался чанк необходимо все импорты этого компонента грузить "лениво". Это очень важно, в свое время именно это мешало мне разбить существующий проект на чанки.
    3) Ну и самое простое: грузим через промис import: 
    const loadEditor = () => import(/* webpackChunkName: "my-best-editor-chunk" */ 'react-dart-editor');
  loadEditor().then(m => use it);

    4) Конфиг webpack:
    new webpack.optimize.CommonsChunkPlugin({
  children: true,
  async: true,
  minChunks: 2,
}),
new webpack.optimize.CommonsChunkPlugin('manifest'),


    Так же можно импортировать и функции.

    Я использую такой компонент:
    Chunk.jsx
    import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Chunk extends Component {
  state = { LoadedComponent: null };

  componentWillMount() {
    if (this.props.preload) this.load(this.props);
  }

  componentWillReceiveProps(nextProps) {
    const { load, component, show } = nextProps;
    if (
      this.props.load !== load ||
      this.props.component !== component ||
      (this.props.show !== show && show)
    ) {
      this.load(nextProps);
    }
  }

  load(props) {
    this.setState({ LoadedComponent: null });
    props.load().then((mod) => {
      this.setState({
        LoadedComponent: props.component ? mod[props.component] : mod.default,
      });
    });
  }

  renderLoading = () => this.props.showLoading ? (<div>Loading</div>) : null;

  render() {
    const { LoadedComponent } = this.state;
    const  { show, ...props } = this.props;
    delete props.load;
    delete props.component;
    if (!show) return null;
    return LoadedComponent ? <LoadedComponent {...props} /> : this.renderLoading();
  }
}

Chunk.defaultProps = {
  showLoading: false,
  preload    : true,
  show       : true,
};

Chunk.propTypes = {
  load       : PropTypes.func.isRequired,
  show       : PropTypes.bool,
  preload    : PropTypes.bool,
  component  : PropTypes.string,
  showLoading: PropTypes.bool,
};

export default Chunk;



    Использовать так:
    <Chunk
  load={loadEditor} // была уже выше
  component="EditorAside" // если нужно что-то, что импортируется не по дефоулту
  show={true/false} // отображать ли компотнент
  preload={true/false} // осуществлять ли предзагрузку чанка
  props1="1"
  props2="2"
/>
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать ленивую загрузку компонент на React, React Router 4, Webpack 3?

    nDiviD
    @nDiviD
    Делать проекты, которыми можно гордиться
    И так, с Webpack 3 все довольно просто, если знать нюансы:
    1) Нужно понимать, что то что мы хотим загрузить должно быть в отдельном файле - чанке.
    2) Для того что бы создался чанк необходимо все импорты этого компонента грузить "лениво". Это очень важно, в свое время именно это мешало мне разбить существующий проект на чанки.
    3) Ну и самое простое: грузим через промис import: 
    const loadEditor = () => import(/* webpackChunkName: "my-best-editor-chunk" */ 'react-dart-editor');
  loadEditor().then(m => use it);

    4) Конфиг webpack:
    new webpack.optimize.CommonsChunkPlugin({
  children: true,
  async: true,
  minChunks: 2,
}),
new webpack.optimize.CommonsChunkPlugin('manifest'),


    Так же можно импортировать и функции.

    Я использую такой компонент:
    Chunk.jsx
    import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Chunk extends Component {
  state = { LoadedComponent: null };

  componentWillMount() {
    if (this.props.preload) this.load(this.props);
  }

  componentWillReceiveProps(nextProps) {
    const { load, component, show } = nextProps;
    if (
      this.props.load !== load ||
      this.props.component !== component ||
      (this.props.show !== show && show)
    ) {
      this.load(nextProps);
    }
  }

  load(props) {
    this.setState({ LoadedComponent: null });
    props.load().then((mod) => {
      this.setState({
        LoadedComponent: props.component ? mod[props.component] : mod.default,
      });
    });
  }

  renderLoading = () => this.props.showLoading ? (<div>Loading</div>) : null;

  render() {
    const { LoadedComponent } = this.state;
    const  { show, ...props } = this.props;
    delete props.load;
    delete props.component;
    if (!show) return null;
    return LoadedComponent ? <LoadedComponent {...props} /> : this.renderLoading();
  }
}

Chunk.defaultProps = {
  showLoading: false,
  preload    : true,
  show       : true,
};

Chunk.propTypes = {
  load       : PropTypes.func.isRequired,
  show       : PropTypes.bool,
  preload    : PropTypes.bool,
  component  : PropTypes.string,
  showLoading: PropTypes.bool,
};

export default Chunk;



    Использовать так:
    <Chunk
  load={loadEditor} // была уже выше
  component="EditorAside" // если нужно что-то, что импортируется не по дефоулту
  show={true/false} // отображать ли компотнент
  preload={true/false} // осуществлять ли предзагрузку чанка
  props1="1"
  props2="2"
/>


    P.S. Об использовании компонентов в роутере написано хорошо в туториале =)
    Ответ написан
    6 комментариев
    6 комментариев