Script won't load in React app


#1

Hi Brady,

I have problem on starting my project of React and want your suggestion.

I follow the tutorial of code4startup.com here to do a small work, only a html and a script.jsx, I created a c9 workplace here, the codes works in jsbin.com but cannot work in c9.

I tested both blank and node.js workspace, neither of them works.

Thanks in advance for your guidance.

Best,
Albert


Tutorials - Table of Contents
#2

Looks like you’re loading in a script.js file but you have a script.jsx file. Remember the browser console is your friend :wink:


#3

Thanks for your instant feedback.

I think that the .js/.jsx is the way which is supposed to be done, as explained in this video (login required to watch video), and here you have my code works >> http://plnkr.co/edit/PliOY8OibQaqwabAXFzE?p=preview

Thanks,
A


#4

In your plnkr workspace you’re loading script.js after you load React. Try that on Cloud9 and see if that helps.


#5

I did the update, but still not work, screenshot attached below.
I’m not sure if that is caused by an error saying that variable React if not defined.


#6

Hi, have you ever tried on your end with my simple codes? would you please help update the react part in your tutorial Tutorials - Table of Contents ? so that I could follow you guide.
Thanks,


#7

If you change your html file to load script.jsx then this will work so I’d suggest that. At the moment we don’t have a React tutorial but if you have something you would like to submit then that’d be awesome.


#8

Thanks Brady for your feedback.

I did what you suggested, but still that doesn’t work. https://ide.c9.io/digitif_lu/code4startup

I’m willing to share my code as example once it works.

Best,


#10

Hi, after a guidance from c9 in workspace, here is solution works in c9, I updated in this space. The main difference from tutorial code in Plunker is in the script in index.html header:

  1. index.js does not work, should be index.jsx
  2. babel-core script support required.

@Brady,
Thanks again for your patience.

Happy coding.

Albert


#11

Hi Brady, if you want, you may take code in my space as example, and you may introduce this free tutorial for starter on React.
Best,


#12

Ah that’s perfect, thanks for that. So type="text/babel" was the key in the following line of index.html:

<script type="text/babel" src="script.jsx"></script>