使用create-react-app 创建react项目

前端之家收集整理的这篇文章主要介绍了使用create-react-app 创建react项目前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

create-react-app: Facebook官方的命令行工具

根据官方文档介绍:
Create React App 是开始构建新的 React 单页面应用的最佳途径。 它可以帮你配置开发环境,以便你可以使用最新的 JavaScript 特性,还能提供很棒的开发体验,并为生产环境优化你的应用。

安装Create React App
npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

执行完以上命令之后,你的终端会输出如下,并自动打开浏览器 http://localhost:3000

目录结构
my-app/
  README.md
  node_modules/
  package.json
  publish/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    registerServiceWorker.js

当你准备好构建生产环境时,运行 npm run build 将会在 build 文件夹中创建一个优化好的应用。

问题来了: 通过 npm run build 打包应用过后 打开应用会发现页面报错了,如图:

打开打包过后的index.html, 如图:

所有引用资源的地址都是访问的根目录,所以导致页面访问不到

解决方案:
package.json中加入"homepage" : ".",

再次运行 npm run build 就打包完成了,页面可以正常访问。

猜你在找的React相关文章