ReactJS talks to your API

Check your js code in twig file. It's must be;
<script type="text/babel">
ReactDOM.render(
<notesection/>,
document.getElementById('js-notes-wrapper')
);
</script>

Instead of
ReactDOM.render(
<notesection url="{notesUrl}"/>,
document.getElementById('js-notes-wrapper')
);

Yea... I regret throwing React in here - the JavaScript isn't really the point of this tutorial and it trips people up :).

Hey, I don't agree. Your tutorials are so awesome! It helped me so much when I was joining my company. None else can describe so many things in such a cool way, as you do - AND - You motivated me to take a look at reactJS back in the day. Now I have been working in symfony for more than half year, every day and all because of this series of tutorial you have created. I like to rewatch them solely because of nostalgia purposes and quality it holds! :)

Milan V. you just made my day!!! What an awesome story - you ROCK!!! :) :) :)

Hey Abelardo L. ,

What do you mean on "file doesn't load"? The file could not be found by your browser? Do you see 404 error for this file in "Network" tab og Google Chrome Dev Tools? We would love to help you fix this problem.

Cheers!

Hi victor ,
Thanks you for replying quickly.

It seems like that file isn't loaded by the browser.
How could I upload a screenshot of this issue?

Best regards.

The following files are only loaded: 'main.js' and 'jquery'.

I am using Opera 48.0.2685.39 on MAC OS El Capitan. It also happens in Google Chrome 61.0.3163.100.

Could be happen due to the newest version of React, jQuery or anything else?

Best regards, @Victor Bocharsky

I think it could be a problem related to version, but I'm not sure yet. Btw, did you download the course code and ran it from finish/ directory? Or, did you follow screencasts step by step and write all the code we show by yourself?

Hi Victor,
Yes, I followed screencasts step by step but I didn't run it from finish/ directory. I will do it.

Hey Abelardo L. ,

Great, I'd recommend you to do it separately of your code. So if it works from the downloaded archive, then we'll know exactly that the problem in *your* code only, so it'll be easy to debug things further.

Cheers!

Hi again,
I have just uploaded a screenshot when I run the 'finish' version of your app.
Please, check it out and let me know why these errors appear when I executed.
Best regards.
https://imgur.com/a/eZG6f

Hey Abelardo L.

Symfony couldnt find your autoloader file, look like you forgot to run `composer install`. Oh, also, there is a README file at the root of the project with setup instructions, you may find them useful

Cheers!

It worked! I forgot to run "composer install" (Y)

The notes were loaded too.

I am still investigating why the notes are not loaded into my app.

Cheers!

That's great! we moved one step further :)

How did it go? could you fix it?

With my last comment I referred to your 'finish' version, not mine.
I am investigating why my app doesn't work.
Whenever I fix it, I will post here. :)

Regards.

Please do it! :)

Hey Abelardo L. ,

Hm, I'm going to investigate the problem. What about screenshots - we do not allow to upload screenshots in Disqus comments, but you can upload it to any cloud, e.g. https://imgur.com/ and send a link to it in comments.

Cheers!

Here is the link: http://abelardolg.imgur.com

Hey Abelardo L. ,

Hm, that's interesting! So I see this file exists and you can get it by requesting http://localhost:8000/js/notes.react.js . But... I don't see it's loaded in Network tab, which means you don't have it in HTML code - probably it's due to cache! I bet if you press "Cmd + Option + U" (or right click -> View Page Source) you won't see the line:

