I strongly suspect I have a configuration or setup error, but I’m feeling stuck on getting my react component to display.
I burned too much time on CodePen. Somehow that website feels like a crutch to me, so I got my own website and am trying to get the Markdown Previewer app working. In my frustration, I’ve stripped out nearly all content, just trying to get hello world to display.
Here’s my markdownpreviewer.html:
typically you also need a babel compiler added to to your script files in a standalone html file that is needed for the browser to understand jsx, I used to use this link a while back on similar projects
Hmmm. I added that babel CDN to my markdownpreviewer.html file, and got some new errors:
unreachable code after return statement
SyntaxError: import declarations may only appear at top level of a module markdownpreviewer.js:1
Source map error: request failed with status 404
Resource URL: https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js
Source Map URL: tcc_l.combined.1.0.6.min.js.map
Do I need to source in tcc_l.combined.1.0.6.min.js ?
I agree I need babel as the codepen for the FCC projects states babel must be set for the pre-compiler.
I finally got it working this morning. The key was adding type=“text/babel” to my project’s script tag: <script src="markdownpreviewer.js" type="text/babel"></script>
but also I had to remove the import React and import ReactDOM statements from my js file. I made this change after reviewing your Recipe js file at:
I noticed you did not call import in your file. Thank you for posting those files in your public github.
Glad you got it working.
Import statements don’t work in this case since you are embedding the entire react library (via cdn) into your file giving you access to all the library’s functionality, no modules are being exported that are to be imported by your file so it is unnecessary.
However, I would like to point out that the way you have it set up now will only be good for development (good enough for learning and testing) but will not work for production, as I mentioned before, for that you would need some type of local server setup on your machine (either with CRA or your own webpack setup) and in that event you would need to use import as the server can have access to exported modules on your machine.
Actually was reading the newer react docs earlier and they do a pretty good job explaining how to embed react directly to a website, it maybe useful to post here for people asking the same question in the future.