react以create-react-app为基础创建项目

关于React项目创建，长沙网络推广推荐了一种便捷的方式——使用create-react-app。今天，我们来一起一下这个强大的工具，并为大家提供一个详细的参考。

让我们了解一下什么是create-react-app。create-react-app是一个js库，它可以极大地简化React项目的创建过程。使用这个库，你可以轻松初始化React项目，无需配置webpack、调试服务器或运行脚本等繁琐步骤。

要创建一个基于create-react-app的React项目，你可以按照以下步骤操作：

确保你已经安装了npm（Node.js的包管理器）。然后，在命令行中运行以下命令来全局安装create-react-app：

```css

npm install -g create-react-app

```

接下来，运行以下命令来创建一个新的React项目：

```bash

create-react-app [project-name]

cd [project-name]

```

请注意，[project-name]是你可以自定义的内容。你可以根据自己的喜好选择项目名称。完成以上命令后，你已经成功创建并进入了新的React项目。现在，你可以运行`npm run start`来启动开发服务器，并运行`npm run build`来构建生产版本的项目。

默认情况下，所有的配置都是隐藏的。如果你想进行自定义配置，可以运行`npm run eject`命令。这个命令会暴露所有的配置文件，然后你就可以进行修改了。例如，你可以修改build后的output位置、js、css、img等静态资源的配置。所有的配置项都有明确的指示和说明，方便你进行定制化的配置。

除了使用`npm run eject`来修改配置外，还有其他方法可以实现配置覆盖。一种比较优雅的方法是引入插件来实现配置覆盖。你可以在根目录新建一个`config-overrides.js`文件，然后在其中进行自定义配置。具体的配置方法和细节可以通过点击相关链接查看。

为了利用CDN优化页面加载速度，我们常会在页面中引入React或其他库的script标签。这样可以在浏览器环境中直接加载全局变量，减少JS文件的体积。如果你想让React等库作为全局变量而不进行打包，可以在`config -> webpack.config.prod.js`的配置文件中加入相应的代码来设置externals。具体的配置示例如下：

```javascript

module.exports = {

...

externals: {

'react': 'React',

'react-dom': 'ReactDOM'

},

...

}

```

在上面的代码中，key是库的名字，value是全局变量的名字。你需要确保全局变量的名字与代码中import的名字一致，遵循规范。

今天我们要修改html-webpack-plugin插件的模板文件，原因是我们需要加入全局变量。为此，只需在相应的script标签中加入即可。以public目录下的index.html为例。

原始的index.html模板如下：

```html

You need to enable JavaScript to run this app.