This project was bootstrapped with Create React App.
The plan was to first make the UI, because this is where I would use the bigger part of the time. This being creating the basic components, and provide styling. After that I'd start the internal logic of the form and tie it all together.
I considered making the Form component handling the state for all inputs. This would've made it easier to handle simple input fields using just the name attribute. It would also make the onSubmit event simpler as it would just proved an object of data the consumer could care about. But, it'd also require a different approach to custom inputs like Dropdown where the onChange even would have a different flow. Not impossible, but it would alter the data flow I had used up to this point.
Conclusion: Form is stateless, and the onSubmit event only exists to tell the form
state handler that the submit event has occured.
Create-react-app comes with what to me is a ton of benefits; One does no longer have to care about updating the single components of a React setup. For instance react-dom version, webpack, jest and other tools. It also provides a sensible webpack configuration with a bunch of smart functionality and well tested configurations. It also provides a default jest version that's tested with the current React version.
SCSS rocks! And to add support for it with react-scripts, the only thing one has to do is installing this package.
A neat way of doing conditional classnames for components.
Reboot is the CSS reset from Bootstrap which provides a nice way of ensuring the baseline for your DOM looks the same across all browsers.
As the size of this application is set, I felt for going with doing the UI library myself. It's not very complicated, and does not set requirements for e.g. complex grid behaviour. I considered both Bootstrap, Semantic UI and Bulma, but concluded I could handle this myself.
In retrospect I think I should've gone with using react-final-form which is a library for creating and controlling forms. It provides a nice solution for state management, whilst opening for things like good validation and error handling, which is the part I am least happy about in my own solution.
I would want to spend more time on accessibility to provide better context for screen readers, and ensure that components like the Dropdown works properly with a screen reader and arrow key navigation.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify