From e9e0870ceb74f6ac435705bcf05cceb4294272e1 Mon Sep 17 00:00:00 2001
From: Sait KURT <33868586+xDeSwa@users.noreply.github.com>
Date: Wed, 26 Jun 2024 21:31:36 +0300
Subject: [PATCH 1/3] Update index.rst Usage React with AssetMapper

Completing the documentation of usage with UX React with Asset Mapper
---
 src/React/doc/index.rst | 51 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/React/doc/index.rst b/src/React/doc/index.rst
index 42b97640149..c8d20229693 100644
--- a/src/React/doc/index.rst
+++ b/src/React/doc/index.rst
@@ -98,16 +98,36 @@ 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 +139,31 @@ 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
 ------------------------------
 

From 8ebcbd7839f82fdcf19f8fde7d3d57bb95aaf4d3 Mon Sep 17 00:00:00 2001
From: Sait KURT <33868586+xDeSwa@users.noreply.github.com>
Date: Wed, 26 Jun 2024 21:41:23 +0300
Subject: [PATCH 2/3] Update index.rst Usage React with AssetMapper

Completing the documentation of usage with UX React with Asset Mapper
---
 src/React/doc/index.rst | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/React/doc/index.rst b/src/React/doc/index.rst
index c8d20229693..9651bfa51eb 100644
--- a/src/React/doc/index.rst
+++ b/src/React/doc/index.rst
@@ -98,7 +98,8 @@ Using with AssetMapper
 Because the JSX format isn't pure JavaScript, using this library with AssetMapper
 requires some extra steps.
 
-.. note:: 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
 
@@ -154,7 +155,8 @@ Also, inside of your ``.jsx`` files, when importing another component, use the
 
     registerReactControllerComponents();
 
-.. note:: Do not use **require.context** parameter. Not working with AssetMapper
+.. 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.
 

From 3467b12413c6d20ce55ebf746cdebe07c20c3e9c Mon Sep 17 00:00:00 2001
From: Sait KURT <33868586+xDeSwa@users.noreply.github.com>
Date: Wed, 26 Jun 2024 21:43:47 +0300
Subject: [PATCH 3/3] Update index.rst Usage React with AssetMapper

---
 src/React/doc/index.rst | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/React/doc/index.rst b/src/React/doc/index.rst
index 9651bfa51eb..e7d463b8b3a 100644
--- a/src/React/doc/index.rst
+++ b/src/React/doc/index.rst
@@ -99,6 +99,7 @@ Because the JSX format isn't pure JavaScript, using this library with AssetMappe
 requires some extra steps.
 
 .. 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
@@ -156,6 +157,7 @@ Also, inside of your ``.jsx`` files, when importing another component, use the
     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.