Markdown (review)

[xavierartot]

Can you review my project Mardown FCC, I think is done

markdown - CodeSandbox

I don’t really understand why do we have to use SASS here?
It’s really weird, React clearly don’t fit with a preprocessor.
I have almost no CSS to feed I just painted.

[borisyordanov]

You should starting using SASS because it’s very popular, useful and you might as well get used to it. React works creat with preprocessors if you have a good build config. It’s not the ideal decision for this project, but it will help you learn.

I don’t see bootstrap in your package.json, but in your Readme you say you use it. Why do you even need bootstrap for such a small project? Consider getting rid of it.

SASS

• Code isn’t tidied up
• Overriding library classes is a bad idea
• Try variables (just for practise, i realise it’s not practical if you have 20 lines of SASS)
• Import bootstrap in your SASS from and npm package don’t import it from a CDN

JS

• Consider not using a constructor - https://hackernoon.com/the-constructor-is-dead-long-live-the-constructor-c10871bea599
• You init some date in your constructor but also on componentDidMount? Why?
• this.state.md is bad naming, just name the key “markdown” or something it’s clearer
• The code on line 63 is unnecessary, you don’t need to use js to get data. Read - https://reactjs.org/docs/handling-events.html Use the state and props to pass/get data
• Your implementation of marked is a bit iffy. Read this - https://stackoverflow.com/questions/34686523/using-marked-in-react and perhaps consider a library that has React components
• Eslint can tell you most of your other mistakes, you’re missing a lot of semi-columns, here’s one other way to improve your code

const MarkDown = (props) => (
    <div className="col-6">
        <h2 className="">HTML</h2>
        <div className="display-md"></div>
    </div>
);