React为何不使用script标签？使用create-react-app包时无需在index.html中添加script标签的原因是什么？

Great questions—let's break them down clearly, like we're chatting through React's core design choices and tooling magic.

React's design is built around modern development workflows, and sticking to plain script tags would hold back almost all of its key strengths. Here's why:

• JSX is non-negotiable (and browser-unfriendly)
  React's component model relies heavily on JSX, a syntax that mixes HTML-like markup with JavaScript. Browsers don't understand JSX natively—you need a transpiler like Babel to turn it into vanilla JS. Using script tags would mean either writing raw React.createElement calls (which is tedious and unreadable) or manually adding Babel transpilation to every script tag, which is slow and impractical for real apps.

• Modularity and code splitting would be impossible
  React encourages modular, reusable components, which depend on ES6 imports/exports or CommonJS require statements. While modern browsers support ES modules via type="module" script tags, they can't handle advanced optimizations like tree-shaking (removing unused code) or code splitting (loading only the code needed for a page). React's ecosystem is built around tools like Webpack or Vite that handle these optimizations—script tags alone can't deliver the performance or maintainability needed for large apps.

• Performance and optimization limitations
  If you tried to load React's core, your components, and all dependencies via separate script tags, you'd end up with dozens of network requests, slow load times, and no way to minify or bundle code. React's virtual DOM and diffing algorithm are already optimized, but without a build step, you'd lose out on critical optimizations like dead code elimination, lazy loading, and production-ready minification.

• Ecosystem integration breaks down
  Most React tools (Redux, React Router, TypeScript support) are designed to work with build tools, not plain script tags. Features like hot module replacement (HMR)—which lets you see component updates without refreshing the page—are impossible with just script tags. The entire React development experience is tied to modern tooling, and script tags can't keep up.

Create React App (CRA) is a zero-config tool that hides all the complex Webpack setup from you, and auto-injecting script tags is one of its biggest time-savers. Here's how it works:

• Webpack handles bundling automatically
  CRA pre-configures Webpack to take all your React code (components, utilities, dependencies like React itself) and bundle it into optimized JavaScript files (called "bundles"). In development, this happens in memory; in production, it writes bundled files to the build folder.

• html-webpack-plugin injects bundles into your template
  CRA uses the html-webpack-plugin under the hood. This plugin takes the public/index.html file as a template, then automatically adds <script> tags pointing to your bundled JavaScript files. You'll notice %PUBLIC_URL% placeholders in the template—Webpack replaces these with the correct paths and inserts the script tags at the end of the <body> (or where configured) for optimal loading.

• Development server manages dynamic injection
  When you run npm start, CRA uses webpack-dev-server to serve your app. This server keeps the bundled code in memory instead of writing it to disk, and it automatically injects the latest bundle into the browser as you make changes (thanks to HMR). You never have to manually update script tags because the server handles it in real time.

• Production-ready optimizations are automated
  When you build for production with npm run build, Webpack generates bundled files with unique hash filenames (like main.abc123.js). The html-webpack-plugin automatically updates the script tags in the final build/index.html to use these hashed filenames, which helps with browser caching—users only download new code when it changes, no manual updates needed.

内容的提问来源于stack exchange，提问作者Sam