It's probably not a surprise to find a blog about technology discussing React. But despite that I decided that I would discuss my thoughts on React and the Single Page Application pattern. I also thought I would take the time to try to define terminology that novice users might find helpful.

Why React?

For a long time, I thought "its VanillaJS or the highway", so naturally the above was one of the many questions I had when I was told I would be using React. I've been burned by frameworks in the past (a story for another day) and frankly wasn't very excited at the prospect of another one. At the time, I had heard nothing about React and, honestly, it was a bit like living under a rock. Once I dived into the murky waters of using a framework, an idea I so hated, I was truly blown away by the amount of stuff React did for me.

So What Does it Do?

Put very simply it makes a Single Page Application feasible. I had never needed such a thing and being thrown into a project class with not a care in the world about APIs, SPAs,  and States proved to be quite interesting. It didn't take long for me to see the value in using React because it allowed me to rapidly develop a user interface with features to boot in the same amount of time it would have taken me to build a Server-Side Page in PHP. The difference was that the components I produced were modular. While I was still learning and props continued to elude me I was a bit confused as to how this was any better. But the reusability combined with callbacks to parents was a boon once I finally figured out how such things worked.

What Are Props?

Okay, here's the part that people just won't tell you for some reason despite hours of googling. Props are short for properties. And since every component is either a function or class, you can handle the data passed through props in either the function or constructor definition respectively. The more interesting thing about props is they can be updated and doing so will typically trigger your component to re-render with the new property without losing the state of said function or component.

So What Is State?

State is basically how a component remembers everything it needs too. So when you take in two strings and concatenate them it has to go somewhere so that when you render it you can access the data. This is a very simple, contrived example but nonetheless it applies and hopefully illustrates what state does.

"You Didn't Mention Routes but I Wanna Know!"

Routes are a way convenient way to represent different "pages" in a single-page application. Instead of the browser firing a request to the new page on a website, the Javascript simply says, "the route looks kinda like this path so I'm going to display this component associated with the path." Routes are also useful for indexing purposes by a browser.

Conclusion

So, React isn't for everything but most of the time it is a great way to add dynamism to your website. The only real concern about moving this direction is that it is not compatible at all with old browsers and it is becoming more and more difficult for services like the Internet Archive to truly capture the content that exists on website. Particularly because they don't index APIs. This is a legitimate problem that has yet to be resolved and it will be interesting to see how this turns out in the future. As always, I hope you enjoyed this article. If you have any comments or questions I'd love to hear them. Until next time! :)