We use React for most projects, so this guide mostly leans toward best practices for React and libraries that use (or work well with) React.
There are tons of opinion around project structure, each with it's own pros and cons. We currently use our own template for most (Web application) projects. It also opinionated and made a handful of choices that worked well for us:
- Global state management: Redux Bundler
- Client-side routing: Redux Bundler's route bundle, since Redux-bundler already manage our global state, leveraging it to handle routing states is obvious choice
- I18n: react-localize-redux provides simple solution for translations in React, it also support lazy-loading translation files which is a huge win, in contrast other alternatives like react-intl requires you to provide all translation files on initialize. Check here to see how easy it is to integrate react-localize-redux with Redux-bundler
- Styling: TailwindCSS - a ultility-based CSS library to make writing CSS in React (an other client-side UI libraries/frameworks) fast and enjoyable. We also plugged in PurgeCSS to remove unused CSS classes generated by Tailwind in production build
- Pre-configured ESLint with Prettier integration
With the introduction of React Hooks, function components can now handle their own states and effects (previously known as "life-cycle") without using Class component. Our team has been early adopter of React Hooks since alpha and having good success, thus we recommend using React Hooks for local states and effects handling, this awesome article by Dan Abramov explains some pitfalls and mis-conceptions of developers while using Class components and how React Hooks make them obvious to avoid by default.
- Never use
for (let i = 0; i < items.length; i++)
- Prefer functional & immutable array methods .ie
everyover any types of mutable
- Prefer "return early" coding style, more about it here
- Don't obsess over performance of code, obsess over making it clear
TailwindCSS covers most things, but if you ever feel the need of writing custom styles for a single floating icon or a fancy hero banner transition, use CSS Modules.
Use Netlify for web applications and static websites, it handles both CI and deployment for free, which is awesome.
Use Sentry to monitor errors and centralized stacktrace in production.