react部署到服务器，react安装环境搭建

React 打包部署

1、前言

平时写react页面，可以在cmd或者terminal里面npm start/npm run start进行测试，如果想要打包放到服务器上，需要怎么做呢？

经过踩坑终于将自己的react页面放到的服务器上运行起来，并且通过自己的"ip:port/***/"，可以在局域网内的电脑上跑起来的。

真实部署到云上或者公司服务器上还没有进行验证，因为想着和部署在本地步骤应该不差多少。

2、打包

在cmd/terminal里切到项目的工作控件下。

输入 npm run dist

等待生成dist文件夹。这就是最终打包好的资源文件夹。如果步骤出错了，需要根据线索自己排查--!,

3、放到服务器上。

我的webapp项目是在intellij idea上建立的项目，配置tomcat步骤和新建项目步骤可以自行百度。很多前辈们写过相应的文章。当项目建立好之后，可以尝试跑一下看看界面是否为web目录下的index.html/index.jsp？文件里面的布局。

将dist文件复制到web项目的web文件夹之下。然后重新跑tomcat就好。

4、尝试

tomcat成功启动之后，在浏览器地址栏输入对应的地址就好。默认地址ip+端口/为web目录下文件夹名称。

也就是dist文件夹的名称可以改为自己的项目名称。

例如，dist不修改的话。我的地址为我的ip例：

此时访问的就是dist文件夹下的index.html文件。

就会成功跳出来web项目的主页

5、啰嗦

最近才开始react学习，在学习过react-router之后，想着将项目放到服务器上怎么跑起来，因为之前没有弄过web项目，所以在这个过程中搜到好多的文章都有帮助。感谢那些乐于分享的前辈。

其实主要是卡在的第二步、第三步。因为之前没有webapp经验，也不清楚将网页部署到服务器上的步骤。

简单的将步骤给记录一下，以作备忘。

如果该文章对您有所帮助，希望您可以点下喜欢~给作者一点鼓励!

react项目怎么启动(react怎么用)

在IDEA中建立简单react项目

1、安装node.js插件安装完后需要重启idea，然后就可以找到node.jsandnpm插件搭建react脚手架，新建react项目完成后，等待，出现下图所示安装成功。

2、在cmd/terminal里切到项目的工作控件下。输入npmrundist等待生成dist文件夹。这就是最终打包好的资源文件夹。如果步骤出错了，需要根据线索自己排查--！，放到服务器上。

3、进入云服务器，找到nginx文件，修改root指向build路径，nginx配置教程。上述操作完成后，打开域名后，页面即为react项目的首页。建议使用idea进行springboot项目的开发(专业的事情交给专业的工具，简单些)。

4、create-react-app创建react项目，并启动项目。项目打包。此时如果只是普通部署，不要求体验效果时，把build文件下的文件拷贝到静态服务器即可。接下来考虑如何静态文件CDN部署。

5、打开IDEA14，点击左上角的File，点击NewProject...，选择左列的java，右列的不用选，点击next，一直到最后即可。PS：大项是Java，javaee是子项。

6、选择Module-ModuleSDK选择6-勾选.创建好的web项目。在web/WEB_INF目录下创建两个文件夹：classes和lib。IDEA全称IntelliJIDEA，是java编程语言开发的集成环境。

React基础

用class创建的组件，也叫类组件，只有类组件才有state，若是用箭头函数创建的组件，也叫无状态组件（statelesscomponent）react里面的循环用数组的map实现。

在react组件的生命周期函数中，this指向当前组件在reactclass定义的组件中，constructor构造方法中需要通过调用super()方法生成this，这时this指向当前组件；否则不存在this，使用会报错。

a).这里类型是babel，babel是什么？把ES6-ES5的工具，这里先知道就好，我们在实际应用中，详细解释。

上节用纯前端的方式，实现CURD，这节从之前的基础上，做些修改，完成react与后端接口的交互这节用到的的技术整个项目结构此处省略。。

ReactNative：在React框架之上，发展出来ReactNative用来开发移动应用。ps：因为React基础框架与React.js框架是同时出现、同时进化发展的，这就造成了React基础框架的基本概念、设计思想都是在React.js的相关文档中描述的。

