Random Quote Machine built with React

Code Feedback
1

I built a random quote machine and passed the tests.

I did screw something up with the way that it loads and displays the page on load. For an instant it shows default text that I don’t want. I suppose I could set the default values to null or an empty string. Not sure if that’s the right way to fix it. I clearly need to study state management some more.

(Is it totally or only mostly fraudulent to say I now know React?)

2

It is mostly :wink:

Some strange patterns to fix and everything will look OK.

const quote = () => {
  ReactDOM.render(<QuoteMachine />, document.getElementById("root"));
};

quote();

You generally don’t need to wrap code in function just to run this function immediately after that

The way you’re using outside-of-class stuff is a bit redundant. Class components give you ability to store a state, to fetch initial quote on mount and to have getQuote function as component’s method

1 Like
3

Hey Dante,

great job so far! :clap:

My ideas:

  • when I request a new quote, the height of the quote box “jumps”; personally, I don’t like this behaviour

  • you can increase the overall readability of your page by adding some more spacing, e.g. between the bottom buttons and the bottom border

  • when I decrease the width of my browser under 700px, the content becomes very hard for me to read; I think an increased font size and some padding around the text would be awesome

I guess it depends on who you want to tell.
If you want to join the Facebook React core team, I think you should probably do some more stuff :stuck_out_tongue:
I think something like “Had a look into it and built a small project that fetches data from an API” is fine.
The next bigger step would be using React with NPM and a toolchain like create-react-app.

Keep up the good work!

1 Like
4

Thanks for the feedback. I made some of those changes already. I’ll have to work on the others and probably more.

I think I took the next bigger step.
Here it is deployed using Netlify: https://kind-jepsen-6684b8.netlify.app/

1 Like