React Markdown Previewer Project Not Working

React Markdown Previewer Project Not Working
0

#1

I’ve been working on this project but I can’t seem to get the actual preview to appear on the main screen from my code. I’ve tried fixing my error in JavaScript but I’m not even sure why the error is there.
What am I doing wrong?
Here’s the link to my CodePen:


#2

You’re getting two errors: First, an unterminated string constant. Use the backtick character ( ` ) to wrap your string, if you want multi lines.

Second, your div on line 27 is not properly closed.

Least, that’s how it looks from MY porch. :wink:


#3

Does the React-production you’re including also include React-DOM, or do you need to include that as well. After fixing the two errors I’d mentioned, I noticed you’re also getting a ReactDOM not loaded error.


#4

Thanks! I fixed all the errors but the screen is still blank. I did include React-DOM but still nothing.
Here’s the link: https://codepen.io/donnacamos88/pen/MPKwzQ?editors=0011


#5

Did you load React on Codepen? It looks like your Codepen project isn’t recognizing React at all.


#6

I’m pretty sure I did. I went into the settings on JavaScript and typed “React” into the search box. It pulled up react and react-DOM. The tutorial I’m going through said to use react-DOM so that’s what I put in. Why doesn’t it recognize it? Am I missing something with React?


#7

When still developing your app, I recommend not using the production code which you are currently doing. You can not see the many errors your code has because of this. Use the following development code links so you can start debugging your project.

https://unpkg.com/[email protected]/umd/react.development.js

https://unpkg.com/[email protected]/umd/react-dom.development.js

Also, make sure to load the marked.js library last in Codepen.


#8

You should probably stop using Codepen for React/Javascript projects. If you’re that far along it’s time to use an IDE or text editor like Atom, VS, Sublime, etc…

Way easier to work on something that way. Use create-react-app for React projects. Much better than messing around with Codepen.


#9

I see the following line referencing an Editor component, but do not see it defined any where in your code.

<Editor markdown={this.state.markdown} onChange={this.handleChange} />

#10

Thanks for the advice. I’m just going to download Sublime and start over. Maybe I can get better results from there.