Base recommendations for React apps.

What to use for …

Almost every library has a “clone”. You can find more than one library to solve a specific task. That means when you see a reference to React Router be sure that there is a “clone” of this library, but for Preact.

Component-based library

You can use React/Preact/Inferno. It doesn’t matter. React is well-known and canonical. Preact is small and could be used only in production.

But this “speed” doesn’t matter in “real-life”. 90% of speed issues caused by bad optimization of the app, not a framework. So there is no difference what library to choose(except size).

State management

Mobx/Redux/Flux/Kea — it doesn’t matter.

`promise-middleware` allows using promises as action’s payload. The simplest solution to async in Redux.

Styles & Styled components

“Styled components” — design approach. styled-components — library to design styled components in React.

• styled-components — bloated, requires a good understanding of CSS methodologies. But it’s very powerful and has a rich API.
• glamorous — API similar to `styled-components`, lightweight, good performance.
• radium +styled-jsx + glamor are cool too.

“Thinking in components, styling in components”.

What’s a problem with “styled components”?

• Sometimes hard to overwrite a CSS framework you’re already using.
• If you’re new into styled components, you’ll likely connect application logic directly with styles. That’s incorrect.

Some recommendations when dealing with styled-components:

• Don’t make a styled component for every component in your app. Use styled-components only for reusable/generic components.
• HOCs could save you some time.
• Don’t mix logic props and UI props.

Toolkits & Webpack

Check “Next.js, Razzle, CRA. Why you should use them for a next project.” for more info why toolkits are better.

Don’t write webpack.config from scratch!

No boilerplates, toolkits only.

• Creact-react-app, Next.js, parcel, gatsby.
• Both server(if any) and client must have HMR.

“Awesome-toolkits” list.

Webpack plugins you probably have missed:

• circular-dependency-plugin — detects circular dependencies
• autodll-webpack-plugin — recompile only updated code without vendor
• write-file-webpack-plugin— write files from memory FS to real FS.
• assets-webpack-plugin — obtain webpack stats from compiler

UI

Probably, this article with a comparison of different UI frameworks could help you select a framework for the next project.

If you want a blazing fast UI framework, then choose framework powered by CSS-in-JS or inline-css libraries.

Ant Design and Material-UI are great.

Static-typing

Definitely TypeScript.

Flow is completely unoptimized and lacks many features. MS > FB 😉

Folder structure

There are many approaches to structuring React/Redux projects. Keep in mind, that this structure may vary to your setup. For example, Next.js and CRA have some predefined folders.

“Typical structure”

There is no recommended structure. Start with any simple structure and enhance it as you go.

Compare some open-source React/Redux projects and you’ll figure out that they significantly differs from each other.

You could use “ducks” approach. Pros: loose-coupling, clear code. Cons: not so DRY.

Components

Component vs PureComponent vs “stateless component”

Difference between components’ types.

Changing component’s type doesn’t guarantee performance improvements.

/components

There are no practical recommendations about structuring /components folder, except “atomic” approaches and other heuristics.

NOTE: “Atomic” approaches don’t work! Most “atomic” approaches making the things only worse! Only your team and you really know how the best way to structuring /components

One of the most robust methods — store all shared components in /components folder. That’s enough for a small/medium project.

You’ll find out the best way to structuring /components during development. Don’t start premature optimizations!

PWA

Use Offline-Plugin.

ESlint

Standard code style is ❤️.If you care about a11y (accessibility) — add eslint-plugin-jsx-a11y.

Some default StandardJS rules are annoying, like _no-unused-vars_ and _indent_.

Babel

Add babel-preset-react-optimize in production.Don’t forget to add styled-components plugin, if you use styled-components.

Reducers

Dissecting Twitter’s Redux Store.

95% of all states in any app can be interpreted as:

The primary key to Redux development:

State = in-memory DB.

It’s ok to duplicate data in the state. [denormalization]

Selectors

Always use selectors!

What is “selector”? If your mapStateToProps looks like:

Then you’re doing that wrong, because:

• Every time the way you compute some value changes, you have to change it across app.
• Every time your state structure changes, you have to fix path to the property across an app.
• You connect your computational(selectional) logic to containers.

Instead:

Thanks for reading!Github: @MetnewTwitter: @vladimir_metnew