Front Tech

Laravel(REST API)+React入门范例

不知道什么时候开始的以讹传讹,React变成了“很难入门”的框架,但React其实是近几年主流前端框架中最轻量、最简单的:只专注于视图(View)的处理,从发布至今多次拆分模块(拆出了ReactDOM,拆分了原来的addons),让React核心部分更简单。当然,React的生态很庞大,刚上手就面对整个生态会觉得复杂,但如果是用React完成日常工作中最常见的应用场景——前端读取后端数据实现增删该查,是非常简单的。 本文使用setSetate()和生命周期(Lifecycle)方法,完成具有完整功能的前端React组件。假设读者有一定的Javascrit经验,比如基础的ES6语法。可以使用命令行,能配置PHP运行Laravel。基本不涉及PHP代码,选Laravel是因为它已经预装了React的开发环境,节省配置时间。 环境 Ubuntu 16.04 Laravel 5.6 PHP 7.3.0 安装&配置 安装composer,创建项目dmyz:

切换到项目根目录,将前端库更换成React,安装依赖的Javascript包,进行第一次 …

Continue Reading
Tech

主流React Native组件库比较

本文比较React Native(以下简称RN)的三个组件库:NativeBase、Shoutem、React Native Elements。方法是制作一个在Expo中运行,包含读取Wordpress文章列表,显示文章内容,以及一个登录表单界面演示的App,对比三个组件库在使用层面的差异,不涉及源码质量、平台设备兼容性相关的问题。 NativeBase GitHub: https://github.com/GeekyAnts/NativeBase npm: npm install native-base –save Demo: NativeBase-demo 列表 登录 如果只考虑组件丰富程度,首推NativeBase。比其他两个库多了Drawer,FABs,Footer Tabs等组件。设计哲学是尽量使用JSX,减少props来增加灵活性。组件名也是按照HTML的习惯(Content/Header/Footer),前端可以很快上手。使用这个组件库连RN的View都可以省掉,它提供了Container。但这也导致会受限于NativeBase本身,比如我自己想给一些组件用TouchableOpacity就尝 …

Continue Reading
Tech

隐介藏形——ReactJS源码索引

React的设计经常被讨论,但因为相关文件很多,源代码读起来比较累。正好最近看到Under the hood:ReactJS这个项目分享了React核心代码的流程图(MIT协议),取其中几张写成这篇文章供阅读源码时作为目录索引。 文章分4部分: ReactDOM.render&ReactMount Transaction Mount this.setState 源码以v15.6.1为例,不会直接复制大段代码,主要是以超链接链到github源码对应的位置——通常是链到函数被调用的位置,少数情况会链到申明的位置。核心代码当然会涉及VDOM和事件代理,网上相关文章非常多,本文不再赘述,官方文档中已有的内容也会尽量省略。流程图是svg格式,图形填充颜色根据不同文件使用不同颜色。以iframe标签嵌入。这是兼容性最好的方式,但不知道这篇文章会被爬虫带到哪,以及各种RSS阅读器是否支持,所以附上原文地址:dmyz.org/archives/983

Continue Reading