1.create-react-app

来自Facebook官方的零配置命令行工具。create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+ES6的最简易的React项目模板,有助于初学者快速上手实践。安装create-react-app的方式也非常简单,可以直接使用 npm 命令进行全局安装。

npm install -g create-react-app   //全局安装create-react-app
create-react-app my-app   //创建一个my-app 文件夹
cd my-app/    //转到 my-app文件夹
npm start    //运行

2.打包编译

执行完上述命令,打开本地浏览器,输入localhost:3000,就能看到项目的运行效果。此时是开发模式。

若使用npm run build,代码会被编译到build目录。将整个应用打包发布,自动试用webpack进行压缩与优化。

在项目路径下,敲npm run build,就出现了build文件夹,同时终端显示一些文字:大致意思是:已经编译好啦。build生成的这些东西要放在服务器root下

3.充当静态的服务器,在本地也能浏览

敲:npm install -g serve,在敲serve -s build,就可以了。

就可以在本地地址:http://localhost:5000浏览了 。

React项目的打包的更多相关文章

  1. React项目的打包与部署到腾讯云

    腾讯云送了30天的免费试用,于是有了把react项目部署到上面的想法.项目是默认生成的,只是一个页面,但是这个过程中也遇到了不少麻烦与问题.下面来具体梳理下: create-react-app 来自F ...

  2. 将本地的react项目代码打包到服务器

    打包过程 连接服务器 ssh root@xx.xx.xx.xx(服务器IP) 定位到当前项目目录 cd /path/projectName 更新代码到服务器 git pull 执行打包命令(这里我创建 ...

  3. react build 后打包发布总结

    一,部署在apache  web服务器上(wamp   |   xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决.  设置A ...

  4. React项目构建(利用webpack打包)

    引言 最近React作为当前最为火热的前端框架.最近也相继而出来相关ES7的新语法. 当然,在使用React开发web项目的时候,不得不提到的就是与之配套的相应的打包技术,之前上文已经简单的提到Rea ...

  5. React项目打包并部署到 Github 展示预览效果

    React项目打包并部署到 Github 展示预览效果 当开发者模式结束,准备打包的时进行以下步骤: 在package.json配置文件中加一句: "homepage": &quo ...

  6. react项目打包后路径找不到,项目打开后页面空白的问题

    使用 npm install -g create-react-app快速生成项目脚手架打包后出现资源找不到的路径问题: 解决办法:在package.json设置homepage

  7. react native ios打包到真机

    每当在模拟器上完成了开发,都想到真机上秀秀,正好前段时候买了一个mac,哈哈有机会了.前篇文章以android为例,这里就以ios为例,讲一下打包到iphone真机的流程. 一.前置 1.首先你得有一 ...

  8. React项目模板-从项目搭建到部署

    前一段时间做了一个小项目,时间比较紧,就一个人月.最终希望能够通过微信公众号链接启动应用. 项目的业务细节就不多说了,主要是想分享一下做这个项目技术方面的一些经验. 技术选型 参考范围大致三种:Ang ...

  9. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

随机推荐

  1. django drf安装和doc生成

    1.打开drf官网https://www.django-rest-framework.org/,把相关的包pip install 2.INSTALLED_APPS添加drf 3.url配置 4.tes ...

  2. 使用扩展方法重写.NET底层架构

    我们在开发B/S架构的项目时,用到的都是.NET底层各种命名空间提供的操作类,利用扩展类可以重新写出一套真正属于你自己的框架. PS:扫描下方二维码或点击链接,加入QQ群

  3. Open Interface Service WCF三种通信模式

    WCF三种通信模式 一.请求响应模式: 概念:客户端发送请求,一直等待服务端响应,在此期间处于等待(假死)状态:直到服务器响应,才能继续执行其他的操作: 即使返回值是void 也属于请求与答复模式. ...

  4. GPU大百科全书 第一章:美女 方程与几何

    沉鱼落雁   前言:当你酣战在星际2的时候,或者当你在艾泽拉斯游历的时候,你有没有想过,眼前的这些绚丽的画面究竟是怎么来的呢?也许对大多数人来说,GPU对于图形的处理过程并不是那么重要,但总会有些人, ...

  5. Windows10使用

    1.常见问题 Win10 的操作中心如果不见了 Windows10电脑系统时间校准 实现windows与ubuntu的之间的复制与粘贴 安卓手机传递文件到Windows系统电脑 安卓手机高速传递文件到 ...

  6. Zabbix监控详解

    Zabbix是什么 Zabbix 是由Alexei Vladishev创建,目前由Zabbix SIA在持续开发和支持. Zabbix 是一个企业级的分布式开源监控方案. Zabbix是一款能够监控各 ...

  7. [ActionScript 3.0] 实现放大镜效果的简单方法

    //mc和bgmc是同一对象的不同实例 //mc放大的对象 //bgmc源对象 //mag放大镜 var scale:Number = 1.3;//放大倍数 mc.mask = mag; mag.st ...

  8. ArchLinux 下安装 SecureCRT

    相关说明: 上篇发了个Linux(Ubuntu) 下 SecureCRT 7 30天循环破解在启动的时候会多输入一次确认窗口, 后来maz-1网友留言说可以用Windows破解后程序替换Linux下的 ...

  9. Mac 更改/usr/bin 目录权限失败

    对于Mac OS X 10.11 El Capitan用户,由于系统启用了SIP(System Integrity Protection), 导致root用户也没有权限修改/usr/bin目录.按如下 ...

  10. CH2401 送礼物(双向dfs)

    CH2401 送礼物 描述 作为惩罚,GY被遣送去帮助某神牛给女生送礼物(GY:貌似是个好差事)但是在GY看到礼物之后,他就不这么认为了.某神牛有N个礼物,且异常沉重,但是GY的力气也异常的大(-_- ...