Fullstack Lead Developer
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.
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).
Mobx/Redux/Flux/Kea — it doesn’t matter.
`promise-middleware` allows using promises as action’s payload. The simplest solution to async in Redux.
“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.
glamorare cool too.
“Thinking in components, styling in components”.
Some recommendations when dealing with
styled-componentsonly for reusable/generic components.
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.
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
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.
Flow is completely unoptimized and lacks many features. MS > FB 😉
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.
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.
Changing component’s type doesn’t guarantee performance improvements.
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
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
/componentsduring development. Don’t start premature optimizations!
Standard code style is ❤️.
If you care about a11y (accessibility) — add
Some default StandardJS rules are annoying, like
babel-preset-react-optimize in production.
Don’t forget to add
styled-components plugin, if you use
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]
Always use selectors!
What is “selector”?
mapStateToProps looks like:
Then you’re doing that wrong, because:
Create your free account to unlock your custom reading experience.