Bundling transforms source files and dependencies into application assets, allowing JavaScript to import CSS while producing separate CSS and JavaScript files for the document. section 7.3.2
Common build-and-bundle technologies include:
- Vite, with esbuild built into its setup section 1.4.1 section 7.3.2
- webpack, Rollup, Parcel, Snowpack, SWC, Babel, Terser, and TypeScript section 1.4.1
Importing CSS from JavaScript
A React JavaScript file can import a CSS file directly. Vite's bundler processes the combined code and emits separate CSS and JavaScript files, inserting them into the document. Without bundler support, reference the CSS file directly from HTML or configure a CSS loader. section 7.3.2
Figure 1.4 The React ecosystem is split into three main groups (UI, architecture, and productivity) and comprises hundreds of technologies, tools, and libraries. If you found the amount of technologies displayed in figure 1.1 daunting, this figure might break you.
Maps bundling onto the wider React productivity ecosystem, including build tools alongside server rendering, testing, developer experience, monitoring, and documentation technologies. section 1.4.1
