diff --git a/src/React/doc/index.rst b/src/React/doc/index.rst index 42b97640149..e7d463b8b3a 100644 --- a/src/React/doc/index.rst +++ b/src/React/doc/index.rst @@ -98,16 +98,38 @@ Using with AssetMapper Because the JSX format isn't pure JavaScript, using this library with AssetMapper requires some extra steps. -#. Compile your ``.jsx`` files to pure JavaScript files. This can be done by +.. note:: + + Compile your ``.jsx`` files to pure JavaScript files. This can be done by installing Babel and the ``@babel/preset-react`` preset. Example: https://github.com/symfony/ux/blob/2.x/ux.symfony.com/package.json -#. Point this library at the "built" controllers directory that contains the final +1- Create package.json in your project. This file is not included in the **Standard package**. (code below) + +.. code-block:: json-object + + { + "devDependencies": { + "@babel/cli": "^7.21.5", + "@babel/core": "^7.21.8", + "@babel/preset-react": "^7.18.6", + "svelte": "^3.59.1" + }, + "license": "MIT", + "private": true, + "scripts": { + "build": "yarn build-react && yarn build-svelte", + "build-react": "babel assets/react --out-dir assets/build/react --presets=@babel/preset-react", + "build-svelte": "node bin/compile_svelte.js" + } + } + +2- Point this library at the "built" controllers directory that contains the final JavaScript files: .. code-block:: yaml - # config/packages/react.yaml + # config/packages/asset_mapper.yaml react: controllers_path: '%kernel.project_dir%/assets/build/react/controllers' @@ -119,6 +141,33 @@ Also, inside of your ``.jsx`` files, when importing another component, use the // use PackageList.js even though the file is named PackageList.jsx import PackageList from '../components/PackageList.js'; +3- Install the required Node.js packages + +.. code-block:: terminal + + $ npm install + +4- The Flex recipe will have already added the registerReactControllerComponents() code to your assets/app.js file: + +.. code-block:: javascript + + // assets/app.js + import { registerReactControllerComponents } from '@symfony/ux-react'; + + registerReactControllerComponents(); + +.. note:: + +Do not use **require.context** parameter. Not working with AssetMapper + +5- Finally, run the 'build' command below so that we can use the React components you wrote or installed. + +.. code-block:: terminal + + $ yarn build-react + +Dont forget run **php bin/console asset-map:compile** command before deploy. + Backward Compatibility promise ------------------------------