create-react-app搭建react开发环境中的public/index.html.

使用create-react-app创建一个简单的react项目,会在项目的根目录下生成一个入口文件index.js,其内容大致如下:

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

上述代码中,document.getElementById("root")这句就是把根组件挂载在根页面中,该页面位于项目的根目录public/index.html,其内容大致如下:

<body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>

上述代码中,<div id="root"></div>和document.getElementById("root")相对应.
我的问题是,在开发环境下没有打包文件的情况下,index.js中的document.getElementById("root")是如何能够关联到另一个目录public/index.html文件呢,这两者之间好像没有引用关系.

阅读 18k

create-react-app采用一个react-scripts这个库，你的问题回答很简单，看看源码就知道了。react-scripts包里面的config文件里面有一个webpack.config.dev.js这个webpack配置文件，从配置文件中可以清楚看到下面这段代码。

 new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
    }),

其中这个paths对应的文件就是同级目录下paths.js这个文件，怎么得到来的？webpack.config.dev.js有一行代码写的很清楚。

const paths = require('./paths');

而paths.js这个文件中，很清楚可以看到appHtml对应的正是public/index.html文件。源码是个好东西，多看看！

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
  // These properties only exist before ejecting:
  ownPath: resolveOwn('.'),
  ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
};

create-react-app搭建react开发环境中的public/index.html.

你尚未登录，登录后可以

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

为什么 expo 的 react native 项目的文件名会有 ( _ + 这些字符？

编写hooks的时候，有遇到一个问题，是否可以将useEffect里面获取到的数据进行返回？

在定义hooks的时候，是指的可以使用函数式组件的所有使用方式是吗（比如: ①useEffect方法 ②hooks里面调用hooks）？

zustand的useShallow hook到底有什么优势？

yarn安装包后报错，怎么解决？

为什么 vite 要区分开发环境和生产环境的打包方式呢？

create-react-app搭建react开发环境中的public/index.html.

你尚未登录，登录后可以

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

为什么 expo 的 react native 项目的文件名会有 ( _ + 这些字符？

编写hooks的时候，有遇到一个问题，是否可以将useEffect里面获取到的数据进行返回？

在定义hooks的时候，是指的可以使用函数式组件的所有使用方式是吗（ 比如: ①useEffect方法 ②hooks里面调用hooks）？

zustand的useShallow hook到底有什么优势？

yarn安装包后报错，怎么解决？

为什么 vite 要区分开发环境和生产环境的打包方式呢？

在定义hooks的时候，是指的可以使用函数式组件的所有使用方式是吗（比如: ①useEffect方法 ②hooks里面调用hooks）？