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

zxhaaa 发布于2019-08-22 13:52 / 863人阅读

摘要：官方的命令行工具根据官方文档介绍是开始构建新的单页面应用的最佳途径。它可以帮你配置开发环境，以便你可以使用最新的特性，还能提供很棒的开发体验，并为生产环境优化你的应用。

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 就打包完成了，页面可以正常访问。

海外云主机私有云 create-react-app 怎么部署react项目 react使用webrtc VS2013项目创建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92553.html

深度解析`create-react-app`源码

摘要：这个选项看意思就知道了，默认使用来安装，运行，如果你没有使用，你可能就需要这个配置了，指定使用。 2018-06-13 更新。昨天突然好奇在Google上搜了一波关于create-react-app 源码的关键词，发现掘金出现好几篇仿文，就连我开头前沿瞎几把啰嗦的话都抄，我还能说什么是吧？以后博客还是首发在Github上，地址戳这里戳这里！！转载求你们注明出处、改编求你们贴一下参考链...

waruqi 2019-08-22 13:59 评论0 收藏0
前端基础进阶（十五）：详解 ES6 Modules

摘要：下载地址安装一个好用的命令行工具在环境下，系统默认的非常难用，所以我个人比较推荐大家使用或者。下载地址安装在命令行工具中使用查看版本的方式确保与都安装好之后，我们就可以安装了。前端基础进阶系列目录 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 对于新人朋友来说，想要自己去搞定一个E...

Lowky 2019-08-21 18:31 评论0 收藏0
create-react-app项目部署到Github Pages

摘要：描述本文讲解使用创建的项目，如何部署，以及这部署到过程中遇到到坑。增加命令，推送加上这一句推送项目只是部署项目，代码直接放上去是识别不了的，所以部署的是打包编译后到代码。描述本文讲解使用create-react-app创建的项目，如何部署GitHub Pages，以及这部署到过程中遇到到坑。创建项目使用官网方式创建项目。 npx create-react-app my-app ...

levy9527 2019-08-26 13:55 评论0 收藏0
create-react-app 源码学习（上）

摘要：这里通过调用方法方法主要是通过来通过命令执行下的方法。原文地址Nealyang/personalBlog 前言对于前端工程构建，很多公司、BU 都有自己的一套构建体系,比如我们正在使用的 def，或者 vue-cli 或者 create-react-app，由于笔者最近一直想搭建一个个人网站，秉持着呼吸不停，折腾不止的原则，编码的过程中，还是不想太过于枯燥。在 coding 之前...

MkkHou 2019-08-23 18:12 评论0 收藏0
【全栈React】第12天: 创建React应用

摘要：本文转载自众成翻译译者链接原文今天，我们将添加一个构建过程来存储常见的构建操作，以便我们可以轻松地开发和部署我们的应用。在要创建应用的目录中打开终端窗口。文件有一个的节点，这个应用本身将被自动挂载这是在文件中处理的。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3822原文：https://www.fullstackreact...

solocoder 2019-08-20 18:33 评论0 收藏0