When your specialty and passion is for well-designed pages which you apply deftly with a keen eye and infinite patience for CSS, it is painful when you are under a time crunch and have to produce something ugly, like I've done today, and call it done. I wanted to copy the Facebook registration page and get it working in React. Did I succeed?
Facebook original:
My clone:
Purpose
I liked the simplicity of the Facebook login page that I copied on Day 2 so when I wanted to knock out a React project today and get some form practice in I went back to copy their register page. Creating a modal from scratch in React quickly became too difficult for my 10 PM brain so I just made a div to hold the form and made it look like a modal in the center of the window. It did end up being great practice creating controlled components, because user input is a bit more complicated in React than in standard HTML.
To Bootstrap, or Not to Bootstrap?
I work all day in Bootstrap at work and use it frequently in projects so when the time came today to make another form-centric React project with uniform inputs and spacing, today I shrugged off the old Bootstrap CDN in favor of writing my own styling. (The habit is so ingrained that I actually think I included a link to the stylesheet CDN in my html page but never used any classes from it.) And thus, the spacing and some of the general feel of this thing is obviously off.
Takeaways
There was not a ton to take away from this project except some practice setting the value for different types of inputs and having a working onChange function that worked for all inputs. It's actually very satisfying storing data in state and having it be available throughout the app. I print a JSON version of the app state on form submission, but obviously it could be used to create an account and for authentication, etc.
That's it. See you tomorrow. Maybe then we'll know who the President is. Fingers crossed it isn't Kanye, as much as I love the guy.
github: https://github.com/jwhubert91/100daysofreact/tree/master/day-5-register
deployed site: https://100-react-projects-day-5-fb-register.netlify.app/
Follow me on my fancy new Twitter:
www.twitter.com/jwhubert91
Top comments (2)
I like your diary of 100daysofcode. Go on! :)
Thanks!