<script type="text/babel" src="{{ asset('js/notes.react.js') }}"></script>```


Could you double check it doesn't exist in page source code to be sure? So it means, you just need to clear the cache, which make sense if you load Symfony in production environment - you should always clear the cache manually in prod after any change in templates or in configuration. Symfony regenerate the cache by itself in dev environment only.

In shorts, try to execute in your console:
bin/console cache:clear --env=prod

I'm 99% sure it should solve your problem.

Cheers!

Obviously, this file doesn't exist in view source code page. A new picture was uploaded to be verified by you.
I executed that line but the problem persists.
I deleted Opera cache and by using (cmd + R) and (cmd + alt + R) but none happens.
How can I change between dev-prod environments with Symfony?

Hey Abelardo L.
You only have to hit (inside web folder) `app.php` instead of `app_dev.php` file. Those files are you front controller, so it depends on which web server are you running, but basically you only have to switch your project public root path

Cheers!

Thanks :)

Hey Abelardo L. ,

Hm, I just double check it and it works for me well, i.e. browser is able to download "js/notes.react.js" file. I downloaded the course code, install composer deps and run "bin/console server:run" - that's it. So let's debug your code a bit. We include this file in one spot only: in "genus/show.html.twig" template.

1. Could you make sure you have: "<script type="text/babel" src="{{ asset('js/notes.react.js') }}"></script>" exact line in "javascripts" block of that template? The full content of this block is:

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <script type="text/babel" src="{{ asset('js/notes.react.js') }}"></script>
    <script type="text/babel">
        var notesUrl = '{{ path('genus_show_notes', {'genusName': name}) }}';

        ReactDOM.render(
          <NoteSection url={notesUrl} />,
          document.getElementById('js-notes-wrapper')
        );
    </script>
{% endblock %}

Is it the same you have?

1. Next, could you make sure you have this file in "web/js/notes.react.js" path?

2. Also, try to debug 404 error in Google Chrome dev tools, i.e. right click on "notes.react.js" -> "Open in new tab". What URL do you have? it should be exactly "http://localhost:8000/js/notes.react.js&quot;. Is it true for you?

3. Do you have Symfony's 404 error, i.e in the dev mode you should see something like:

   No route found for "GET /js/notes.react.js"

Try to follow those debug instructions step by step, I bet we'll fix it together. If you still have the same problem in the end, then provide some answers on my questions so I can move forward.

Cheers!

In the 2:30 of the screencast, you didn't write this line:
var notesUrl = '{{ path('genus_show_notes', {'genusName': name}) }}';

Yes, we add it a bit later, about 3:35. Haven't you seen the video to the end? If not, then what minute have you stuck at?

Yes, i saw the video to the end. But in that minute, 2:30, you can show that notes but I can't do it.
I am still investigating why I don't see the notes. Curious, I have the same code than you. ¿?

At that point because I can't see the notes.

Yes, I have seen it to the end but at that point I am stuck due to this error.

2) Yes, that file is in that path.
3) The 404 error isn't showed; simply, that file doesn't appear in the list of downloaded files.

2) Great!
3) I mean open Chrome dev tools -> Network tab and reload the page. If this page not found, you should see 404 status opposite this "notes.react.js". So you can perform right click on this line and choose "Open in new tab". After it, what URL do you have in the browser's address bar? is it "http://localhost:8000/js/notes.react.js"? Do you see an error or content of "notes.react.js" file in opened browser window?

No 404 error was showed while I had opened Chrome dev tools->Network tab

Definitively, that file doesn't appear in the list under network tab.

It seems like that file is not detected by the browsers Opera nor Chrome.

Its content.

That's great! It means you have this file and you can access it. So the problem is that you do not require it in HTML code, most probably it's the cache problem, you just need to clear the cache... or you wrote this line in a wrong file :)

No, I haven't written this line in a wrong file.
I think it's the cache problem.
I will check it out with FF.

By using Firefox (FF), it does happen the same: that .js file doesn't load. :S

4) No, I haven't got that error.

If you don't see this error, so then you should see content of "notes.react.js" file, right? Or, what do you see then in the browser's window when opens http://localhost:8000/js/notes.react.js URL?

The content of that file.

Yes, I see its content.

Hi Michael!

As you listed here (good details!), the problem is happening earlier - when the React app is being initialized. I think it's a small syntax issue on line 5. Try this:

<NoteSection url={notesUrl} />,

The NoteSection upper-casing is important, but the real problem is that you have an extra set of quotes around {notesUrl} and the ending / is inside of these quotes (that last detail I believe is causing the error).

Let me know if this helps!

Cheers!

Hey Enkhbilguun E.!

Ah yes, great question! When we run the built-in web server, when you go to http://localhost:8000/genus/octopus/notes, it automatically knows to use app_dev.php. So, that's why it works in the tutorial :).

But, the *real* solution is to basically do what you did - send the request to /app_dev.php/genus/octopus/notes. Of course, you don't want to hardcode this (then it would break on production!). What I would actually do is either:

A) Use FOSJsRoutingBundle - which allows you to generate URLs from routes right inside your JS code. It's awesome!

B) Generate the URL in Twig, set it on some global JS variable - e.g. window.notesUrl = '{{ path('...') }}'; - and access that inside of the React.js app.

I didn't want to dive into these details this early in the Symfony series - but it's a really valid question.

Cheers!

Hey Sheeran!

Ah, awesome! I'm *thrilled* that these are useful (and fun!) for you - that's exactly what we're hoping for :).

So hmm, let's figure out your issue :). First, when it doesn't work, do you see any JavaScript errors in your browser's console? And also, when you switch from the cdnjs URL to the js/browser.min.js version, you said that "it stops working ,but react... can be used locally". What do you mean by "can be used locally"?

Let me know! And we'll find the problem.

Cheers!