正文

react实践项目

Yuicon  Yuicon  2022-09-10  354

关键词：

React在Github上已经有接近70000的 star 数了，是目前最热门的前端框架。而我学习React也有一段时间了，现在就开始用 React+Redux 进行实战！

React 实践项目（一）

React 实践项目（二）

React 实践项目（三）

React 实践项目（四）

React 实践项目（五）

这次我们把应用部署到服务器上.

项目到现在麻雀虽小五脏俱全,为了提高我们写代码的积极性,自然是选择部署到服务器上在小伙伴面前秀一波了.部署 React 应用也是非常方便简单的.

打包应用

我们是用Facebook官方的零配置命令行工具 create-react-app 创建的项目,create-react-app 内置了打包的npm 命令

在命令行里切换到项目目录,执行

npm run build

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

如上图所示,我们的应用已经打包完毕.

安装 Nginx

Nginx 是一个高性能的HTTP和反向代理服务器.

在安装Nginx前需要先介绍下 Docker.

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。
云计算、大数据，移动技术的快速发展，加之企业业务需求的不断变化，导致企业架构要随时更改以适合业务需求，跟上技术更新的步伐。毫无疑问，这些重担都将压在企业开发人员身上；团队之间如何高效协调，快速交付产品，快速部署应用，以及满足企业业务需求，是开发人员亟需解决的问题。Docker技术恰好可以帮助开发人员解决这些问题。
为了解决开发人员和运维人员之间的协作关系，加快应用交付速度，越来越多的企业引入了DevOps这一概念。但是，传统的开发过程中，开发、测试、运维是三个独立运作的团队，团队之间沟通不畅，开发运维之间冲突时有发生，导致协作效率低下，产品交付延迟，影响了企业的业务运行。Docker技术将应用以集装箱的方式打包交付，使应用在不同的团队中共享，通过镜像的方式应用可以部署于任何环境中。这样避免了各团队之间的协作问题的出现，成为企业实现DevOps目标的重要工具。以容器方式交付的Docker技术支持不断地开发迭代，大大提升了产品开发和交付速度。
此外，与通过Hypervisor把底层设备虚拟化的虚拟机不同，Docker直接移植于Linux内核之上，通过运行Linux进程将底层设备虚拟隔离，这样系统性能的损耗也要比虚拟机低的多，几乎可以忽略。同时，Docker应用容器的启停非常高效，可以支持大规模的分布系统的水平扩展，真正给企业开发带来福音。

总之就是非常好用, linux windows mac上都可以安装,docker安装完成后我们先把nginx镜像下载到本地.

docker pull nginx

为了使用方便,我们用 docker-compose 管理容器.

创建 docker-compose.yml

version: ‘2‘
services:
  # 服务名称
  nginx:
    # 镜像:版本
    image: nginx:latest 
    # 映射容器80端口到本地80端口
    ports:
     - "80:80"
    # 数据卷 映射本地文件到容器
    volumes:
    # 映射nginx.conf文件到容器的/etc/nginx/conf.d目录并覆盖default.conf文件
    # - ./nginx.conf:/etc/nginx/conf.d/default.conf
    # 映射build文件夹到容器的/usr/share/nginx/html文件夹
     - ./build:/usr/share/nginx/html
    # 覆盖容器启动后默认执行的命令。
    command: /bin/bash -c "nginx -g ‘daemon off;‘"

完成后执行 docker-compose up -d 就会自动创建容器并在后台运行了

常用命令:

docker-compose down 关闭并删除容器
docker-compose ps 查看容器状态
docker-compose exec SERVICE COMMAND 可以用来进入容器内部进行一些操作,
比如 docker-compose exec nginx bash

静态资源配置

我们先把打包好的build文件夹上传至服务器,和docker-compose.yml 放在一起
在 docker-compose.yml 文件已经配置了会把同目录的 build 文件夹映射到nginx容器的/usr/share/nginx/html文件夹这个文件夹就是默认的静态资源文件夹

配置 Nginx

nginx镜像有一个默认的配置文件 default.conf

