Enterwell icon
Vedran Blazenka

React: A guide to making apps that someone will gladly pay for

Greetings, dear visitor. This is our attempt to summarize what it takes to become a React developer. This is not another TO-DO app tutorial. Instead we will try to show a clear path that you should follow in order to understand the basic concepts behind React and in the end to be able to create an React app that someone will be happy to pay for.

If you know these things, Enterwell would gladly have you working with us. And I am sure several other companies would also be happy to have you.

Intro and motivation

Again, for some time now I get a lot of questions like:

I would really, really like to learn this React. But it is so complicated and it has a million little buzzwords that I don’t understand. WTF is webpack and how exactly does it relate to Flux.

Stewart Stu Dent

or

I started learning React a few years ago. It is so complicated and it has a steep learning curve but I think I’m getting ahead of it. Just last week I started learning React Mixins and, let me tell you man, this is the future!

Dave Eloper Sr.

Just to be clear: we won’t talk about Flux or Mixins here. Please don’t google what those are and continue to live your life happily 😀👍.

As you can see, many people want to learn React because it is a great tool for building rich and robust web applications. If you start learning React you will find more than enough content online: to-do app tutorials, redux to-do app tutorials, old webpack configurations which don’t work anymore and so on. When you try to google React I’m pretty sure you will end up with some kind of anti-pattern in your code or with something that should not be used anymore.

So we decided to lay a simple path here:

  • You need to understand the basics of good old HTML, CSS and JavaScript
  • You need to go over main concepts in official React documentation and you need to follow their examples
  • Your apps will need app state management so you need to learn how to use MobX
  • And the last thing is to learn about MVVM architecture which is used to create production-ready React applications

I will explain the basic concepts here and give you links to several tutorials that I found to be pretty useful and straight forward.

If you follow this tutorial I am sure that at the end of it you will be able to produce React applications that someone will gladly pay for.

So, shall we?

Web development basics

Please don’t skip this. I can’t emphasize enough how important it is to understand the basics of web development.

React is powerful, but at the end of the day your React apps are translated to good old HTML, CSS and JavaScript. If you don’t understand web development basics there is a slim chance that your React apps will be good in the long run.

HTML

HTML is the fundamental technology used to define the structure of a webpage. You use HTML to define how your content will be recognized by the web browsers. You need to learn how to use paragraphs, lists, headings, images and so on.

React is a library used for rendering our components and views in a web browser. While developing in React you will define your component by using JSX. JSX allows us to describe what the UI should look like in JavaScript. In the end, JSX is compiled to HTML.

So if you know how to write good HTML then you will surely know how to write good JSX. But if you are having problems with HTML, you will definitely have even more problems with JSX.

There is no better place to learn HTML than HTML tutorial by Mozilla. I suggest you learn and understand the following chapters:

CSS

CSS is used to style our components and create good-looking web pages. In HTML we define the structure for our components and in CSS we define the style of those components (how they will look, where they will be positioned, …).

In the beginning of the web we could do styling directly in HTML. But that wasn’t good because there was no reuse and it would become pretty complicated pretty fast. And the code you produced would be hard to read.

Today we have many ways to style our components and many of them are trying to re-invent the wheel. But all of them are translated to CSS at the end of the day.

So I feel strongly that in order to style your components all you need to learn is CSS. After some time you will start using SCSS which is pretty similar but more convenient. And that’s it 😄.

Of course, we live in a world where JSS is a thing, but if you understand how to use CSS you will catch up on JSS in no time.

Once again, our dear friends at Mozilla come to the rescue with their CSS tutorial:

JavaScript

Well, as you know by now, React is just a library for JavaScript. In order to be a good React developer you must know how to develop in JavaScript.

This is especially important because React ecosystem includes a couple of new technologies: ES-6, babel, webpack and so on. And same as before, those high-level tools are used to make our development experience better, but our code will be transformed to plain old JavaScript.

We don’t want to be overwhelmed with this new technology and think that React works by using some kind of magic. So I think it’s a pretty good idea to learn JavaScript basics and gradually upgrade on that.

So, thanks to the good folks of Mozilla, once again we can learn about the wise ways of the web:

You see. Good stuff.

Red Porsche’s, rare portraits, rare guns if you dare come near the fortress – Jay Z

React

Finally! Here we go. Jump-start that fine React development thing. First I will give you our view on React and after that I’ll link some high-quality learning resources.

First we need to define what we are building here. With React we are usually building client applications. Something like mobile apps, but we run them on the web and in our browsers. This usually means our data is saved somewhere on the remote server and we are giving users the view of that data. Thanks to our apps users can also manipulate with data that lives on our server.

View, data and logic

Every app has 3 major components: view, data and logic. If we want to build robust and maintainable applications it’s a good idea to separate these three components.

So how does React help us there? React is like a rendering engine for the web – you prepare your data and React will render the views that present your data. In general, every React app has the following life cycle:

  • Step 1: you prepare the data that you wish to present
  • Step 2: React renders the views that present your data to the user
  • Step 3: User does something (for example: clicks the button)
  • Step 4: Program logic changes your data
  • Step 5: We are back on step 1: you have your new data and React will update your views

 

