I finally finished my first project for the Frontend Libraries Certification.
I really struggled using React in the beginning because:
(1) The tutorial parts seem to be a bit outdated after I found that React has officially recommended using Functional Components instead of Class Components;
(2) Using Redux to manage states seemed like an overkill for a simple Random Quote Machine web application. It appeared to me that using React alone was enough for at least this project.
In the end, I just decided to stick to the simpler officially recommended approach.
Do you think I should also get familiar with using Class Components?
This brings me to another question, which regards using Codepen. I noticed that I had to write all the code in one JS (Babel) file instead of breaking them up into component files. Writing everything in one file turned out more difficult to manage once there were more and more code. Breaking them up into component files seemed easier to me. So, I decided to run development, debug on my local environment - VS code, and deployed the app on Firebase. The link is here:
(I am also happy for constructive feedback)
My general problem is I do not know how to run testing on the app I developed locally. I haven’t got to the part where I learn unit testings. So, I just relied on reading the user stories and checked the functionality of my web app manually. If there is no apparent bug, I deploy the app on Firebase and submit the live link to claim the certification.
The React section on FCC was designed to get you familiar with the framework, and its out dated. I would move on its only a matter of time before ES6 takes place of ES5 as an example.
You should follow the instructions regarding the second question, but if it passes so much the better. I did a lot of challenges that said to use react and redux, but do to their complexity I stuck with HTML, CSS, & JS without any issues. Good luck
I would argue that using redux for most of these projects would be overkill because they are smaller in nature. The only one, where I could possible see if would be the last one 25+5.
IMO, you should consider using a state management library only when needed.
Typically that would be for larger projects outside of a class.
I think codepen is great for small HTML, CSS and JS projects.
But when it comes to frontend libraries other sites like codesandbox are better IMO.
Because it is standard to create multiple components in different files and import them as necesssary instead of throwing everything in one file
When developing locally, you can use the fcc test suite to ensure that the user stories pass.
If you wanted to add more tests on top of that, then you can start learning about basic unit testing.
The basics don’t take long to wrap your head around and it is something you will need to learn anyway if your goal is to work as a developer.
You should add the test suite mentioned in the directions here
If you plan to work with React, then knowing class components can be necessary, but I wouldn’t suggest using them otherwise (I guess except for error boundaries).
If you want to learn Redux it doesn’t really matter if your projects need it or not, and the smaller the project the better (for learning). But yes, Redux is overkill for most simple SPA projects.
Something like Stackblitz or Codesandbox is much better for framework code than Codepen.
Add the test script to the HTML. The tests from the test script has to be passing before you submit.
BTW, if I save enough quotes to were there is a scroll overflow I can’t read the first quote (it is hidden behind the UI) it is caused by justify-content: center on the wrapper.
Thanks for the advice and feedback!
That overflow issue got me scratching my head for a while. I tested it on my mobile device, and there is no overflow. The issue only seems to persist on the web browser. Looked for solutions, none really helped.
I think sometimes I tend to do things CSS-wise just on half-autopilot mode without thinking much about what’s going on behind the curtains. Another habit that was helpful at first but comes to shoot myself in the foot in the long run
hi, I fixed the overflow issue. Thanks again for the feedback. I have a follow-up question.
Before fixing the issue, I tested it on different browsers and saw different browser behaviors towards the overflow issue:
Safari seems to have no overflow issues, regardless of opening web app on a mobile device or a laptop, whereas both Firefox and Chrome seem to have this overflow issue.
Do you know why this is? It seems to me that different browsers handle the same layout and CSS properties a bit differently from each other. Is there any official documentation of such differences?
Don’t know why it would be different in Safari. It should do the same flexbox distribution/alignment.
It happens in other examples, like a horizontal image carousel with an overflow scroll. If you do a flexbox row justify of center, it will (should) cut off the start image.
