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+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 styled-components:
- 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 dependenciesautodll-webpack-plugin— recompile only updated code without vendorwrite-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”
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
/componentsduring 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
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