React app lifecycle: prepare data, render, user interaction, data change, repeat.

If you look carefully, you will see that React will automatically update your views. You see, React is declarative and that comes with several cool features. But what does this mean?

In React you will define how your views should look. And when you change the data, React will immediately render your updated Views.

If you are using jQuery, after you update your data you will need to tell jQuery exactly what to do in order to update your views.

I think this is the most powerful thing with React: you just need to update your data and React will take care of view rendering for you.

Now it’s time to look at official React documentation. You will learn how to create simple React applications and you will learn about basic concepts of React. Just follow this list:

App state management

After you have understood the React documentation and tried to create your first React app you may have seen something strange: your data, your logic and your views are mixed in the same file.

We’re not getting that data, logic and view separation that we talked about in earlier chapters. That’s wise only if you don’t respect your time and hate to be happy.

The next thing you will see is wrapper hell. If you need to share data or functionalities with other components you need to use props. It’s ok if you need to push your data just one level below your current component. But component trees quickly become complex and you find yourself passing props several levels deep.

The main problem here is that your data is not necessarily connected to your components but it lives within your components (component state, that is).

We need some kind of mechanism that will be disconnected from views and components. It will live independently from the views.

It’s a good thing people invented state management libraries. State management libraries have nothing to do with React but they can be connected with React. That’s the first step to separate data and views.

Mobx

You can see a lot of advice on the internet about what to do with app state management. I decided to ignore most of them and subscribe to the ways of MobX by Michel Weststrate. Thanks Michael.

MobX – “Half the code, twice the fun”.

Before we say anything more, please follow MobX documentation:

What to do with MobX

So here is what you need to do with MobX:

  1. Create your stores and keep your data in them
  2. Connect your stores with React components
  3. Connect your actions with React components
  4. When user clicks something, your action will update the store and MobX will tell React it needs to update
  5. React will, as always, quickly and effectively update your views
  6. You will be happy because of the elegance of this solution 😁👍🍻

But I need real world example

Say no more: https://github.com/gothinkster/react-mobx-realworld-example-app 😁

This is not mandatory, but you can take a look at this link and see how to create real-world app by using React and MobX.

Time for a quick reflection

You are probably wondering right now “It’s been a long time since he wrote something funny…”

Well, that’s exactly what I was thinking. So please take a look at this:

It’s easily one of the funniest scenes in recent motion picture history.

Joking aside, if you have successfully acquired the knowledge presented by now, then it’s time to talk about something that’s never finished and it can always be improved. I am talking about application architecture, of course.

MVVM architecture

By now we are comfortable with building apps that can easily scale and be maintained. But if we want to create some kind of a process which can easily be repeated by several team members it could be a good idea to follow some kind of an architecture while building our apps.

We decided to use MVVM architecture while building the client apps for the web. Here are our reasons.

Separation of concerns

Our views are defined only in React components in JSX files. They usually don’t have any business logic and have only view-related logic.

Our data is contained in View models. View models usually only have the data that is related to the view which we are currently presenting. View models also have methods (actions) which can manipulate with the data. If you click something in React, the View model will react to that click.

View models usually communicate with repositories, services, helpers and so on.

Nice thing here is that the view model can be connected to the whole app, multiple views, single view, single component and so on. There are no restrictions.

You need something to live as long as the app lives? No problem, just initialize that view model with an app and don’t dispose of it.

You need several modal windows at the same time? No problem, initialize multiple view models for that modal and show them to the user 😁.

Microsoft

Microsoft released their WPF (Windows Presentation Foundation) library in 2006 😱. Since then they have had several suggestions on how to build applications using WPF. Around 2011. they even introduced Rx (Reactive Extensions).

But in the end they suggest using MVVM architecture.

Today WPF is slowly going to be replaced with new libraries, but the suggestion in favor of MVVM still stands.

So I figured if Microsoft is going with MVVM, how wrong can it be 😁.

Google and Android

If I remember correctly, at first Google suggested using the MVC pattern (or maybe not, I’m not Android developer 😅). After that google suggested MVP (Model View Presenter). That was good architecture, but something was missing still. At one time they also had Rx.

But right now Google is suggesting a new architecture: MVVM.

Again, I figure if Google is going with MVVM, how wrong can it be 😀.

Epilogue

This is it, my dear friends. If you have followed all the advice I gave here you should be pretty fluent with React and MobX by now.

If you are reading this and thinking if you should embark on a quest to learn React, I tell you: please do. You will need a couple of weeks to learn everything and to try code examples. You will need a couple of weeks more to try and write your own apps. But it is worth it.

I think this is important because with React (and JavaScript in general) you can easily take a wrong path and end up spending months learning the stuff that’s not good or scaleable.

After all is said and done, and after you put in the time and hard work needed to learn something new, you will be able to write production-ready React apps that someone will gladly pay for 😀.

I am very interested in your comments, critics and suggestions. Please, don’t be shy 😀. If this helped you in any way, I will appreciate a like, share or a comment 😀.

If you would like us to work together, feel free to say hello@enterwell.net.
If you would like to work with us, check out our Careers page.

Best regards and stay safe 😀

Share on FacebookTweet about this on TwitterShare on LinkedInShare on RedditEmail this to someone