Feedback for my Markdown Preview

Code Feedback
1

Hey everyone, here is my Markdown Preview Project

https://codepen.io/Wanela/full/zYNxrmm

Any feedback is appreciated!

2

You shouldn’t be using “document.getElementBy…” everywhere. It’s not very React-y.
DOM manipulation should be left to React. You should just pass a prop to the component and then component should change it’s appearance.

1 Like
3

When I was writing this code i thought it looked a bit messy? but I didn’t really know how to change that.

So, for my example, I would make my <Markdown /> component have something like editor-fullscreen: false , and prewiew-fullscreen: false , in its state and pass that down to the <Editor /> and <Preview />, and pressing the fullscreen button would change that state?

But what then? Wouldn’t I still need to use getElementBy... to change the CSS?

4

This is how you could do it:
https://codepen.io/jenovs/pen/mdRMPNE?editors=0010

1 Like
5

Oh, wow, thanks for taking the time to write this all out! I think I get it now, I’ll try to rewrite it on my own when I’ll get the time.

6

Ok, I fixed it up a little, based on jenvos’ suggestions

https://codepen.io/Wanela/full/vYgemwB

It is definetly more React-y now~

7

Couple remarks:
1) If you’re using return in if you don’t need else
2) You can replace handler functions with arrow function and then you don’t need to bind in constructor, and if there is only call to super you can remove constructor altogether.
3) You can put state in the class body (as class property, without this) instead of constructor (and get rid of empty constructor).

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.