Getting Started

Alright, so you've downloaded the source code, you have a dev server running… now what?

Video Summary

In this video, you'll learn about how projects in this course are structured:
- The README.md file is your home base. It includes detailed instructions to guide you through each step in the process.
- The docs/end-result.html file provides an example of the raw markup we hope to wind up with at the end of this challenge.
All CSS is provided ahead of time, inside styles.css. As long as you follow the suggested markup, you won't have to fuss with any CSS.
New components can be generated with the new-component NPM script.

One small caveat I forgot to mention in the video: the end-result.html is meant to serve as an example. Your final markup might not look exactly the same, and that's OK! In particular, there is no validation in the provided markup, which probably isn't ideal.

“Delightful” file/folder structure (info)

As shown in the video above, each component is given its own directory, with a peculiar structure:

src/
└── components/
    ├── App/
    │   ├── App.js
    │   └── index.js
    └── Game/
        ├── Game.js
        └── index.js

You might be wondering why I've structured things this way… it seems pretty over-engineered, doesn't it?

Over the years, I've experimented with lots of different file/folder conventions, and this is the best structure I've found. It solves a number of small-but-annoying problems.

I go into detail about this structure in my blog post, “Delightful React File/Directory Structure”. I'd suggest giving it a read if you're curious about it!

This pattern is also much easier to follow with the new-component package. It's been installed automatically for you in this project. To install it in other projects, you can follow the instructions on GitHub.