Markdown Previewer - Frontend Libraries Project! Feedback needed!

Hi! I’ve finished the project for markdown previewer! from the frontend Libraries Project! I’ll appreciate anyone who wants to check my code and see what can i do better, and what things i need to change! Thank you very much! Here is my code!

It looks pretty good.

If I put on my nitpick hat, if I were reviewing this as a PR at work…

The method parseMarkdown seems unnecessary, I would have just done:

<div className="preview" dangerouslySetInnerHTML={ {__html: marked(this.props.markdown)} } id="preview" />

And MarkdownPreviewer could be a functional component:

const MarkdownPreviewer = () = {
  return(
    <div>
      <Editor />
    </div>
  )
}

For that matter, why are we wrapping it in a div? Editor is already wrapped in a div. We could just simplify this as:

const MarkdownPreviewer = () = <Editor />

Which raises the question why we even need that component.

I guess it would make more sense if Preview were inside MarkdownPreviewer, which it probably should be. This is the only serious complaint I have. If you moved that here, then you would need a div (or a Fragment) to wrap it.

The other components could be functional components with hooks, but let’s not worry about that right now. I do find them unnecessarily verbose. One of the things I don’t like with how React is taught is that they teach that everything is a class and every class needs a constructor. You can set your initial state directly as a class property. And you don’t need to bind this if you define your methods as arrow functions (which just inherit the enclosing this). So, we could do:

class Editor extends React.Component{
    state = { markdown: defaultText }
   
  handleChange = (e) => {
    this.setState({
      markdown: e.target.value
    })
  }
// ...

Which gets rid of 7 lines without loosing any function or clarity.

But those are nitpicky things. All in all, it’s well written, well organized React code. Have fun on the next project.

Thank you very much for taking your time to check my code, i appreciate every single advice that you give to me, it was really helpful thank you!
All those advices are making me better coder even though you call it ‘nitpicky things’ i consider them ‘advices that i will be grateful in a future’.
I will make those changes…!
Thank you very much!

1 Like

Pretty soon you’ll be doing it for someone else. That’s what we do here.