Are you looking to get the skills to become a 6 figure Front-End Engineer, and master the insanely popular React.js ecosystem?

If so, then sign up for an exciting new training program at ProfessionalReactApp.com!

Avoid mistakes — like a ton of technical debt — and learn how to architect your app the right way by getting guidance from a pro. The fastest, easiest, most hassle-free way to learn is to have an expert guide you on your path to app mastery.

ProfessionalReactApp.com

Introduction

React and its ecosystem of related JavaScript libraries has huge market share, and it’s being used to power the front-ends for many successful SaaS (Software As A Service) products.

But you need to know more than just React if you want a job as a highly sought-after developer.

The following article is a guide for what you should know if you want to join a team of highly skilled engineers in the real world, or if you want to become an independent consultant working for clients.

Thinking & Developing In React Components

Everything outlined in red is a React UI component. Many components are highly reusable.

Modern interfaces today are constructed in terms of individual UI components. These components are often (but not always) designed to be highly reusable. Because we develop our interfaces with reusability in mind, the improvements that have been made to the manageability of complex front-ends is gargantuan (“I’ve always liked that word… ‘gargantuan’… so rarely have an opportunity to use it in a sentence”!).

And when you use a very popular library like React, the way you craft those reusable components is standard and predictable. Reusability and predictability allow a product and a team to scale. Using a library like React, it’s way easier to achieve a consistent experience throughout an app, or throughout a suite of N apps.

React is constantly evolving, constantly advancing its syntax, improving performance, it’s totally free to use with no strings attached now (MIT license), it has a humongous 3rd party ecosystem of components you can leverage, and a lot of teams are using it. Therefore, it’s a lucrative skillset to have in your arsenal.

It’s also easier for new developers to learn. The only gotcha is figuring out how all these disparate components are orchestrated, and fit together, in order to produce a fully functional app. In other words, how do all these separate React UI components receive data and communicate with each other?

That’s where Redux comes in.

Managing Application State & Data Flow

All data that flows through a professional React app is contained in 1 object in memory called “The Redux Store”.

Once you start building your app by using highly reusable React components, the next step is figuring out how to 1) manage the data that flows through your app and 2) manage the state of the application.

Enter Redux. Redux is an advanced design pattern that comes with a collection of JavaScript libraries that you use to implement it. There’s also MobX and Flux, but Redux is by far the most popular.

You see, once you have an interface made out of many little components they all need to communicate with each other in some way. They need to have user-facing data fed into them. And if a user does something in one component that changes the underlying data, that change needs to be reflected in the other components that comprise the entire app.

Redux has proven to be a highly effective and scalable design pattern for managing application state, and it borrows heavily from functional programming philosophies. It does, however, come with a learning curve for new developers. But once you master this critical design pattern, you’ll be in great shape for writing professional React applications.

If you don’t know what “application state” means don’t worry. You can learn more about it here. Just know that you’ll have to understand how to manage the state of your application when working on professional React projects. Invest the time to learn Redux now!

Webpack Powers Your Entire App

Webpack configurations for major React apps are usually subdivided into two different environments, development & production.

So you have an app made out of individual React components written in ES6 (the latest version of the JavaScript language) that need to get transpiled into a version of JavaScript all browsers will be able to interpret. You also have assets like CSS, images, fonts, svgs, etc. that all need to be processed and compiled into a final output that ultimately gets sent to the user’s browser.

This is where Webpack comes in. Webpack is an asset bundler that powers an entire React app. In a nutshell, it takes all of the JavaScript, CSS, and any other front-end assets, and produces the output that you see in your browser. It can do advanced things like code splitting to improve the performance of your application, lazy loading, caching, tree shaking, and it helps you create entire libraries that you can distribute across teams.

Because Webpack looks scary at first, a lot of developers don’t know how to use it. And many of them don’t know how to structure a Webpack config for a major large-scale React application. If you’re building a React app for a client, you MUST understand how to use Webpack to configure the functionality of the app in any way desired.

Knowing Webpack is a powerful skill that will set you apart from other developers.

If Webpack is a mystery to you and you need to see how industry professionals use it to power real-world React apps, then learn how to use it now and become a Webpack expert.

CSS Architecture For Large-Scale React Apps

SASS (Syntactically Awesome Style Sheets) configuration for centralized theming of a professional React app.

I’ve worked for so many startups and I can’t tell you how many times I’ve encountered bungled and unmanageable CSS code. There’s a lot of bad code out there folks.

Startups are almost always rushed into delivering a product as fast as they can so that they can test it on users. In a rush to deliver, some of them screw up their CSS until it’s a big bloated mess laden with heavy technical debt. I’ve worked on projects that did such a poor job of implementing their CSS that the product’s performance suffered greatly. In some really bad cases, I almost wanted to leave. If you’re a developer on a such a project, you’ll have to clean this up.

Today, professional React apps use a complex toolchain to write CSS code. They use SASS (Syntactically Awesome Style Sheets) for programmatic CSS, CSS modules for organization (which I love!), media queries to implement responsive viewports, and a lot more.

One of the biggest benefits you can bring to your team is to know how to skin your React app correctly. Your project needs to have a professional look and theme as this is a very important part of every UX experience.

