My Photohub

My Photohub

The idea for my photohub is a very cool one, essentially a UI for uploading images to a github repository.

The project is in its very first stages now and just finding its legs and it's great to be a part of that start. I noticed that there was no linter config file on the root of the project and so I decided to add linting with eslint and a .eslintrc.js config file.

Things I learned

I don't think I have linted a react project before so I did not realize that the regular es lint would not cut it, it was giving me linting errors for the use of certain characters I knew were properly being utilized within the context of a React page such as JSX. I went online and found that there is in fact a plugin that has a lot of the recommended alterations ready to go, plug and play style called eslint-plugin-react which you can specify in the .eslintrc.js file along with a few other alterations like detecting the react version and adding jsx to parserOptions.ecmaFeatures. Which once I did I was still getting errors but ones that were more apropos our React syntax.

From the linter I learned that it's apparently good form to always validate your props types in React. We had a few functional components in the project that were being exported in the same line they were being defined, separating the export and the function definition gives us the space we need to bring in prop-types and start validating we are using what we expect to be using in our component.

So I got to work separating the exports from the functions and adding a .propTypes check for each of them. After that and adding React to some import statements (not sure why the linter was complaining about this), there were no more errors and I was ready to push.

Revisions

Taimoor Dawami suggested that I add prettier formatting and some instructions on how to use the linting script and the formatter in CONTRIBUTING.md and so I did both of those things in subsequent commits.