Here is the codepen:
A few hours ago, this exact same text rendered without issue. Suddenly, now the pen won’t load and there is an error message on whichever line has the first html tags inside of a component. Currently that’s that <p> tag on line 3, but if I remove that component then the same error will appear on line 19 for the <div> tag there. Why is codepen not able to recognize this syntax? As you can see, I’ve applied Babel, react, and react-DOM to this script file. Pls halp
I have the same problem. I’m currently working on the Drum Machine project. Seems like all my projects that use React are not loading. Even the FreeCodeCamp example projects that use React aren’t loading properly. I too am curious to what is going on.
I discovered the same since posting. It’s a relief to hear that someone else has noticed. That tells me it’s probably a temporary issue that codepen is having. Thank you for your reply!
Same problem here. I had all my code working for the Markdown Previewer but just needed a little tweak to the JS file and it broke. I then spent the last three hours trying to find “My Mistake”. I also can’t get the react example pens to run either so the issue must be bigger than me.
After some more searching, I updated my links in the JS External scripts to 15.6.1 and re-entered all my code from my local environment. The code is showing up now but still isn’t passing the tests like it does locally. [https://codepen.io/REAOrlando/pen/ZjBvwY](http://Here is my codepen)
Here is the forum posted that helped me.
You’re using jQuery in a React app? That’s like putting your dinner in the microwave and then putting it all (microwave and all) into the oven and turning it on.
If you’re adding JQ to React, then you’re misunderstanding something. They’re both overlap in that they are both manipulating the DOM. When I comment out the JQ in your app, it passes. I think the JQ is confusing the test - but it shouldn’t really be there in the first place. React expects that it is the only one manipulating the DOM and it gets confused, which seems to be confusing the tests.
My pen has also started working again, although I had version 15.6.1 on the whole time, even when it was broken last night.
Thank you for helping me figure out why my tests weren’t passing. Whatever issue codepen had last night with react apps, I started deleting components and scripts 1 by 1 until I could render anything. Then built it back up 1 by 1 until it almost worked except for a few failing tests. It looks like I forgot to add back the jQuery external script. That is what was keeping the tests from passing. Not the jQuery itself.
I probably am missing something, certainly still learning here. Is there a specific reason not to use jQuery with react? I admit, I really don’t need it in this app, it’s just used here to make the auto expand with a snippet I found.
One of the points of react is that it handles the DOM.
Look at your HTML:
<div id="root"></div>
The rest of the DOM will be constructed and managed by React. That is a major point of React. There should be no other DOM manipulation going on or it will confuse React. React works on the assumption that it is the only one manipulating the DOM. JQ is a little more free because it doesn’t have one-way data binding and you have to explicitly make the changes that you want so it is not big deal to JQ if someone else is manipulating the DOM (like with vanilla JS) because JQ assumes that you are in control. But React does a lot of this behind the scenes for you and it just assumes… If you make a change on your own, it will confuse it.