In addition, your Designer is going to want as much control as possible to change the look and feel of an entire application. Therefore, you should learn how to create a configurable theme for your app, and implement your CSS in a way that will scale for developers and designers alike.

Automated Linting

Lint, baby lint. You need an automated developer workflow for your team that checks for code health and quality. A large-scale React app, manned by a team of developers, *must* adhere to a style guide and must be continuously linted and checked for quality.

Every JavaScript application should be automatically linted in order to keep code healthy and clean. On my professional projects, I configure my teammate’s linters to automatically execute before a developer is even able to commit code on their local machine. This prevents developers from checking in bad code early on in the development cycle.

Not only that, you can configure your linter to automatically adhere to a specified style guide. Lots of teams use AirBnb’s JavaScript style guide. In my opinion, the AirBnb style guide is very strict but you can relax some of its rules if they annoy you. So start your project using the AirBnb style guide and customize it to your team’s liking.

Your professional React app must automatically lint code and adhere to a standard style guide. In fact, every professional project written in JavaScript must be linted. The language has too many gotchas that can induce a developer to introduce unsuspecting bugs because of perceived language flaws.

Architecting Higher Level Components

Large-scale React apps contain higher-level reusable components that represent frequently used UX elements. Like modals for example. These high-level components are so fundamental to the overall experience of an application that they must be architected with care.

On my last contracting gig, I worked for a very successful SaaS product that was making A LOT of money. The company had a large team of engineers that needed to iterate on features FAST. In fact, people were being let go because management didn’t think they were “fast enough”!

One major technical issue with this specific SaaS product was that no one knew how to display a basic modal. There were multiple Modal components spread throughout the app all increasing the size of the overall JavaScript payload. And it took hours just to figure out how to do something as basic as display a modal to a user. In other words, the product had technical debt that was slowing developers down which lead to people getting fired (no joke).

I ended up having to fix this technical debt for the whole team and ended up learning some valuable lessons. Higher-level components must be well thought out and architected. If you need to learn how to architect a highly customizable and configurable Modal component for large-scale React apps, then check out my tutorial here.

Leveraging Third Party Component Libraries

The new version of Material-UI is out!

One of the coolest things about building your interface in React components is that there is a treasure trove of free and open-source components you can choose from.

You can even use third party UI libraries to apply a general look and feel to your entire app right out of the box. Some teams leverage Material-UI, some leverage React-Boostrap. I’ve used them all, and they’re all great.

If you’re creating a SaaS product and you’re cash strapped, maybe you can’t hire a designer. Or maybe you’re a developer focused primarily on engineering and aren’t interested in gaining design chops. If that’s you, all you have to do is import a pre-made library into your app and learn how to use it in order to get a professional look and feel.

In my experience, I find that even teams with professional designers on staff still make use of third party libraries. As long as stylistic tweaks can be made, designers are happy to leverage the work of 3rd party designers. After all, it’s less work for them!

But you need to know how to incorporate 3rd party libraries and design systems into your app correctly. You want to be able to reuse all this pre-made logic, but you also need to be able to adapt it to a product’s unique needs.

Testing Is Mandatory For Dev Teams

You have to write tests for your app. I’m not kidding. As your team’s application grows in size it gets scary to work without tests.

Implementing the automated testing suite for your React app is important. Eventually you’ll be confronted with figuring out when to write tests and when not to. In fact, one of the bigger challenges in automated test writing is figuring out when to write tests that have value.

Management doesn’t always dedicate time to test writing. No wait. They don’t budget time for automated test writing at all. They may hear from engineers that it’s an important thing to do, but they’re not writing and managing the code daily, so they don’t care much. They just want the product to work as expected, they don’t want bugs, and they want you to implement new features fast.

As a developer, you’ll want tests to ensure things work as expected. Over time, many other developers will touch upon and edit your work, and you don’t want them to break things.

The UI Component Library

You can use React Storybook to create a team’s UI Library; however, I find that some teams prefer other options.

Now for the icing on the cake. Complex SaaS products are frequently made up of multiple apps. The user may not notice, but there are several apps working together to produce a holistic experience. Or, a company may have a suite of different software applications that all need to adhere to the same UX theme and company branding.

This is where a company-wide UI library comes in. You’ll have a huge asset in your arsenal as a developer if you know how to maintain (and implement) a UI Library that a team of developers can tap into to build their suite of apps.

Setting up a UI component library for an entire organization is a very advanced skill.

Set Up The Foundation Of Your App Right

Software development is a long and challenging journey. In addition to all the hard tech skills you need to have, you still have to be good at working with PEOPLE. That’s right, even software engineering is a people-oriented job.

I won’t lie to you and say it’s easy to learn all the technical skills. IT’S HARD. But if you want to get paid well to do this, or you want to unleash your creativity unto the world, then arm yourself with the knowledge you need to do this right.

If you’re a consultant or developer and you need step-by-step guidance on how to use this advanced React boilerplate, or you want to understand all the moving pieces (Webpack configuration, CSS Architecture, directory structure, etc.) then sign up for my training program at ProfessionalReactApp.com. I’ll guide you through the use of the boilerplate as we build a real app.

With knowledge and skills comes greater freedom.