default.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ .php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ .php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache‘s document root
    # concurs with nginx‘s one
    #
    #location ~ /.ht {
    #    deny  all;
    #}
}

默认的配置有一个问题, 在非首页的路由页面刷新就会报404错误
我们使用 react-router 作为路由管理，在开发端的express服务器下运行和测试表现均正常，部署到线上的nginx服务器后，还需要对该应用在nginx的配置里作相应调整，否则浏览器将不能正常刷新，表现为页面不显示或页面跳转错误等异常。原因在于这些react应用在运行时会更改浏览器uri而又不真的希望服务器对这些uri去作响应，如果此时刷新浏览器，服务器收到浏览器发来的uri就去寻找资源，这个uri在服务器上是没有对应资源，结果服务器因找不到资源就发送403错误标志给浏览器。所以，我们要做的调整是：浏览器在使用这个react应用期间，无论uri更改与否，服务器都发回index.html这个页面就行。

创建 nginx.conf 文件

# gzip设置
gzip on;
gzip_vary on;

gzip_comp_level 6;
gzip_buffers 16 8k;

gzip_min_length 1000;
gzip_proxied any;
gzip_disable "msie6";
#gzip_http_version 1.0;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 其作用是按顺序检查文件是否存在，返回第一个找到的文件或文件夹（结尾加斜线表示为文件夹），如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。
        try_files $uri /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ .php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ .php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache‘s document root
    # concurs with nginx‘s one
    #
    #location ~ /.ht {
    #    deny  all;
    #}
}

将 docker-compose.yml 里的 # - ./nginx.conf:/etc/nginx/conf.d/default.conf 注释去掉用nginx.conf覆盖默认的配置

docker-compose down
docker-compose up -d

现在我们访问服务器的80端口就可以看到我们的应用了.比如我的服务器ip为 139.224.135.86 在浏览器输入 http://139.224.135.86 就可以访问了.

react实践项目

