Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос
vahe_2000

Ваге

  • 47
    вклад
  • 13
    вопросов
  • 100
    ответов
  • 29%
    решений
Ответы
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Как правильно поступать с обработчиками событий для сообщения между компонентами?

    vahe_2000
    Ваге @vahe_2000
    есть два варианта
    <div className="post-item__buttons buttons-block">
      <button
        className="buttons-block__change"
        onClick={this.props.onClickmodify}
        data-id={this.props.dataID}
      >
        ..
      </button>
      <button
        className="buttons-block__delete"
        onClick={this.props.onClickdelete}
        data-id={this.props.dataID}
      >
        x
      </button>
    </div>;

    второй пример

    ...
    modifyItem(e) {
            let target = e.target;
            let targetID = target.getAttribute('data-id');
            console.log(targetID, 'target id');
            this.props.modifyItemCallback(targetID);
        }
        deleteItem(e) {
            let target = e.target;
            let targetID = target.getAttribute('data-id');
            fetch(`https://my-json-server.typicode.com/sergemin/render-list/posts/${targetID}`, {
                method: 'DELETE'
            })
                .then(() => {
                    console.log(targetID);
                    this.props.deleteItemCallback(targetID)
                })
                .catch(error => console.log(error));
        }
    ...


    <Post
      key={item.id}
      dataID={item.id}
      title={item.title}
      content={item.body}
      modifyItemCallback={(id) => console.log(id)}
      deleteItemCallback={(id) => console.log(id)}
    />;
    Ответ написан более трёх лет назад
    4 комментария
    4 комментария
  • Загрузка файлов в Node.js?

    vahe_2000
    Ваге @vahe_2000
    используйте node-formidable
    server.post("/uploads", (req, res) => {
      new formidable.IncomingForm()
        .parse(req)
        .on("file", function(name, file) {
          console.log("Got file:", name);
        })
        .on("field", function(name, field) {
          console.log("Got a field:", name);
        })
        .on("error", function(err) {
          next(err);
        })
        .on("end", function() {
          res.end();
        });
    });
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Gulp, Npm, Yarn, Webpack - Чем пользоваться в 2017-2018 году?

    vahe_2000
    Ваге @vahe_2000
    npm5 обновился но yarn все еще немного быстрее https://youtu.be/Pq05bTlTDPM
    сейчас все используют webpack это факт
    есть люди которые используют gulp для css и для оптимизация проекта
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Нужен ли вообще этот server side rendering?

    vahe_2000
    Ваге @vahe_2000
    Андрей Хохлов очень правильно ответил, но я свою очередь хочу вам порекомендовать читать эту статью The Performance Cost of Server Side Rendered React...
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как осуществить офлайн установку модуля npm?

    vahe_2000
    Ваге @vahe_2000
    Сначала вам нужно настроить папку, чтобы он был вашим хранилищем для "Offline mirror"

    прочитайте эту статью https://yarnpkg.com/blog/2016/11/24/offline-mirror/.

    но сначала вам нужно установить yarn
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как получить headers в fetch?

    vahe_2000
    Ваге @vahe_2000
    jsfiddle

    fetch("https://jsonplaceholder.typicode.com/albums")
      .then(response => {
        console.log(response.headers.get("Content-Type")); // application/json; charset=utf-8
        console.log(response.status); // 200
    
        return response.json();
      })
      .then(res => {
        console.log(res); // iliakan
      })
      .catch(console.log);
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Webpack + React + Babel. Поддержка новых фич в браузерах?

    vahe_2000
    Ваге @vahe_2000
    вам нужно core-js

    import 'core-js/es6/map';
    import 'core-js/es6/set';
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как в React использовать переменные, полученные из Node.js?

    vahe_2000
    Ваге @vahe_2000
    https://www.npmjs.com/package/babel-plugin-transfo...
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Зачем использовать server-side rendering? Какие преимущества у рендеринга на сервере?

    vahe_2000
    Ваге @vahe_2000

    кстати очень хороший вопрос


    Использовать SSR, если...
    Тебе нужно с Bing, Yahoo или Baidu,Google.
    У вас уже есть работающее приложение, требующее максимальной производительности, и оно готово заплатить за дополнительные ресурсы сервера.

    Не используйте SSR, если...

    Ресурсы сервера ограничены, возможно, из-за низкого бюджета или невозможности масштабирования.

    SSR это очень круто но в некоторых случаях это имеет недостатки.

    1. Рендеринг стороне сервера помогает seo, но иногда Google может найти ваше содержание без SSR.
    2. SSR обычно повышает производительность вашего приложения, но не всегда.
    3. Это повысит сложность приложении, что означает меньше времени работы с другими функциями и улучшениями.
    SSR улучшает производительность

    После того как браузер загрузит HTML-и CSS, он может отображать визуализированные компоненты пользователю, не дожидаясь загрузки JavaScript или реакции на визуализацию.

    Если файл JavaScript очень велик, это может быть большим улучшением.

    Веб-страница не будет интерактивной до тех пор, пока не будут загружаться и реагировать на сценарии загрузки JavaScript, но предполагаемая производительность по-прежнему улучшается, поскольку пользователь видит содержимое быстрее.

    SSR снижает производительность

    SSR является больше работы для вашего сервера, так что ваш ответ HTTP займет немного больше времени, чтобы вернуться. Гораздо дольше, если ваши серверы находятся под большой нагрузкой.

    Размер вашего HTML будет увеличена и займет больше времени для загрузки. Для большинства приложений этого должно быть незначительным, но может стать фактором, если ваш REACT компоненты содержат длинные списки или таблицы.

    Другие факторы производительности

    Когда один пользователь загружает несколько страниц на вашем сайте или возвращает часто, ваш JavaScript-файл должен быть кэширован. SSR обеспечит менее прирост производительности в этой ситуации.

    Мы не можем сказать, производительность лучше с SSR или производительность хуже с SSR. В целом ни заявление будет верно сказать что ssr это хорошо


    используйте zeit/now с zeit/next.js
    наверно слышали или пробовали
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как вывести каждые 3 элемента в свой див?

    vahe_2000
    Ваге @vahe_2000
    проще этого я не знаю.https://jsfiddle.net/vaheqelyan/fsc6qweh/
    class App extends React.Component {
      state = { arr: ["hello", "world", "wow", "react"] };
      render() {
        return (
          <section>
            {this.state.arr.map(v => (
              <div className="row">
                <div>element</div>
                <div>element</div>
                <div>element</div>
              </div>
            ))}
          </section>
        );
      }
    }
    
    ReactDOM.render(<App />, document.body);

    3897af90e101447299ec7070e16ee87c.png
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как работать с confirm в react?

    vahe_2000
    Ваге @vahe_2000
    взгляните сюда fiddle.вроде бы все нормально работает
    deleteItem(event) {
        const conf = confirm(`Are you sure?`);
        let number = parseFloat(event.target.parentNode.getAttribute("data-key"));
        let newTodos = this.state.todos;
        if (conf) {
          newTodos = newTodos.splice(newTodos.indexOf(number), 1);
          this.setState({ todos: newTodos });
        } else {
          alert(`ok we won't delete it `);
        }
      }


    а почему бы не падать index прямо из .map().было бы намного правильнее чем искать в атрибутах

    React не рекомендуем вам хранить данные в DOM атрибутов. Даже если у вас есть, атрибуты данных, вероятно, являются более оптимальным подходом, но в большинстве случаев данные должны храниться в состояние компонента реагировать или внешние хранилища.

    Ответ написан более трёх лет назад
    5 комментариев
    5 комментариев
  • Можно ли скачать видео с помощью nodejs?

    vahe_2000
    Ваге @vahe_2000
    var fs = require("fs"),
        request = require("request");
    
    const download = (uri, filename, callback) => {
        request.head(uri, (err, res, body) => {
            request(uri)
                .pipe(fs.createWriteStream(filename))
                .on("close", callback);
        });
    };
    
    download(
        "http://fs.moviestape.net/video/1c4ed0ac8b7d5b4de6c5d58e2ea31a63/serials/Narcos/s01/Narcos.S01E01.mp4",
        "./downloads/filename.mp4",
        () => {
            console.log("done");
        }
    );
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Готова ли связка Next.js + Redux на TypeScript для production?

    vahe_2000
    Ваге @vahe_2000
    я сам работал с next.js и должен сказать что next.js это самый лучший решения для SPA, а по поводу ограничения я не согласен, с конфигурацией webpack все нормально с babel,ts все нормально с custom-server все работает.ну вы сможете смотреть в examples

    production +

    я думаю вам просто надо еще раз хорошо прочитать документацию
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как работает document.addEventListener?

    vahe_2000
    Ваге @vahe_2000
    я переписал ваш код .это то что вам нужно? https://jsfiddle.net/vaheqelyan/L87txz2p/
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как улучшить код?

    vahe_2000
    Ваге @vahe_2000
    я не понимаю что вы делаете наверное работайте на redux или flux.вы можете использовать try/catch и await вместо then.может что то вроде этого .что поделать с let record.вы даже не использовали.из чего вы взяли item

    .then((response) => {
                item = response;
                success = true;
              })


    async createItem() {
        this.isLoading = true;
    
        try {
          let res = await this.$fetch(`/api/items/${this.params.id}/new/`, {
            method: "POST",
            body: JSON.stringify(this.createItemBody)
          });
          let json = await res.json();
    
          await this.dispatch("fetchSecondItem", id);
          this.items.push(json);
          this.dispatch("notification", {
            type: "success",
            message: "Item was created."
          });
          this.isLoading = true;
          this.resetForm();
        } catch (err) {
          this.isLoading = false;
          console.log(err);
        }
      }
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Linux или Windows для работы с Node.js?

    vahe_2000
    Ваге @vahe_2000
    https://stackoverflow.com/questions/12581416/node-...
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Почему не срабатывает child_process?

    vahe_2000
    Ваге @vahe_2000
    var cp = require("child_process").exec;
    
    cp("pwd", function(error, stdout, stderr) {
        if (error !== null) console.error(error);
        console.log(`pwd => ${stdout}`);
    });

    d6c32722b0cc4247be19860f184bdbb0.png
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как число тип 4.1e-7 привести к 0.00000041?

    vahe_2000
    Ваге @vahe_2000
    var n = 4.7e-6;
    console.log(n); //0.0000047
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Серверный рендеринг с REACT, что использовать?

    vahe_2000
    Ваге @vahe_2000
    я бы вам посоветовал использовать nextjs.но если вы хотите ssr с react-router вот линк на github
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как протестить то, что случится после нажатия кнопки в React(Jest, enzyme)?

    vahe_2000
    Ваге @vahe_2000
    // ....
    const wrapper = shallow(<Button/>);
    wrapper.find('button').simulate('click');
    
    //....
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
Оценили как «Нравится»
  • ← Предыдущие
  • 1
  • 2
  • 3
  • 4
  • 5
  • Следующие →
Самые активные сегодня
  • scoffs
    Семён Окулов
    • 14 ответов
    • 0 вопросов
  • vabka
    Василий Банников
    • 9 ответов
    • 0 вопросов
  • CityCat4
    CityCat4
    • 5 ответов
    • 0 вопросов
  • neuotq
    Александр Талалаев
    • 4 ответа
    • 0 вопросов
  • rPman
    • 4 ответа
    • 0 вопросов
  • Drno
    • 4 ответа
    • 0 вопросов
  • © Habr
  • О сервисе
  • Правила
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации