2023 React Boilerplate

tools chain or framework?

React boilerplate items

• File structure
• Build
• Development server
• Routing
• Rendering
• ...

Main boilerplates

• create-react-app
• vite
• next.js

1 Create-React-App

---

React teams not recommend

• role
  • tools chain
• features
  • File structure
  • Build
    • babel
    • webpack
  • Development server
  • Routing
  • Rendering
• pros
  • easy usage
• cons
  • heavy
  • hard configuration
  • out-dated tech

2 Vite

---

React teams also allowed

Grab react and react-dom from npm, set up your custom build process with a bundler like Vite or Parcel, and add other tools as you need them for routing, static generation or server-side rendering, and more.

• role
  • tools chain
• features
  • File structure
  • Build
    • swc
    • ESM, rollup
  • Development server
  • Routing
  • Rendering
• pros
  • lightweight
  • easy configuration, plugins
• cons
  • just tools chain

3 Next.js

---

React teams recommend

React team’s full-stack architecture vision

• role
  • framework
• features
  • File structure
  • Build
    • swc
    • turbopack | webpack
  • Development server
  • Routing
  • Rendering
• pros
  • future-oriented
• cons
  • learning curve