React: Build a Markdown Previewer - works in vsCode not in codePenn c

JavaScript
1

Hello,
Build a Markdown Previewer
My code works in VScode but not in codePen. What’s wrong ?
https://codepen.io/ALL9000/pen/xxpqaqO?editors=1010
image

2

Hello @karlito, when I open the console in codepen (which you can find in left side bottom corner), I get this message:

snap
snap777×73 11.9 KB

It seems that you are using the bootstrap Badge incorrectly. I googled it quickly and found this:

By the way, when i replace the Badge with div your code renders.

Good luck.

3

This is what I followed:
react-Bootstarp badge

and this work well in VScode despite of I have this error in the console

4

I don’t have a lot of time at the moment. I tried to quickly look at this:

Seeing that it seems that you don’t have any CDN for React-Bootstrap in your codepen.

5

Actually I kept at it a little longer, and this is what you need:
Add these to your HTML file, under the root, like so:

<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
  crossorigin></script>

<script
  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>

Then add this to your JavaScript file, somewhere at the top:
let Badge = window.ReactBootstrap.Badge.
This should work. Looks nice by the way!

6

Now I have this:
image

and nothing displaying :face_with_thermometer:

7

Also add this cdn https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/2.2.2/react-bootstrap.min.js, and remove the extra period here:
let Badge = window.ReactBootstrap.Badge. <

8

Add the cdn here:

CDN
CDN695×519 38.9 KB

9

it is displayed, there is no error but the badge elements no longer work.
with vsCode:
image
codepen;
image

10

Yes, I did see that. Before it worked fine. Now not so much. Let me see what is going wrong. :sweat_smile:

11

thanks you Slimattcode, but after I should have need some explanations because … :face_with_thermometer:

12

this should do the trick:

<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
  crossorigin></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script
  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>

I have not worked with react-bootstrap before, was a bit of searching around. This could have been done much simpler. But in any way it now works.

It the dependencies. You code needs to have access to the libraries you are using. That’s all I did.

13

finished
finished733×545 39.7 KB

14

Howww! awsome.
How do you found out this solution ?
Some explanations ?

15

As I said, these are the dependencies your code needs to work. You are using Bootstrap and React-Bootstrap. You need to tell your code where to find these. In VSCode you probably have them installed somewhere your code can find them. In codepen you need a cdn or link for them to work.

And you just need to read how to make them work in your code.
This is in their installation section:

Browser globals
#

We provide react-bootstrap.js and react-bootstrap.min.js bundles with all components exported on the window.ReactBootstrap object. These bundles are available on unpkg, as well as in the npm package.

<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
  crossorigin></script>

<script
  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>

<script>var Alert = ReactBootstrap.Alert;</script>

Hope this helps. Good luck.

16

yes, I installed all in local. But in codePen I didn’t find the correct links to put instead. Could you send me the links pages where you find the solutions ?
I’m litle confuse with this topics . For exemple when I read this kind of pages, for now i don’t understand what Browser globals is for. the exemple with “CodeSandboxunder” means nothing for me.
Then there is another instruction for css and I don’t understand what is it for. There is many things and For now I don’t now how to use all this exactly without make mistake.
Is there some cours or website wich explain this kind of topic ?

17

The information I gave is all here:

Just read it through, and if you don’t understand something google it, or ask a question here. I have never used react-bootstrap before, so I don’t know much about it.
And for codepen you can find its documentation here:

18

ok i will study all this and try to come to the same conclusion as you.
Thanks again.

1 Like
19

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.