Part 07 - React Sidestep 1

A (very brief) introduction to React

Last updated by Red Cap Tom on June 24, 2020 at 12:31 +0300

This is no longer maintained

This tutorial series was cowardly abandoned by its creator mid-way due to (exciting!) circumstances. While I can't promise I'll ever finish it, I hope you found some of it useful. If you really-really-really-really want me to finish it, nag me at hey@redcaptom.com.

The Video (Scroll down for the article)

Coming soon!

Why React?

react-logo

A note about this article vs. the video

The articles for parts 1-8 in this series were written after recording the videos. This means that in many cases, there are style (or actual) differences between what's in the video, and what's in the articles.

Also, If you're here while not all the articles are fully written - apologies! I am in the process of transcribing, editing and uploading them here and in dev.to.

Note that while I try to convey the same amount of information in both venues, I (more often than not) fail miserably. I generally prefer creating new content to refactoring old one, so this process irks me and in the process of just getting it done I'm cutting corners.

If the article doesn't feel “complete” enough - please watch the video. Oh, and tell me that I need to step up my game! We're all in this together, after all, aren't we?

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!

An offer

If you're working on a Shopify app, and your app uses Polaris for the front-end, I want to hear from you. I am willing to sit down and run a debug session / add a new feature with you for your application, if you agree to stream it live with me (or record it and publish it later). It's not easy writing a full-stack JS app, doubly so when you're not from within the ecosystem. Let's do it together and help all the people! :)

E-Mail me at hey@redcaptom.com, and let's set it up.