...态管理，这次我们使用Redux-saga管理Redux应用异步操作React实践项目（一）React实践项目（二）React实践项目（三）-首先我们来看看登陆的Reducerexportconstauth=( 查看详情

react实践项目

...ct也有一段时间了，现在就开始用React+Redux进行实战！React实践项目（一）本次实践代码部署好的网址上回说到用React写了一个带Header的首页，我们这次实践就使用Redux进行状态管理Rudex应用中所有的state都以一个对象树的形式储存... 查看详情

react实践项目

react项目-几种css实践

前言团队在使用react时，不断探索，使用了很多不同的css实现方式，此篇blog总结了，react项目中常见的几种css解决方案：inline-style/radium/style-component，只列举了团队项目中用过的一下实现方式，还有其他的不过多展开css的不足样... 查看详情

react+redux+antdesign+echarts项目实践

项目框架采用React.js作为项目的框架采用redux作为数据管理的框架采用antd作为项目的UI组件采用echarts完成项目中折线图的绘制个人项目工作流程总结拿到UI高保真图片之后先对整个页面进行模块化分，大的模块分为上部的折现图... 查看详情

react项目实践——babel(代码片段)

1.babelBabel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。（1）安装npminstall--save-devbabel-corebabel-eslintbabel-loaderbabel-polyfill babel-core：如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块... 查看详情

react项目实践（一）之项目创建

参考技术A创建项目生成目录结构项目创建完成，运行项目1，新创建工程，第一次引入pod库时。2，修改了Podfile文件，添加或删除了所依赖的pod库时。3，团队中新人拉取工程后获取pod库时。4，团队中，不同开发者要同步对pod库的... 查看详情

[转]react最佳实践——那些react没告诉你但很重要的事

...优雅的组织和编写react代码。用谷歌搜中文“React最佳实践”发现前两页几乎全都是同一篇国外文章的译文...所以我总结了下自己过去那个项目使用React踩过的一些坑，也整理了一些别人的观点，希望对部分react使用者有帮... 查看详情

react打包部署多级目录实践

参考技术A使用react-create-app创建项目，想实现打包后部署服务器的3级目录，经过多次调试跑通，并记录一下，方便自己后期使用，也方便其他伙伴有相同需求可以参考。服务端部署后的域名及路由预期：http://www.demo.com/webapp本地... 查看详情

React + Django 的最佳安全实践

】React+Django的最佳安全实践【英文标题】：BestsecuritypracticesforReact+Django【发布时间】：2018-06-2713:05:26【问题描述】：我目前正在开发一个使用DjangoAPI服务器和运行React的NodeJS服务器的项目。在开发中，我们在8000端口上运行Django，... 查看详情

关于reactrouter4的小实践(代码片段)

详细代码栗子：https://github.com/wayaha/react-dom-CYclone然后npminstallnpmstart分割线 1、这个项目使用create-react-app搭建；　　首先需要安装好create-react-appnpminstall-gcreate-react-app　　安装完毕之后就是搭建项目；create-react-appyour-proje 查看详情

react-native实践（基于antd-mobile）

react-native项目简单搭建：参照 https://github.com/ant-design/antd-mobile-samples/tree/1.x/create-react-native-app说明：需要安装node、npm、yarn...每一步ant官网介绍很清晰搭建项目过程之中可能需要注意的是：　　1. yarnaddantd-mobile--sa 查看详情

react-routerv4学习实践

最近学习了react-routerv4，根据官方API文档和网上资源做了一个简单的路由示例。先用官方的工具 create-react-app 初始化一个react项目模板，再根据自己的需要修改。要实现的路由：1.登录页（/login）2.主页（... 查看详情

在 Heroku 上部署 React 应用和 API 的最佳实践

】在Heroku上部署React应用和API的最佳实践【英文标题】：BestpracticestodeployaReactappandanAPIonHeroku【发布时间】：2020-10-2607:01:57【问题描述】：我目前正在开发一个使用React（通过create-react-app）和JSONServer作为API的项目。我有一个单一... 查看详情

react-native打包apk实践版

在完成项目的调试后，准备打包成安卓的APK完整的按照官网操作步骤进行操作，发现以下几个问题：1.~/.gradle/gradle.properties没有找到相关文件，这样的话就没有办法填空签名的keystore.SettingupgradlevariablesPlacethe my-release-key.ke... 查看详情

从vue重构到react的微应用实践总结(代码片段)

...方案，下面就跟大家分享这次微前端在重构上的落地实践吧。这次实践我简化了一下，放在Github上，大家可以自行clone来玩玩。技术栈首先，来讲讲技术栈，老项目主要用了下面的技术：框架Vuevuexvue-router... 查看详情

react应用多入口配置&&实践总结(代码片段)

背景还是之前的那个项目，做完国际化没多久，还没来得及划水，又有新的活了--移动端的兼容。考虑到后期的复杂度，需要做两套资源。具体的目标是：同一个URL，PC打开就显示PC的那一套，M端打开就显示Mobile的页面。create-reac... 查看详情

前端工程化-在react中对ddd领域驱动架构设计的实践

如何构建更稳健的前端业务模块代码组织形式？这是一个可以引来众多争议的话题，也是每个项目工程开发之前必须考虑的问题。方案控制反转 + 依赖注入 + 面向服务 (IOC + DI + SOA) 状态提升&... 查看详情

正文

react实践项目

这次我们把应用部署到服务器上.

打包应用

安装 Nginx

react实践项目

react实践项目

react实践项目

react项目-几种css实践

react+redux+antdesign+echarts项目实践

react项目实践——babel(代码片段)

react项目实践（一）之项目创建

[转]react最佳实践——那些react没告诉你但很重要的事

react打包部署多级目录实践

React + Django 的最佳安全实践

关于reactrouter4的小实践(代码片段)

react-native实践（基于antd-mobile）

react-routerv4学习实践

在 Heroku 上部署 React 应用和 API 的最佳实践

react-native打包apk实践版

从vue重构到react的微应用实践总结(代码片段)

react应用多入口配置&&实践总结(代码片段)

前端工程化-在react中对ddd领域驱动架构设计的实践