Day 9, created on day 12. I've got a couple of projects of catching up to do. That said, this was a fun one. My boss actually recommended this and I'll probably have to do something like this in pure Javascript later this week.
The idea is that online banking is still pretty far behind the rest of the tech world's UIs. So here we allow the user to type information into a form and see the check generated in real time to better confirm the data before submission.
The Build
This application has four components: App, Header, Form and CheckContainer. Once again the data for this project lives in the main App component's state as does the dataHandler function that stores the input text. That means we need to pass the handler to the Form component through props.
Keeping data in App state ends up working flawlessly here because it allows us to then pass that same data to the CheckComponent to render in the check UI.
Takeaways
This type of project is a sad reminder that so much of a project's time can be spent perfecting CSS, even for something as plain and unwelcoming as this little application.
That said, React's native JSX made this possible with far fewer lines of code than you would have to use to implement this in vanilla Javascript.
That's it for day 9. Check out the links below:
Follow me on Twitter! @jwhubert91
Top comments (0)