I am finishing up late again today so will be light on the verbosity and heavy on the brevity with this blog post. I have been studying React forms and user input recently so I wanted to put out a small project that did this well, as well as kept user input in the form's component state.
Summary
I am still working up to the todo app I promised yesterday. After studying on my own for a bit I just didn't get around to worrying about those getters and setters. That said, this simple login form mimics the lord, creator and overseer of React's- I'm talking about Facebook. Who better to copy for a React exercise? Here is the original link (you have to be signed out- and you'll need to be on desktop) and here is the my deployed copy: link.
Facebook login:
My clone:
Key takeaways
- After whining about it yesterday, I went out and tried to find a replacement for create-react-app and alas, I found a great one in
npx nano-react-appwhich I read about first in this wonderful Hackernoon article. It's much lighter, the documentation is friendly, and it's well maintained. The only huge difference is that after the build step you will want to deploy the dist folder instead of a folder named "build". That's about it! - Working with inputs in React is a whole new ballgame, and involves quite a bit more steps than in pure html. While browsers have built-in support for html, with React you need to actually create state to store your data from the component. Then you need to write an onChange method in the input's JSX. Working with data and passing it up to App-wide state from a component is actually something I still don't totally get yet in React so I'll try to do something in that vein tomorrow.
Day 2 of 100 React projects for #100daysofcode down! So far it's taxing but fun, and definitely a great exercise for shoring up knowledge gaps and practicing skills that otherwise too-often exist solely in the void of tutorials. I'd encourage anyone thinking about it to start the 100 days challenge soon- you'll only be a little bit behind me :)
Find me on my exciting new dev Twitter: https://twitter.com/jwhubert91
Oh and here is the repo for today's project:
https://github.com/jwhubert91/100daysofreact/tree/master/day-2-fb-login-form
Top comments (0)