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.
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.
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.
glamorare 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
- Don’t make a styled component for every component in your app. Use
styled-componentsonly 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.
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.
Component vs PureComponent vs “stateless component”
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:
- 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.