Second day of my every-other-day-React-project-progress-posting (I need a better name… suggestions, anyone?), with the Day One posting here for those curious: Day One: Create-React-App with Mocha and Enzyme – with No NPM Eject!
Task One: File Organization
So, I was creating the directory organization for NextBus Compare. Looking at my previous sketches of possible file structure for my project:
plus being so new to Redux, I am going to stick with the tradition method of organizing it by function/nature. For those who want to read about React file organization, there are 2 articles that I found useful:
- A Better File Structure For React/Redux Applications by François
- React Apps: Approaching Organization / Structure / Architecture by Mikey Murphy
They each called the typical organization method different name – function or nature centric. François also advocated for what he called a domain-centric approach, while Mikey went with a feature-centric approach. I have personally done domain-centric before, and did like it quite a bit. For this one though, I am going to play it safe because my focus is to learn Redux here.
So here is my current file structure:
Task Two: Writing Test Files
Once there are new files, I tried to write test files to make sure all the files are loading, even though they only load empty div at this point.
Then I slowly realize that every googled posting for Mocha/Chai/Enzyme seemed to have different but very similar syntax. Therefore, I have a lot of tabs open but is very confused.
Eventually, I just close every tab, and search for the documentation for Chai and Enzyme. Restricting my reference source made it easier. Here is one of my test file: