Ответы пользователя по тегу React
  • Какой backend лучше всего использовать с React.js/Redux?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    Какой по душе - такой использовать. Используя JS/TS и там, и там, можно "из коробки" получить общий код, который можно повторно использовать и в клиентской, и в серверной части, а также server-side rendering.
    Ответ написан
    Комментировать
  • Какую архитектуру css выбрать для приложения на React?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    Лично мне удобно пользоваться css-модулями, в качестве препроцессора - scss. При должной настройке можно забыть о повторяющихся в проекте именах классов, с server-side rendering подход тоже вполне дружит.
    Ответ написан
    Комментировать
  • Как подружить сайт на ReactJS с поисковыми роботами?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    React вполне хорошо может в server-side rendering, по крайней мере в связке с Redux или Mobx. Всё, что представляет ценность для поисковиков, рендерите на сервере, затем отдаёте в виде готовой html, остальное получаете дополнительно уже после инициализации движка сайта в браузере. Например, меню сайта, наиболее важные разделы и текст статьи готовим (получаем и рендерим в html) на сервере, а комментарии к статье - уже на клиенте обычным реактовским способом.
    Ответ написан
    Комментировать
  • Как исправить ошибку Unexpected token, expected {?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    В 20!8 синтаксис немного другой
    import React, { Component } from 'react';
    
    class Timer extends Component {
        state = {
            seconds: 0
        };
        
        componentDidMount() {
            this.timer = setInterval(this.tick, 1000);
        }
    
        tick() {
            this.setState({ seconds: this.state.seconds + 1 });
        }
    
        componentWillUnmount() {
            clearInterval(this.timer);
        }
    
        render() {
            return <h5>Прошло: {this.state.seconds}</h5>
        }
    }
    
    export default Timer;
    Ответ написан
    Комментировать
  • React пару вопросов?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    1) package.json, не packed.json. В зависимостях проекта есть, в подключениях самого проекта - нет.
    2) Для продакшн лучше импорт внутри скриптов и сборка в бандл используя Webpack
    3) Переписать, вырезав jQuery в принципе
    4) Nginx, Apache, что угодно
    Ответ написан
    2 комментария
  • Как обойтись без глобальных переменных в React приложении?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    Завести какой-нибудь файл, в котором
    export const ee = new EventEmitter();

    Там, где она нужна,
    import { ee } from './any-file-name';
    Ответ написан
    2 комментария
  • React: как импортировать из директории выше src?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    Забить на create-react-app, настроить конфиги самому, создать структуру
    - src
    -- common
    -- client
    -- server

    Правда, в случае с изоморфным приложением, которое умеет рендериться на сервере, разделение на client и common неактуально, т.к. всё, что связано с клиентом, будет использовано и на сервере, но всё, что связано с сервером, не будет использовано на клиенте. Так что я бы посоветовал такую структуру:
    - src
    -- app
    -- server
    Ответ написан
    Комментировать
  • Актуален ли сейчас redux для react?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    Актуален, но мне больше нравится Mobx
    Ответ написан
    Комментировать
  • Есть ли смысл учить два фреймворка?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    Щупать все, становиться ниндзей в наиболее понравившемся. Разработчики востребованы по всем трём популярным либам.
    Ответ написан
    Комментировать
  • Как лучше организовать структуру компонентов сайта React?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    • layouts - целиковые страницы: главная, авторизация, регистрация
      Внутри для каждой страницы папка, в которой можно держать сколь угодно относящихся только к этой странице компонентов - шапка этой страницы, меню этой страницы, вспомогательная фигня этой страницы, подвал этой страницы
    • components - повторно используемые в разных местах компоненты - инпуты, селекторы, галереи, эмбед видеоплеера и т.д.
      Также можно выделять сюда куски страниц (шапки, подвалы), используемые в нескольких layouts
    • styles - общеиспользуемые стили (здесь можно задать некий index с подключением к нему reset/normalize, шрифтов, эмоджи и т.д., а затем подключать его к App.jsx)

    Опционально можно выделить отдельную папку для App.jsx (при желании папку styles можно перенести туда же), либо определить его в layouts, как больше нравится, тут субъективно опираемся на внутреннее чувство фэн-шуя
    Ответ написан
    Комментировать
  • Как рендерить react компонент с html?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    Какой примерно код должен быть в скрипте для NodeJS для выполнения серверного рендеринкга SPA на React?

    Посмотрите мой ответ плиз, я описал пример серверного рендеринга Реакт-приложения на Ноде (там Redux, для Mobx схема почти такая же, с мелкими отличиями). Для пхп, уверен, тоже есть решения, если вам принципиально использовать на сервере именно пхп (но я бы посоветовал закапывать этого динозавра и посмотреть в сторону Ноде).
    Ответ написан
    Комментировать
  • Зачем Backend если есть ReactJS?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    Не поверишь - для централизованного хранения всех данных сайта/приложения/сервиса/чего-угодно )))00
    А реакт удобно и шустро нарисует посетителю то, что пришлёт бэкенд
    Ответ написан
    Комментировать
  • Как настроить webpack?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    test: /\.jsx?$/,
    loader: 'babel-loader'

    .babelrc presets env & react

    Ну и npm i --save-dev их все соответственно
    Ответ написан
    Комментировать
  • Какой примерно код должен быть в скрипте для NodeJS для выполнения серверного рендеринкга SPA на React?

    Anubis
    @Anubis
    Люблю корейскую кухню и веб-разработку
    https://redux.js.org/docs/recipes/ServerRendering.html
    Я по этому гайду смог достичь желаемого функционала. Вместо Express заюзал более современный Koa. Суть в том, чтобы при обращении к нужной к рендерингу страницы, (если нужно, асинхронно) заполучить некие данные, выстроить на их основе первоначальное состояние store, выполнить renderToString из 'react-dom/server', полученный html внедрить в основной html, также внедрить в основной html состояние стора после рендеринга (см. window.__PRELOADED_STATE__ по ссылке) и выдать итоговый ответ в браузер. Далее на клиенте заюзать createStore, используя содержимое переменной стора, полученной от сервака, и юзать не ReactDOM.render, а ReactDOM.hydrate.
    Ответ написан
    Комментировать