Using react on text editor

[sirajms5]

Hello,

I tried to use react on text editor to check it out. However, when I tried it the text “hi” is not showing up, can someone guide me on whats wrong here?

I tried the same code on codepen and it worked up fine.

Images bellow for the codes on codepen and sublime.

[ajayraja]

Add Babel to your HTML Code

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

add type attribute to your own script tag with text/babel

Reference here.

[sirajms5]

Thanks for your replay. I added the link and the type as requested, but it still doesn’t show “hi” when I refresh.

[colinthornton]

Try to follow the guide in the official docs: https://reactjs.org/docs/add-react-to-a-website.html

[sirajms5]

it doesn’t show any errors.

[sirajms5]

I followed the steps provided in the link and it worked. However, when I try to do the FCC challenge, it doesn’t work out.

[Jimbalin]

This worked for me:

...
    <!-- Load React. -->

    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->

    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!-- Load our React component. -->

    <script type="text/babel">

      var test= <h1>HELLO</h1>;

      ReactDOM.render(apples, document.getElementById("root"));

    </script>

  </body>

</html>

[colinthornton]

You don’t need to include any scripts or any sort of setup inside the freeCodeCamp editor. Your solution for that problem should be one line. All you need to do is edit the single line it gives you in the starter code.

The starter code is

const JSX = <div></div>;

The variable JSX is assigned a <div> tag with no text. To solve the problem you need to edit that line so that JSX is assigned an <h1> tag with the text Hello JSX!.

[carloscamejo]

I recently find out the hard way and finally someone told me is that when the code is just fine maybe some extension in your browser like dark reader can mess things up with freeCodeCamp exercises and keeping you from passing the test because of that extension. Suggestion, uninstall the extension, run the test again and if indeed that was the issue then maybe add it again later.

[sirajms5]

thank you, it worked this way. I thought it was possible to make a separate file not within html.

much appreciated.

[sirajms5]

@colinthornton @carloscamejo Thank you for your reply. I passed the challenge on FCC. However, i usually try to do the same challenge on a different platform to make sure that I have full understanding of the concept as well as understand what FCC has already setup.

[Jimbalin]

well, you can, but you will get a CORS error in the console (it’s a security feature due to a vulnerability).
You can configure the browsers settings to allow it. The better option would be to run the server locally.

My advice is that for now continue doing it online but you when feel a bit more confident go through the React docs (they have a tutorial project for a tic tac toe game). You can/should create the app using Create React App.