Hi All,
I’m a little confused about how to set up a react project locally from scratch without using create-react-app.
I’m trying this out with the markdown preview project. I’ve successfully completed it on codepen but I’m stuck on how to get it to run locally.
I’m using Atom and my file structure is as follow:
Currently I have an index.html file where I source from CDN and import my react app (previewer.js)
<!DOCTYPE html>
<html lang="en">
<head>
<!--add CSS-->
<link rel="stylesheet" type="text/css" href="styles/stylesheet.css" media="screen"/>
<!--add icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Markdown Previewer</title>
</head>
<body>
<div id="app"></div>
<!--Good practice to place JS scripts at the end of the body so it does not hinder
the page from loading rather than in the head -->
<!--import JS -->
<script src="scripts/previewer.js"></script>
<!--import React-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"> </script>
<!--import marked -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.3/marked.min.js"> </script>
<!--import prism -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"> </script>
</body>
The code in my react app is as follow:
import React from 'react';
import ReactDom from 'react-dom';
import marked from 'marked';
import Prism from "prismjs";
import styles from '../styles/stylesheet.css';
const projectName = 'markdown-previewer';
// ALLOWS LINE BREAKS WITH RETURN BUTTON
marked.setOptions({
breaks: true,
highlight: function (code) {
return Prism.highlight(code, Prism.languages.javascript, 'javascript');
}
});
/*// INSERTS target="_blank" INTO HREF TAGS (required for Codepen links)
const renderer = new marked.Renderer();
renderer.link = function (href, title, text) {
return `<a target="_blank" href="${href}">${text}</a>`;
};*/
class App extends React.Component{
constructor (props){
super(props)
this.state = {
markdown: placeholder,
};
}
updateMarkdown(markdown){
this.setState({markdown});
}
render(){
var inputStyle = {
width: "500px",
height: "80vh",
marginLeft: "auto",
marginRight: "auto",
padding: "10px",
display: "block"
}
var outputStyle = {
width: "500px",
height: "80vh",
backgroundColor: "#DCDCDC",
marginLeft: "auto",
marginRight: "auto",
padding: "10px"
}
return(
<div className="App">
<div className="container">
<h1 className="title">Markdown Previewer</h1>
<div class="row">
<div class="column">
<h4 className="subHeader">Markdown Input</h4>
<textarea id="editor" style={inputStyle}
value={this.state.markdown}
onChange = {(e)=>{
this.updateMarkdown(e.target.value);
}}>
</textarea>
</div>
<div class="column">
<h4 className="subHeader">Preview</h4>
<div id="preview" style={outputStyle}
dangerouslySetInnerHTML={{ __html: marked(this.state.markdown)}}>
</div>
</div>
</div>
</div>
</div>
);}
}
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.org), 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 numbered lists too.
1. Use just 1s if you want!
1. And last but not least, let's not forget embedded images:
`;
ReactDOM.render(<App />, document.getElementById('app'));
So the problem I’m facing is it isn’t rendering when I try to preview it on Atom.
I believe the problem is that I’m importing wrongly but I’m not sure where my mistake is.
Appreciate if anyone could point it out to me.
Thanks in advance!