Random Quote Machine try to rewrite in react! Is my code dirty?

Hi!! When the new curriculum is made, i just finished my random quote in vanilla js. But now it is front-end libraries projects, so I took my chance to rewrite it in react!! I’ve been reading react docs for a while but I want to know your thoughts.

How’s overall look, spacing, css practices, is the code clean enough??

Here’s my site: https://jcunanan05-random-quote.netlify.com/

Github code: https://github.com/jcunanan05/random-quote-machine

Thank you freeCodeCamp!!!

Hello Jonathan,

Looks very good, it’s responsive, this very good. Also passes the test, cool.

personally I don’t like that 100vh height for the background, becasue there is some more data as footer. User needs to scroll to catch that part. I think it’s kind of waste of page area. But this is my thought, you may ignore.

I see this is kind of client-server work, since it asks for a quote from an external API and loads it, very good.

Please note lines 7 and 9 of BlockQuote.js, I recommend you escape the literal double-quote as " Considering:

...
<span className="double-quote">&quot;</span>
 {props.text}
<span className="double-quote">&quot;</span>
...

I just tried some random quotes, and hopefully it didn’t came up with same quote serially, very good. Not sure if I was lucky(I think I was),but please consider, even you choose the quotes randomly, this is possible to the new random quote is the same as just provided recently so user see two exact same quote.

I don’t know if it’s possible with the API you use to tell it exclude some quotes you got recently(maybe using id if possible), but even if it doesn’t support it, you may do this in your client. Just before you show the new quote, check if it’s same as currently one is showing, if yes then ask for another quote till you grab one unique/new.

One thing I really don’t like about dynamic data and UI/UX is the location of controllers when data is changed. This is not critical, but not very pro.

You can experience it too, this is easy. Just press the new quote several times. You see becasue some quotes are long, and some are short, it moves the new quote up and down, and user need to jump the mouse pointer to perform new request. This is not pro comrade.

One good fix is replace the new quote somewhere you know it never will moved based on new quote text length, maybe top of the form.

or maybe give a constant height to text section(I don’t recommend this way) so new quote button will be at its place, but remember to let the text container scroll when needed, and also let user resize it too.

Overall looks good Jonathan, you really work good comrade.

Keep going on great work, happy coding.

Edit:
(sorry forgot to answer your question)

Honestly didn’t check you all codes, since they were too much! And they seems working! but one thing I would to tell you, and I believe you already experienced is about using libraries and frameworks like react, …
I’m not telling you to not use them, but you know sometimes it doesn’t worth to code too much for a small application like this using react. I believe this could be much simpler, and less complex using pure JS.

Happy coding.

1 Like

Hello again!! You hit the marks again NULL_dev! Thank you so much again for the pro feedback .

Ohh I get what you mean, the constant resizing of the container right???

This is a good idea!!! I’ll put this on my things to work on as this can make me greater at data structures.

And yep!! You’re right about that. This is just me experimenting in react. This is overkill for a click event. Actually this is a rewrite from vanillaJS because the challenge in fcc is to write using a library. And i took my chance to rewrite it in react. I felt it too, that it is easier to write in vanilla after finishing the project. =))

But as always, Thank you for the thorough feedback!! @NULL_dev