React components : working twig example #778

hedocode · 2023-04-11T15:57:05Z

Hello ! The tutorial didn't work because I had not the following lines in my twig :

{% block stylesheets %}{{ encore_entry_link_tags('app') }}{% endblock %}
{% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}

Q	A
Bug fix?	yes
New feature?	no
Tickets	N/A
License	MIT

weaverryan · 2023-04-11T18:31:45Z

src/React/doc/index.rst

 .. code-block:: html+twig

    {# templates/home.html.twig #}
+
+    {% block stylesheets %}{{ encore_entry_link_tags('app') }}{% endblock %}
+    {% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}


Hmm. These ARE needed, but they're supposed to live in your base.html.twig file and they should already be there by default (when you install Twig, it ships with a base.html.twig that has these two lines). Did you not have these lines already in your base.html.twig?

You are right !
Thank you for the precision, I didn't check the generated base.html.twig yet as the tutorial didn't extend it.

I added more informations so new users can make it work by copy-pasting, and still understand why it's needed with a link to related Encore documentation.

Sorry for the huge quantity of commits, I have been fighting with DOCtor RST, and he won by saying there is an error on a file I didn't change, on a line that does not have the problematic code :

src/LiveComponent/doc/index.rst ✘
581: Please use "html+twig" instead of "twig"

Have a good day !
Best regards

Ok, let's see. Hmm. Earlier, on line 16 (first line under installation), we say:

Before you start, make sure you have Symfony UX configured in your app_.

That is where, in theory, we're trying to point you to "make sure you have Encore fully installed and working in your app". By putting that note there, we don't need to include those details later on. Adding them here "muddies" the docs because these notes are really about setting up Encore/Symfony UX, and not about actually installing React.

Did you see that note on line 16? Is it too subtle? Could you suggest a change to it? I'd very much like to improve that as needed, and not include the new notes here (and, btw, absolutely no problem with many commits - keep going - we automatically squash when we merge).

we're trying to point you to "make sure you have Encore fully installed and working in your app"

I noticed that after, that's a bit of "recursion" but with attentive read it's clear enough.

these notes are really about setting up Encore/Symfony UX, and not about actually installing React

I agree with you that this page's responsibility is about Symfony React UX and therefore don't need to remind every dependencies such as Encore on it. According to that, I removed the Encore note and just kept the modified example extending base.html.twig.

hedocode · 2023-04-12T11:30:23Z

Another thing, I noticed that they are no explanation for components in subfolders, I expected it to work by writing the component file name but we actually need to write the path to it from the root folder, can I document it in this pull request or may I create a new one for this ?

weaverryan

Another thing, I noticed that they are no explanation for components in subfolders, I expected it to work by writing the component file name but we actually need to write the path to it from the root folder, can I document it in this pull request or may I create a new one for this ?

Yea, this is something that should be mentioned - totally ok to include it here 👍

weaverryan · 2023-04-12T13:14:31Z

src/React/doc/index.rst

 .. code-block:: html+twig

    {# templates/home.html.twig #}
+
+    {% block stylesheets %}{{ encore_entry_link_tags('app') }}{% endblock %}
+    {% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}


Ok, let's see. Hmm. Earlier, on line 16 (first line under installation), we say:

Before you start, make sure you have Symfony UX configured in your app_.

That is where, in theory, we're trying to point you to "make sure you have Encore fully installed and working in your app". By putting that note there, we don't need to include those details later on. Adding them here "muddies" the docs because these notes are really about setting up Encore/Symfony UX, and not about actually installing React.

Did you see that note on line 16? Is it too subtle? Could you suggest a change to it? I'd very much like to improve that as needed, and not include the new notes here (and, btw, absolutely no problem with many commits - keep going - we automatically squash when we merge).

weaverryan · 2023-04-12T13:14:48Z

src/React/doc/index.rst

+        <div {{ react_component('MyComponent', { 'fullName': number }) }}>
+            Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
+        </div>
+    {% endblock %}


I'm totally fine with this change - it makes it more complete, without distracting too much

hedocode · 2023-04-12T15:22:12Z

Yea, this is something that should be mentioned - totally ok to include it here +1

Done ! ✔️

weaverryan · 2023-04-14T14:51:06Z

src/React/doc/index.rst

@@ -77,6 +77,9 @@ React components located in the directory ``assets/react/controllers`` are regis
 React controller components.

 You can then render any React controller component in Twig using the ``react_component``.
+The first parameter is the path to the component from the root context folder, without extension at the end.
+The second is the component props object.


What about, instead of this note, we add a commented-out code example below - I'll suggest below

weaverryan · 2023-04-14T14:52:30Z

src/React/doc/index.rst

+    {% block body %}
+        <div {{ react_component('MyComponent', { 'fullName': number }) }}>
+            Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
+        </div>


Suggested change

</div>

</div>

{# component living in a subdirectory: "assets/react/controllers/Admin/OtherComponent" #}

<div {{ react_component('Admin/OtherComponent') }}></div>

The name Admin/OtherComponent is correct here, right? 😅

That's correct ! I just verified it :)

weaverryan · 2023-04-16T16:35:28Z

Thank you @hedocode!

hedocode · 2023-04-17T07:32:37Z

You're welcome !

weaverryan reviewed Apr 11, 2023

View reviewed changes

hedocode changed the title ~~Working twig example~~ React components : working twig example Apr 12, 2023

weaverryan reviewed Apr 12, 2023

View reviewed changes

weaverryan reviewed Apr 14, 2023

View reviewed changes

React components : working twig example

a7e8ae5

weaverryan merged commit a61e48b into symfony:2.x Apr 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

React components : working twig example #778

React components : working twig example #778

Uh oh!

hedocode commented Apr 11, 2023 •

edited

Loading

Uh oh!

weaverryan Apr 11, 2023

Uh oh!

hedocode Apr 12, 2023

Uh oh!

weaverryan Apr 12, 2023

Uh oh!

hedocode Apr 12, 2023

Uh oh!

hedocode commented Apr 12, 2023

Uh oh!

weaverryan left a comment

Uh oh!

weaverryan Apr 12, 2023

Uh oh!

weaverryan Apr 12, 2023

Uh oh!

hedocode commented Apr 12, 2023

Uh oh!

weaverryan Apr 14, 2023

Uh oh!

weaverryan Apr 14, 2023

Uh oh!

hedocode Apr 17, 2023

Uh oh!

weaverryan commented Apr 16, 2023

Uh oh!

hedocode commented Apr 17, 2023

Uh oh!

Uh oh!

-        </div>
+        </div>
+        {# component living in a subdirectory: "assets/react/controllers/Admin/OtherComponent" #}
+        <div {{ react_component('Admin/OtherComponent') }}></div>

Uh oh!

React components : working twig example #778

React components : working twig example #778

Uh oh!

Conversation

hedocode commented Apr 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hedocode commented Apr 12, 2023

Uh oh!

weaverryan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hedocode commented Apr 12, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weaverryan commented Apr 16, 2023

Uh oh!

hedocode commented Apr 17, 2023

Uh oh!

Uh oh!

hedocode commented Apr 11, 2023 •

edited

Loading