Shopify App From Scratch #7 - React Sidestep 1

Deprecation Notice

Yeah, yeah, I know. I hate it too when people abandon tutorial series mid-way. But, due to (exciting!) circumstances, I'm calling it quits for now.

I'm thinking of just dropping a link to the full repo here - it's a mess, but it's something you guys can chew on instead of my empty promises.

If you'd like me to drop it here - let me know at [e-mail].

And, just sayin', I had a BLAST doing this. If you know something - anything - about technology, take the time to write it down as a tutorial series. You will get SO, SO much value out of it, you can't even believe it.

Until we meet again - RCT :)

The Video (Scroll down for the article)

Coming soon!

Why React?

All right, so why should you even take the time to learn a new JS framework? If you're like me, you come from a PHP background, and grew up writing applications that consist of a php file that is generated dynamically from the server. If there's some form on the page, then when the user clicks it - the information gets send back to the sever, and the page gets rendered again (possibly with newer information). This used to be enough for a very, very long while.

It is no longer enough, though. When I'm looking at applications today, they're less like the web sites we had growing up, and more like our desktop applications, right? And the reaction I get when I tell people they should learn React is "I already know PHP, and maybe even some jQuery - why do I need React?".

The honest answer is that you really don't have to learn React. The kind of fuller answer is that if you want to match the experience that other web sites are providing for their users, you might want to consider adapting the same technologies that they are accustomed to dealing with.

As you probably already know, copy-pasting in the exact same way from other people's work is kinda problematic. What is perfectly OK is to draw inspiration from the feel other makers imbue their products with, and strive for the same aesthetic in your stuff.

Remember the end user of your application? All they probably care about is that your app feels comfortable, familiar and that it works. React, one of the main tools used in creating interactive web UIs today, can do just that for you. I think the average end users of the world would be very happy if most websites would feel and look the same from the functionality's perspective. That buttons and forms and sidebars act in the same way that they expect them to, instead of changing drastically from site to site. This lowers the technical barrier of entry into computers that a lot of people have.

So you should do it for the end-users. But really, you should also do it for you. The biggest benefit of React is composability and portability of components - write it once, use it everywhere. The encapsulation of code into components allows you to easily mix&match parts of your application to get the feel you want, and to re-use existing components from other people with the blink of an eye. This is insanely useful, and if you're writing without it you're missing out on a great ecosystem.

And honestly, it's just fun. I keep telling people that React changes the way that you think about development. I think more than any other technology that I've seen in the past, it really tries to get you to think declaratively first - on the way things will feel, instead of how easy it would be to build. This might not make much sense now, but bear with me - I will try to pass that sentiment on in the rest of the tutorial series, when we will actually build the app.

A note about these sidesteps

Note that my sidesteps do not intend to teach you things from scratch. They're intended to give you "hooks" (mind the React pun, please :) ) to allow you to read and understand different parts of the relevant technology. I urge you to go and actually learn these concepts yourselves if you're so inclined, but still attempt to give you a "fully-featured" tutorial right here and now.

React Itself - In The Next Video

I make a pretty good walkthrough of our makeshift app in the video, showing the different parts that can be made better using React. I think that the value itself will not become obvious to you until you start creating interfaces with it. After going over the initial learning curve, it's truly a remarkable piece of software to use. Follow the videos and the next two articles, and you'll begin to see the beauty:)

The next video will be a bit more hands-on than this introductory one - stay tuned!