Greetings. I would like some feedback on my “Random Architect Quote Machine.”
I went through the Front End Development tutorials (Bootstrap/jQuery/React/Redux), and I still don’t feel very confident on creating apps on my own. In particular, I’m still really unclear about interacting with the HTML DOM tree through JS, after leaving the JavaScript section on algorithms and data structures. I plan on doing the React tutorial on Scrimba before moving on.
Some questions about my project thus far:
Can you give me specific feedback about what should be included in my React state? Should it just be the random Index?
In the project hints, you mentioned about breaking down the app into multiple React components? Can you talk about how I should do that, instead of lumping everything together in one React component?
What part of the HTML should be included in the React Component (render() return()), and what part should be written straight in HTML? How do I make that distinction?
Math.random is really interesting. Because I’ve only provided 21 quotes, sometimes the same quote is displayed. Is there a way to make sure that the next quote displayed is not the same as the current one? (Is that just a Boolean statement, i.e. nextQuote != prevQuote?)
Lastly, I wonder if using React to solve this project is “overkill”. Technically speaking, should I just have used vanilla Javascript? Or is that my choice?
Thank you in advance. I know these are a lot of questions.
State is mutable data, that can change on interaction.
This is about minimalism.
If data is computable by using other data, then it doesn’t belong into state.
E.g. when you have quotes in your state, the count of the quotes doesn’t belong into state, because you can compute it from the quotes state.
There is a great section about that in the React Docs
Everything that should get rendered to the DOM goes into the return of the render function. Additional calculations go into the render function too, but not in the return:
render(){
// do some calculations
return (
// what should get rendered
)
}
In your example, you don’t want to clutter the render function with your quotes. You can move them in a separate variable outside of the render. In a real project you would move them even in a separate file or an API.
I think nothing should be written in pure HTML in your example, because it just increases the complexity for a beginner.
Yes, that’s a viable solution. But it also increases the complexity of your code, because you have to keep track of the old quote. But that’s your own decision.
It depends. If you have some solid skills in JavaScript, it wouldn’t be a big problem to build this project without React. But if you want to increase the functionality later, pure JavaScript becomes very complex fast. So this is more of an advanced “it depends” question.
