Markdown Previewer and Random Quote Machine

Code Feedback
1

So far i have completed 2 project I need feedback so that i can make my next 3 projects much better.

  1. Random Quote Machine
  2. Mardown Previewer

3, What are the things which i would have included in my projects to make it much more better( ex React best practices, conventions , readability and etc) ?

4. What features of react should i use/explore to make my next 3 projects more versatile. ??

Thanks

2

I guess one thing could be using React Hooks instead of components.
Use ES6, such as arrow functions. this way you won’t have to bind your functions.

If your component is taking a function, for example, an onClick function, it’s good to name its prop based on the type of event. For example in Markdown project, Navbar could be like this :

<NavDropdown.Item onClick={props.onClick} />

and in your App.js you would call it as such:

<NavBar
  onClick={this.clickThemeFunc}
/>

this was the code will be more readable.

Other things are based on your own personal taste,

I would put the colors hex in the their own files. It could either be a scss file or a js file. Then you can refer to them from there.

If your code can be broken down to different components, break them down. Use multiple files. This way it will easier to test and debug. React codes are more readable the smaller and simpler the files are.

1 Like