I am currently working through the “Create a Front-End App with React” skill path, and I have reached Module 5 “Introduction to React” where JSX is being taught.
While doing the modules teaching things like HTML, CSS, JavaScript, and transpilation, whenever I ran code, there would be an output window where I could see the results of my code, whether that be a representation of a web page or the console log. However, since the beginning of the JSX course, there does not seem to be any output window. I can still run code, and when I put in the right code it allows me to progress with the lesson, but I’m not seeing what the result of the code I’ve written is in any way, shape, or form.
I cannot tell whether this is a bug or intentional, or whether I’m experiencing some manner of setting or browser issue. I normally use Firefox with a script-blocker where I’ve whitelisted Codecademy, and to double-check I tried these same lessons in Edge where I don’t have any script-blockers; it still didn’t show any output window.
Does anyone know whether the JSX lessons are supposed to show the output of the code I write? I’m feeling confused and unsure whether I need to fix something or whether these lessons are simply different than what I’ve grown accustomed to in previous lessons.
Thanks for the help!
I think that’s intentional, because the code the lessons are creating doesn’t necessarily have a visible output. For example, lesson 7 asks you to create code that ends up looking like this:
const p1 = <p id="large">foo</p>;
const p2 = <p id="small">bar</p>;
which on its own won’t render anything anyway (you’d need to at least call ReactDOM.render() on a component containing both <p> tags). I think the lessons are just trying to build your comfort with JSX. Later on it that module, when they introduce rendering, the output window returns.
3 Likes
Okay man, look react is totally different for html, css, JavaScript. Are you talking about when you run your code to see what you have so far on the actual document page where you code displays. If so, when you want to run your code for react, you go to the terminal at the bottom of you code editor. You type start npm , if your running npm and for react vite it’s npm run dev.
That’s true—if you’re developing locally, then you can use the terminal and npx to compile and run your app. You still need to call render() somewhere in your project (and link the JS to your HTML file), though—otherwise your React won’t render. In the CC lesson; however, there isn’t a terminal to do this, and there isn’t an output window that automatically displays the code’s output—hence the question. I’m assuming this is because CC is getting you to do exercises with relatively mundane JSX expressions, so there’s little reason to display the output.
2 Likes