如下(JS写法)等价于(JSX写法)JSX形式上非常像常见的HTML，但它并不是一种标记语言，它实，是调用React.createElement函数，所以在使用JSX时，务必在头部importReactfrom‘react’；。

从无到有,使用yarn开发react项目(配置及开发基础篇)(小白向)

熟悉NPM（Yarn），Node模块fs，http，路由，处理请求，express4（koa）；掌握创建websocket服务，MongoDB/MySQL数据库CRUD（Mongoose）；掌握微信小程序开发，掌握Vuex基础，Vue-router，Vuex等等。

Vue和React都是属于目前比较主流的前端框架，实际开发中也经常会拿Vue和React来比较。但是我们通常会根据各自优势来选择项目比较适合的框架。React优点：声明式设计React采用声明范式，可以轻松描述应用。

React面向组件编程、表单数据、组件通信、监听、生命周期、路由、Redux基本概念。练使用react完成项目开发、掌握Redux中的异步解决方案Saga。

React.js、Vue.js、Zepto.js。第八阶段：HTML5原生移动应用开发●Cordova：WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。

，运用阶段，在linux系统下，能够安装配置apache，php，mysql，svn，memcache，squid，lvs等一些web项目必要的工具，能够通过日志分析其状态等。

对于非技术类数据分析人员，初级工具只推荐一个：EXCEL。推荐书籍为《谁说菜鸟不会数据分析》，基础篇必须学习，提高篇不一定学(可用其他EXCEL进阶书籍)，也可以学习网上的各种公开课。

React项目基本配置

1、第一步：npminstallreact-router-s第二步：npminstallreact-router-dom-s第三步：第四步：在组件中使用Linkto=/Home标签即可进行页面跳转。

2、使用ts构建的react项目，现在tsconfig.json文件中配置baseUrl和paths。由于直接在tsconfig.json里面配置paths字段后重启项目，会将配置好的paths自动移除，所以采用extends字段让tsconfig.json继承自定义的tsconfig.paths.json。

3、如果不配置，访问和实际地址就都是http：//10.1：5000/api/searchAllTable，后端访问接口地址也是这样的路径，如果配置了，那就注意一下自己重写后的访问地址。

4、在config/config.js文件中添加配置在src/assets/css下新建theme.js文件这里只修改一个属性值(其他属性可以参考文档)编译后，home页面的按钮主题就被修改了至此一个基于umi的react项目结构就讲完了。

React在使用create-react-app创建项目慢的解决办法

1、你换一个英文目录试试吧。例如在D盘根目录建立一个React的目录，然后在React这个目录执行create-react-app来创建一个项目。有可能是目录原因的。

2、启动react的时候，执行npmstart出现：解决方法：这可能是create-react-app有丢包的缺陷，手动安装包后，需要重新npminstall一下，这样node_modules/.bin/目录下才会重新出现react-scripts的文件，这样npmstart命令才能正常执行。

3、create-react-app创建react项目，并启动项目。项目打包。此时如果只是普通部署，不要求体验效果时，把build文件下的文件拷贝到静态服务器即可。接下来考虑如何静态文件CDN部署。

4、解决：若有请去掉这个配置，再重启，就ok了原因：getCSSModuleLocalIdent是让css模块化的配置，就是说配置上后，你要在页面中使用css，得这样用使用对象.的方式获取class。

5、本次项目使用create-react-app命令进行创建这里我选择用Typescript作为开发语言。create-react-app的目录结构以上2个步骤也有antd官网提供简化版本。

创建React文件

1、新建一个文件夹，例如：react进入react文件夹中，按住shift键，右键选择打开PowerShell窗口。

2、搭建react脚手架，新建react项目完成后，等待，出现下图所示安装成功。

3、react动态创建100个组件步骤如下：创建一个HelloComponent.js文件，写入组件。并在App.js中调用HelloComponent组件。在HelloComponent.js文件中分别使用三种方式创建组件。

4、react的脚手架用法如下：全局安装npminstall-gcreate-react-app构建一个my-app的项目npxcreate-react-appmy-appCreateReactApp是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。

