symfony react.js Как добавить его с помощью npm (без yarn)

Primary tabs

vedro-compota's picture
Submitted by vedro-compota on Tue, 07/02/2019 - 19:20

Forums:

Ставим 4-ре пакета двумя командами:

npm install --save-dev @babel/preset-react
npm install  react react-dom prop-types

далее правим webpack.config.js:

// webpack.config.js
// ...

Encore
    // ...
+     .enableReactPreset()
;
  • На базе официального руководства (с yarn): https://symfony.com/doc/current/frontend/encore/reactjs.html

ПРИМЕЧАНИЯ:

  1. в нашем случае пришлось поправить package.json для нормальной работы локального отладочного сервера.
  2. Пример настройки маршрута symfony для SPA: http://fkn.ktu10.com/?q=node/10993

Key Words for FKN + antitotal forum (CS VSU):

  • Log in to post comments
  • 3069 reads
farberling_ti's picture

farberling_ti

Mon, 08/23/2021 - 19:32

Это не очевидно, но чтобы заставить понимать jsx-разметку нужно установленный пресет (@babel/preset-react) подключить в babel-конфиг:
-Либо добавить в .babelrc в массив presets строчку ["@babel/preset-react"]:

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": {
        "version": 3.6,
        "proposals": true
      }
    }],
    ["@babel/preset-react"]
  ],
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

-Либо в package.json в раздел babel:

"babel": {
    "presets": [["@babel/preset-react"]],
  }

-Либо, если конфиг находится в webpack.config.js, и вы используете Encore, добавить:

Encore
      // ...
     .configureBabel((babelConfig) => {
            babelConfig.presets.push('@babel/preset-react');
     })
;