So, I just started working on this project on Brackets.io and here is my code.(I’m not finished)
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/babel-standalone@6/babel.min.js'></script>
</head>
<body>
<div id='app'></div>
<script type='text/babel'>
class App extends React.Component{
constructor(props){
super(props)
this.state = {
textInArea: placeholder
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({
textInArea: e.target.value
})
}
render(){
return(
<div>
<textarea id="editor" value={this.state.textInArea} onChange={this.handleChange}></textarea>
<p id="preview">{this.state.textInArea}</p>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
const placeholder =
`# Welcome to my React Markdown Previewer!
## This is a sub-heading...
### And here's some other cool stuff:
Heres some code, \`<div></div>\`, between 2 backticks.
\`\`\`
// this is multi-line code:
function anotherExample(firstLine, lastLine) {
if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
return multiLineCode;
}
}
\`\`\`
You can also make text **bold**... whoa!
Or _italic_.
Or... wait for it... **_both!_**
And feel free to go crazy ~~crossing stuff out~~.
There's also [links](https://www.freecodecamp.com), and
> Block Quotes!
And if you want to get really crazy, even tables:
Wild Header | Crazy Header | Another Header?
------------ | ------------- | -------------
Your content can | be here, and it | can be here....
And here. | Okay. | I think we get it.
- And of course there are lists.
- Some are bulleted.
- With different indentation levels.
- That look like this.
1. And there are numbererd lists too.
1. Use just 1s if you want!
1. But the list goes on...
- Even if you use dashes or asterisks.
* And last but not least, let's not forget embedded images:
`
</script>
</body>
</html>
My question is, when I click the Live Preview, I can’t see any strings I assigned in the textarea, Only an empty textarea.
Someone please help me
