What you need to know about React before going to Production

React is a trend for now if you are going to create new Application. But there are problems for those who aren’t familiar with it and might think React is simple and easy.

I have met a lot of people that try to use React as production at the first time they try to use it and come up with.

“WTF Dude this is a disaster”

There is a giant mountain you need to climb before using React.js in your production product

There is a paradise at another side of it !

So I use React as my primary development tool and I want to share some topic you need to know BEFORE GOING TO USE IT IN PRODUCTION STAGE ( Assume that you already familiar with React.js )

1. UNDERSTAND FLUX ARCHITECTURE

Simple flux architecture diagram

Flux is simple, but not for who come from another legacy pattern style of coding. One way data binding is a huge advantage for your brain when you understand it.

Also Flux is the core of React ecosystem. If you miss understand this thing you might face an EPIC CODE REFACTORING SOON.

Some popular library to manage Flux in your application

• Redux
• MobX

2. STRUCTURE, CONTAINER AND COMPONENT

A next big thing is understand what is container and component and where you keep it, structuring folder and file will help your maintenance life better.

Basic structure

3. Meaning of Stateless, Stateful and Pure function

React ecosystem is all about component. It mean you need to know how to create a stateless component that you can reuse and testable, stateful container that will manage your data.

come up with a popular library like Redux that use a lot of pure function to produce application state.

Stateful and Stateless component

4. HIGHER ORDER FUNCTION COMPONENT

This TOPIC IS OUT DATED, currently (2018) React pattern is changed from HOC to Function Component with Render as a children and also React new API call Hooks API

Higher order component (HOC) is another fun thing that you can enjoy in React and a lot of useful library use it as primary pattern.

This one is a really important one because you can create a lot of reusable component from this pattern.

“again… you really need to understand this pattern and you need to be able to create your own HOC”

My simple HOC that will manage user session

5. INJECTION PATTERN, FACTORY and more…

Your code must be testable, it mean you need to learn how to use another injection pattern like what Angular does.

So go to experiment another lib or framework and adapt it to your project then learn to use some of unit test library eg. Mocha, Jest, Enzyme or Ava

And if you aren’t familiar with Functional programming, you may need to learn how to use some of utilities function like compose, map, filter and reduce.

simple dependency injection in Typescript

6. GRAPHQL

GraphQL is optional but I want to introduce it to you. If you are full stack developer maybe you would interested in it because it will save a lot of code that you need to write in Data layer.

GraphQL bring a better way to provide a data from remote server to your component.

Instead of using HttpRequest ( eg. fetch, axios ) GraphQL will let you write a query language. Everything you need to do is describe what data is your component need.

Bonus ( I know you can find it by yourself )

Flux | Application Architecture for Building User Interfaces

Gentle Introduction to the React Flux Architecture - Learn React

Higher-Order Functions :: Eloquent JavaScript

Angular

React Higher Order Components in depth