• Как правильно спроектировать сайт на 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;
    Ответ написан
  • Удаление элемента?

    @montecazazza
    Node, GraphQL, React
    Если я правильно понял проблему, то вы хотите, привязать к обработчику onClick индекс элемента. Я предпочитаю делать это через замыкания.
    Попутно советую перенести bind в конструктор.
    Кстате, bind можно не делать, если заменить объявление метода на стрелочный синтаксис тогда все станет намного наглядней метод будет выглядеть вот так и как я сказал bind не нужен:
    removeCount = (idx) => (/*сюда будет передан event, но он вам типа не нужен*/) => {
      /* тело с this, он будет autobinded */
    }

    Конструктор тоже будет не нужен, можно просто написать state
    class App extends React.Component {
      //constructor(){
      //  super();
      //  this.state ={
      //   count: [1,2,3,4,5,6,7,8,9]
      //  }
      //  this.removeCount = this.removeCount.bind(this)
      //}
      this.state = {
        count: [1,2,3,4,5,6,7,8,9]
      };
      /*...*/
    }


    Но я сохранил твой вариант
    Если заменить метод splice на не мутирующий slice, то тело функции станет одной строкой без доп. переменных. Подсказка в коде

    class App extends React.Component {
      constructor(){
        super();
        this.state ={
          count: [1,2,3,4,5,6,7,8,9]
        }
      this.removeCount = this.removeCount.bind(this)
      }
      removeCount(idx) {
        return function() {
          let newItems = this.state.count;
          newItems.splice(idx, 1);
          this.setState({count: newItems});
          // this.setState({count: this.state.count.slice(/*чо нада*/)});
          // все что выше в методе тогда не нужно
        }
      }
      render() {
        const list = this.state.count.map(function(index, i){
          return (
            <div 
              key={i} 
              onClick={this.removeCount(i)}>
                <p>{index}</p>
            </div>
          );
        })
        return (
          <div className="row">
           {list}
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, document.getElementById('container'));


    Ну ОК, мой вариант выглядел бы так (возможны опечатки, пишу прям тут)
    class App extends React.Component {
       state ={
         count: [1,2,3,4,5,6,7,8,9]
      }
      removeCount = (idx) => () => {
        this.setState({count: this.state.count.slice(idx, 1)});
      }
      render() {
        return (
          <div className="row">
           {this.state.count.map(i => (
              <div 
                key={i} 
                onClick={this.removeCount(i)}>
                  <p>{i}</p>
              </div>
            ))}
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, document.getElementById('container'));
    Ответ написан
    Комментировать
  • Куда подевалось значение?

    @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...
    еще есть книжка к курсу на русском, найдешь в сети без проблем.
    Ответ написан
    Комментировать
  • В чем суть React-Router 4?

    @montecazazza
    Node, GraphQL, React
    Вот тут можно посмотреть
    https://egghead.io/lessons/react-run-the-react-rou...

    Странный вопрос вообще, а прошлым пользовался?
    Ответ написан
  • Как повысить уровень программирования?

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

    Из всего этого я бы выделил изучение нового подхода (Функционального) - по ходу изучения узнаете много интересного
    Ответ написан
    Комментировать
  • Будет ли логичным сделать серверную часть на node js для мини игры на phaser?

    @montecazazza
    Node, GraphQL, React
    Node проигрывает тогда, когда нужны тяжелые расчеты, все остальное не проблема.
    Ответ написан
    Комментировать
  • Куда в 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 связаны между собой. без сокета чат невозможен, ну и без чата сокет больше не используется (в этом коде). поэтому это один компонент, нет смысла его разделять и инициализировать как отдельные.
    В общем присутствуют структурные непонятки, думаю вам нужно с ними разобраться.
    Ответ написан
  • Установка 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...
    Ответ написан
  • Где искать коллектив фрилансеру?

    @montecazazza
    Node, GraphQL, React
    Насчет девушки - не слушай, это все от лукавого.
    Не, если конечно есть желание общаться на темы:
    что бы одеть?
    что бы съесть, чтобы похудеть?
    какие они все сволочи!
    что ты молчишь?
    пр...
    ))
    Готов предложить себя в качестве code buddy, учусь но уже не dummy. могу составить компашку и покодить время от времени вместе как pair programming, обменяться best practices, обсудить новые фитчи и фреймфорки. Я пишу на js. Node, React, Redux, GraphQL и все такое. Заинтересован поработать в команде для опыта и чтобы получить оценку своих скилов, так что готов поучаствовать немного в твоих проектах для этих целей
    если интерестно пиши (storozvic@gmail.com) это кстати, относится не только к автору вопроса но и ко всем кто это видит.
    Если ты крутой вэбдев буду рад поучится у тебя, поделаю задания за code review и прочий экспирианс))
    Ответ написан
    1 комментарий