Gotta React

So after trial and error, and asking around (and looking at huge codebases) I’m getting a pretty good grasp on building a react app from scratch in terms of how to go about it. Though to be completely honest, as I’ve been just creating applications that I’ve thought up, path of creation becomes obvious in some ways and kind of oblivious in other ways. I definitely have to make a quick diagram to understand where my data flow is going to be, and which components will be stateful. I highly recommend diagraming it and start with hardcoded data. Start off with static components, at this point react components will do little more than render HTML. Clicking on buttons won’t yield any behavior since no interactivity has been added just yet.

Next, figure out what the state(s) will be for the application (you might be wrong when you start hardcoding…which is why you hardcode some fake data first to figure out if your guess is right) and also figure out which components will contain the state.

You now have dataflow figured out (at least from parent to child) and figuring out the inverse of child to parent is pretty simple at the point

This will leave the top level component that fetches data (Axios go!) from the server and distributes it to the child components (You’ll likely stumble upon this realization as you’re learning all on your own. I did, I made an app where I fetched data from a server in like 3 different components before realizing I could fetch it from the most top component and distribute it to the necessary components.)

So basically a good way to look at going about creating a react application from scratch is:

• You gotta break the app into components
• Diagram how the components will flow
• Build a static version of the app
• Figure out which of the components are going to be stateful (It should be fairly straightforward really)
• Determine in which component each piece of state should live
• Hard-code initial states (this gets kinda tricky depending on how deep you’re going…enter redux at some point)

Have fun!