5、JSX里面的插入变量，需用{}，里面只支持表达式，不支持语句，例如（ifelse则不能插入）创建一个react项目，命令：create-react-app项目名。

6、这里我选择用Typescript作为开发语言。create-react-app的目录结构以上2个步骤也有antd官网提供简化版本。创建cra-antdtypescript对package.json进行修改在项目根目录创建一个craco.config.js用于修改默认配置。

react如何写app(reactcreateapp)

create-react-app使用

1、通过使用–g参数，我们将create-react-app安装到了系统的全局环境，这样就可以在任意路径下使用它了。

2、create-react-app创建react项目，并启动项目。项目打包。此时如果只是普通部署，不要求体验效果时，把build文件下的文件拷贝到静态服务器即可。接下来考虑如何静态文件CDN部署。

3、--save-devnpmiwebpack-bundle-analyzer--save-dev：生产版本关闭此项npminstallsimple-progress-webpack-plugin--save-dev以上配置是我项目中使用，可以按需使用。

4、在根目录下的package.json的label下的presets后面添加如下所示：在根目录下新建文件.babelrc，再将package.json中的“babel”对象全部删除。在.babelrc中配置再到命令行执行将react-scripts的配置释放出来。

React基础

1、用class创建的组件，也叫类组件，只有类组件才有state，若是用箭头函数创建的组件，也叫无状态组件（statelesscomponent）react里面的循环用数组的map实现。

2、在react组件的生命周期函数中，this指向当前组件在reactclass定义的组件中，constructor构造方法中需要通过调用super()方法生成this，这时this指向当前组件；否则不存在this，使用会报错。

3、a).这里类型是babel，babel是什么？把ES6-ES5的工具，这里先知道就好，我们在实际应用中，详细解释。

4、上节用纯前端的方式，实现CURD，这节从之前的基础上，做些修改，完成react与后端接口的交互这节用到的的技术整个项目结构此处省略。。

5、ReactNative：在React框架之上，发展出来ReactNative用来开发移动应用。ps：因为React基础框架与React.js框架是同时出现、同时进化发展的，这就造成了React基础框架的基本概念、设计思想都是在React.js的相关文档中描述的。

React在使用create-react-app创建项目慢的解决办法

你换一个英文目录试试吧。例如在D盘根目录建立一个React的目录，然后在React这个目录执行create-react-app来创建一个项目。有可能是目录原因的。

启动react的时候，执行npmstart出现：解决方法：这可能是create-react-app有丢包的缺陷，手动安装包后，需要重新npminstall一下，这样node_modules/.bin/目录下才会重新出现react-scripts的文件，这样npmstart命令才能正常执行。

create-react-app创建react项目，并启动项目。项目打包。此时如果只是普通部署，不要求体验效果时，把build文件下的文件拷贝到静态服务器即可。接下来考虑如何静态文件CDN部署。

解决：若有请去掉这个配置，再重启，就ok了原因：getCSSModuleLocalIdent是让css模块化的配置，就是说配置上后，你要在页面中使用css，得这样用使用对象.的方式获取class。

本次项目使用create-react-app命令进行创建这里我选择用Typescript作为开发语言。create-react-app的目录结构以上2个步骤也有antd官网提供简化版本。

我有一个使用Create-React-App创建的非常简单的React应用程序。当我运行npmstart时，它会按预期执行react-scriptsstart。但是，我必须等待近10分钟才能启动开发服务器。npmrunbuild也需要将近10分钟。

深入create-react-app原理

运行cra命令行创建项目，会在create-react-app模块处理用户输入和创建一个包含package.json的项目，然后执行react-scripts模块复制模板和更新package.json(包括dependencies、eslintConfig、browserslist和scripts)。

因为react项目多为SPA项目，用于生产部署时，存在首屏响应过慢导致用户难以忍受等待时间从而流失问题。一般导致首页响应过慢的原因有很多，网络问题是其中之一。本文记录通过七牛云免费CDN部署react项目。

结构和逻辑在React的世界里，结构和逻辑交由JSX文件组织，React将模板内嵌到逻辑内部，实现了一个JS代码和HTML混合的JSX。