自己动手搭建react-ssr服务器端渲染项目架构

最近折腾了下React的ssr项目的搭建,之前折腾过一次没有太多的进展。这次重新开始搭建react的项目架构。项目源码:https://github.com/rt-zhangxuefei/react-ssr-template

特别感谢:慕课网的Delllee的课程。这里我使用了saga代替thunk,中间也遇到了一些坑,中间层代理使用了http-proxy-middleware。文章记录我搭建过程中遇到的一些问题:

继续阅读“自己动手搭建react-ssr服务器端渲染项目架构”

create-react-app@next支持css,less modules问题

最近使用create-react-app构建项目时,需要使用less并且支持modules,不想使用eject,所以使用了react-app-rewired+react-app-rewire-less-modules的方式。但是…构建时仍然抛错。搜寻良久,发现是create-react-app版本问题,于是按照最新的@next版本,然而还是报错。仔细分析了升级的部分,通过package.json的依赖包看错,react-scripts使用还是1.X版本,尝试升级react-scripts到@next版本。然后构建,一切OK!


2019年2月15日更新:

最新版的react-app-rewired配合customize-cra已经完全支持了less及模块化,不需要引入其它的插件了。快速搭建项目脚手架可以参考https://github.com/rt-zhangxuefei/react-startup

读一读React源码(创建实例constructClassInstance)

上一篇只是粗略从源码跟了下首次渲染的过程,这里继续看看实例化一个Component的过程。从一个简单的demo例子入手:

App继承了React.Component基类,基类里面做的事情很少,包括PureComponent基类

定义了几个属性:

继续阅读“读一读React源码(创建实例constructClassInstance)”

读一读React源码(目录结构及构建)

主要目录

项目的主要目录(packages,scripts),packages目录下是各个模块的react代码,scripts下主要是构建,测试等相关的代码

 

构建工具:rollup

注意

如果使用npm install会有报错,改用yarn install

 

项目构建打包相关的代码

入口文件:build.js

 

npm run build

构建生成各个版本和功能模块的js文件,编译出来文件比较多

antd pro权限实现初探

antd是蚂蚁金服推出的基于React的UI组件库,ant pro是基于 ES2015+Reactdvag2 和 antd的开箱即用的中台前端/设计解决方案。ant pro让我们可以快速构建一个常用的后台管理系统的前端UI,非常值得学习和推荐使用的一个框架。我个人在熟悉项目源码的过程中,收获颇丰。我觉得不容易理解的部分是权限这块,这里整理下我所理解的,希望对大家有点帮助。

组件源码文件结构:

index里面export了4个部分:

 

依赖关系

 

这里authority(角色名称)支持多种不同的类型,导致了一些复杂性

说说我眼中的Vue和React

前序

我最早接触的是reactjs,时间是在2016年,当时主要从官网学习,并且写了一些笔记。坦白讲,当时学习了一段时间,只是对里面的概念有点印象而已。也搞不懂怎么去具体的使用在项目里面,里面的思想也仅仅停留在字面上。学了一段时间以后就放下了,就这样过了1年的时间。17年的6月,换了一份工作,直接上来就使用vue全家桶开发一个管理系统,时间一个月的时间,当时有人带,结合官方的文档进行开发。但是这个过程仍然觉得有点痛苦,就这样一个月的时间,总算是熬过来了。就这样让我第一次完整的接触了Vue,给我印象最深的是:中文的官网,简单的入门示例。通过这一个月的时间,让我终于对数据驱动视图,对从dom的繁琐操作释放出来是畅快感有了很真实的体验,感谢当初带我入门的磊哥。

继续阅读“说说我眼中的Vue和React”

vue实现类似添加购物车抛物线效果(类似饿了么,京东到家)

使用vue的transition来实现添加购物车的特效,效果如下:

为什么使用嵌套了的div来表示小球?

首先这是模拟了一个抛物线的效果,先普及一个基本知识,抛物线运动:分为水平的匀速运动和竖直向的自由落体(加速)。这里实现的思路是一个小球需要做2种运动,那么可以让这个小球做竖直向的加速运动,把这个小球放到一个盒子里面,让这个盒子做水平向的匀速运动。这样就完成模拟了一个抛物线运动,具体方法是在css里面分别设置transition,通过贝塞尔transition来模拟加速运动。

图示如下:

为什么使用了一个balls数组,而且存放5个元素

首先由于添加的过程,点击添加按钮可能比较连续,这样要模拟多个小球进入购物车的情况,所以需要预先准备几个box元素。为什么是5个?小球可以重复使用,根据网上的经验这里使用了5个,当然完全可以设置为7个8个。

 

具体代码见:https://github.com/rt-zhangxuefei/vue-add2cart-animation

vue单页hash模式在微信公众号分享链接,微信支付问题

在微信公众号中,如果使用vue开发单页应用,对接了微信授权等,那么分享(朋友圈等)需要满足常规以下条件

1. url必须为当前域名

2. 需要重定向到授权链接再跳转回来(带上用户信息)

 

遇到的问题是微信分享的时候,url会给你改变(例如http://a.com/#/index 变成http://a.com/?fromsingle#/index),我的处理办法是:

在main.js里面:

然后再window.location.href=拼成微信的授权链接

 

调起微信支付需要配置授权链接,单页应用hash模式下,Android和IPhone微信处理方式不一样,Android要正常点,IPhone常常会提示url未授权。因为两者默认的当前url地址不一样,比如我们支付页面的地址为a.com/wx/#/pay,我们也在微信授权配置这个地址,Android可以正常支付。在IPhone下,如果你是从其他页面进入的这个支付页面,比如从a.com/wx/#/index进入的,那么此时IPhone会把第一次进入的地址提交到微信进行支付,由于这个地址没有配置授权,所以提示未授权。

 

怎么处理这个问题呢?怎么只配置一个授权地址就满足所有页面的支付呢?

1. 前端地址使用a.com/wx/?#/path (就是这个问号?的作用)

2. 微信授权地址配置为a.com/wx/

 

当然有可能你要问如果没有wx这个路径呢?nginx配置location就行了