Ответы пользователя Виктор Стороженко по тегу «JavaScript»

Как правильно спроектировать сайт на react + node js?

Виктор Стороженко @montecazazza

Node, GraphQL, React

https://github.com/facebookincubator/create-react-app - с этого можно начать, чтобы не заморачиваться со сборщиком и настройкой. Можно легко начать и фронт и бэк.
https://github.com/styled-components/styled-components - это добавить для стилей - ИМХО самый удобный вариант
Ну роутер и прочее что необходимо по ходу будет.
Вообще не очень понятно зачем React если не SPA.

Ответ написан более трёх лет назад

Комментировать

Можно ли на ReactJS динамически загружать компоненты без знания о них при сборке самого приложения (как это реализовано в Angular 2+)?

Виктор Стороженко @montecazazza

Node, GraphQL, React

Это называется code splitting - фича включена в Webpack 2. инструкция import стала асинхронная. Можно сделать HOC (asyncComponent) и использовать его для удобства (обычно код делят по раутам).
Потребуется настроить Webpack соответствующим образом, чтобы делил код по частям (chunks). В общем ищите по "code splitting React", кто ищет тот найдет

Вот asyncComponent в самом простом варианте

import React, { Component } from 'react';

export default function asyncComponent(importComponent) {
  return class AsyncComponent extends Component {
    constructor(props) {
      super(props);
      this.state = { Component: null };
    }
    async componentDidMount() {
      const { default: Component } = await importComponent();
      this.setState({ Component });
    }
    render() {
      const { Component } = this.state;
      return Component && <Component {...this.props} />
    }
  }
}

Вот как он может быть использован с React Router 4

import React from 'react';
import { Route, Switch } from 'react-router-dom';

import { Wrapper } from 'Styles';
import SyncComponent from 'Components/SyncComponent';
import { asyncComponent } from 'Helpers';

const AsyncComponent = asyncComponent(() => import('Components/AsyncComponent'));

const App = () => (
  <Wrapper>
    <Switch>
      <Route path='/route-to-async/' component={AsyncComponent}/>
      <Route component={SyncComponent}/>
    </Switch>
  </Wrapper>
);
export default App;

Ответ написан более трёх лет назад

1 комментарий

Куда подевалось значение?

Виктор Стороженко @montecazazza Автор вопроса

Node, GraphQL, React

Ну да, ну да. Последняя строка функции...
return rArr(tail, [head, ...rarr]);

Ответ написан более трёх лет назад

Комментировать

Как начать писать в функциональном стиле?

Виктор Стороженко @montecazazza

Node, GraphQL, React

Лично у меня получилось писать функционально, когда я хорошо освоился с такими понятиями как lazy функции, когда хорошо понял как работает maybe, что из любой функции можно сделать чистую. ну когда есть конкретные штуки, когда видишь почему Task может быть более интересен чем Promise, когда можешь легко написать простейший Task и map к нему. На ютубе есть видео где Фрисби на Реакте пишет.
Короче в какойто момент случиться переворот, когда просто станешь это понемногу использовать. ну все с карри и компоса начнется.
Предупреждаю, пути назад уже не будет!!!!
вот это посмотри
https://ocw.mit.edu/courses/electrical-engineering...
еще есть книжка к курсу на русском, найдешь в сети без проблем.

Ответ написан более трёх лет назад

Комментировать

Как повысить уровень программирования?

Виктор Стороженко @montecazazza

Node, GraphQL, React

Я бы порекомендовал вот что:
Изучить паттерны проектировани - это однозначно будет полезно
Изучить другую парадигму - если вы из ООП, изучите Функциональное программирование
Если пишите на JavaScript прочитайте что-нибудь на тему object composition vs class inheritance
Ну и конечно изучите что-нибудь на тему Алгоритмы и Структуры данных если с этой темой не знакомы

Из всего этого я бы выделил изучение нового подхода (Функционального) - по ходу изучения узнаете много интересного

Ответ написан более трёх лет назад

Комментировать

Куда в DOM добавить комментарий после отправки через AJAX?

Виктор Стороженко @montecazazza

Node, GraphQL, React

Не хочу критиковать, но вопрос не очень понятен.
Как и где хранить данные , которые дадут понять скипту куда именно вставлять новый комментарий?
Как и где хранить данные???
если вы по поводу выбора метода, то его можно вызвать например вот так
$('#comments_list').prepend(comment_from_server) === $('#comments_list')['prepend'](comment_from_server)
тогда названия методов можно хранить как строки (в массиве например)...

Ответ написан более трёх лет назад

Комментировать

Прототипы и наследование в JavaScript?

Виктор Стороженко @montecazazza

Node, GraphQL, React

Core.prototype.initChat
this.chat.sendMessage = function(message) {
        socket.emit('message', message);
///// ???? что такое socket в этой функции?
        return;
    };

Я бы на вашем месте определил объекты chat, socket, game - протестировал их, а затем уже расширил Core с их помощью.
чтобы в итоге получилось что-то типа
const core = new Core()
core.extend(chat)
core.extend(socket)
...
Вот это выглядит странно - this.chat = function(){};

Сложно сказать правильно ли вы делаете... Core, chat, socket это синглтоны? если так, то нужно их сделать как синглтоны.
Если нет, то будут ли объекты Core без chat или socket? в общем правильность зависит от результата, который хотите получить.

Добавлю.
chat и socket связаны между собой. без сокета чат невозможен, ну и без чата сокет больше не используется (в этом коде). поэтому это один компонент, нет смысла его разделять и инициализировать как отдельные.
В общем присутствуют структурные непонятки, думаю вам нужно с ними разобраться.

Ответ написан более трёх лет назад

2 комментария

Установка react/webpack, в чем проблема?

Виктор Стороженко @montecazazza

Node, GraphQL, React

вот это точно неправильно - './src/index.js' нужно указывать абсолютные пути.
У вас уже указаны пути в resolve, так что можно просто оставить 'index.js'. Или пока уберите resolve раздел и используйте модуль path и __dirname переменную (просто чтобы получше разобраться на первом этапе)

resolve: {
        moduleDirectories: ['node_modules', 'bower_components'],
        moduleTemplates: ['*', 'index'],
        extensions: ['*', 'index'],
        root: __dirname + '/src'
    },

extensions: ['*', 'index'] - вот это тоже странное - тут должны быть указаны расширения файлов. и раз уж вы указываете '*', то на этом можно и остановиться, но лучше указывать реальные расширения файлов которые участвуют в сборке ['js', 'jsx', 'css', и тд]

достаточно много логических несостыковок в конфиге, вы, очевидно, не доконца понимаете, что конретно тут происходит. Я бы вам порекомендовал начать с разделов entry, output и module и остальное добавлять по мере того, как будете читать документацию. сейчас она у них написана отлично. Успехов!!! разберитесь с этим, это того стОит!!!
https://webpack.js.org/configuration/

Ответ написан более трёх лет назад

Комментировать

Webpack как указать пути к модулям?

Виктор Стороженко @montecazazza

Node, GraphQL, React

Галпом не пользуюсь, сразу говорю...
Пути к модулям указываются в resolve секции. Можно указать алиасы и всякой прочее.

//...
resolve: {
  modules: [/*путь_к_папке_с_сорсом,*/ "node_modules"]
}
//...

Очень странно, что не видит, по умолчанию все импорты должны идти из node_modules на сколько я знаю

https://webpack.js.org/configuration/resolve/#reso...

Ответ написан более трёх лет назад

3 комментария

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