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 Router be sure that there is a “clone” of this library, but for Preact. React 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. — 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 . styled-components API — API similar to `styled-components`, lightweight, good performance. glamorous + + are cool too. radium styled-jsx glamor “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 only for reusable/generic components. styled-components HOCs could save you some time. Don’t mix logic props and UI props. Toolkits & Webpack Check for more info why toolkits are better. “Next.js, Razzle, CRA. Why you should use them for a next project.” 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. . list “Awesome-toolkits” Webpack plugins you probably have missed: — detects circular dependencies circular-dependency-plugin — recompile only updated code without vendor autodll-webpack-plugin — write files from memory FS to real FS. write-file-webpack-plugin — obtain webpack stats from compiler assets-webpack-plugin UI Probably, of different UI frameworks could help you select a framework for the next project. this article with a comparison 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 folder, except “atomic” approaches and other heuristics. /components NOTE: “Atomic” approaches Most “atomic” approaches making the things Only really know how the best way to structuring don’t work! only worse! your team and you /components One of the most robust methods — store all shared components in folder. That’s enough for a small/medium project. /components 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 and . _no-unused-vars_ _indent_ Babel Add in production.Don’t forget to add plugin, if you use . babel-preset-react-optimize styled-components 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 looks like: mapStateToProps 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( ) logic to containers. selectional Instead: Thanks for reading!Github: Twitter: @Metnew @vladimir_metnew

Flow

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Base recommendations for React apps.

Too Long; Didn't Read

Company Mentioned

Coin Mentioned

Vladimir Metnew

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Base recommendations for React apps.

Too Long; Didn't Read

Company Mentioned

Coin Mentioned

Vladimir Metnew

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES