Crafting React apps in 2019

In the javascript world of today, there’s lots of framework, templates, boilerplates, even several versions of Javascript itself.

Anyone already into this world is mostly residing either in Angular or React’s lap, some in Vue which is a great emerging player in this ecosystem.

In case you’re not yet into it, how should you go about it? Are you deciding for yourself or for your team as to which framework / approach to take? If so, this overview is for you.

‍

The major decision

Lately I’ve heard some people are still looking to go at Front-end development without a framework (“Let’s just use Vanilla JS!”).

While that’s bold and very customizable, and will make you know the gist of JS like the back of your hand, it’s not something you’d do unless you’ve got Experienced devs, no deadlines, and a love for extreme sports.

So in case you don’t fall in that category, let’s go over React, definitely not a bad choice between the Three leading frameworks.

‍

React in a nutshell

First off, React has been around the longest of the 3 major frameworks.

React is actually a UI library and not a framework. However, its ecosystem provides you with everything you need in order  to build anything you’ve imagined.

React (as all Three frameworks at some degree or another) is concentrated around the components approach, whereas in React anything is a component. So a page, a section or even an icon – can all be represented as components, which are then used in composition to create your app’s various pages and interfaces.

React components are derived into Two types – Functional component and Class components. The main difference between them is that Class components have an internal state while Functional components are stateless.

That said, the recent introduction of React Hooks (still an Experimental feature) enables Functional components to have state out of the box, but actually does much more than that (more on this in a separate article).

Having anything as a component allows for a consistent interface in/out of components – in React the way into components is called Props (which is essentially a javascript object) and the way out varies, but is usually comprised from functions passed as props which are used as a way to communicate out of a component.

React’s ecosystem is where Redux was born, which is today the de-facto state management approach for Front-end apps (I use the word “Approach” as there are many tools using Redux’s approach in other frameworks, and Redux by itself is actually not even dependant on Redux).

The learning curve for React itself is not too steep and you can create a few components and a basic layout very quickly. However it highly depends on a person’s knowledge of Pure Javascript concepts and of ES6.

That said, You can only go so far without React’s ecosystem (in our current hooks-experimental-era that is) and the Redux workflow and the various tools used in even the most straightforward apps are a learning curve in its own.

Still, the sheer amount of helpful knowledge which exists for React on the web makes it worth the learning curve and its flexibility and performance is second to none.

‍

How to start developing with React

If you’ve dipped your feet in the water but you’re still new in the Front-end development space, the following courses will get you on track fast and with all the knowledge you need to write effective & maintainable code (it’s not free but you can finish all within a month’s time and it’s totally worth it as you’ll have everything you really need to start):

• https://www.pluralsight.com/courses/javascript-fundamentals
• https://www.pluralsight.com/courses/Javascript-best-practices (high level overview)
• https://www.pluralsight.com/courses/react-big-picture
• https://www.pluralsight.com/courses/react-redux-react-router-es6
• https://www.pluralsight.com/courses/better-css
• https://www.pluralsight.com/interactive-courses/css-flexbox-for-layout

Also, you should know that React hooks is almost in production so keep your eye on it and once it’s in widespread use you’re definitely welcome to hop on board.

If you’re worried should you start with React or the other frameworks – I suggest React as it’s in widespread use, based on pure JS as its main driving force (always good to know your JS well) and the core principles of components etc. are the same across the 3 major modern frameworks.

So once you’re well into React you can easily get into any other modern Framework.