最近针对日常业务需求使用react封装了一套[组件库], 大概记录下整个开发过程中的心得。由于篇幅原因，在这里只对开发过程中比较纠结的选型和打包等进行讨论，后续再对具体组件的封装进行讨论。概述我们都知道，组件化的开发模式对于我们的开发效率有着极大的提升，针对我们日常使用的基本组件进行封装，可以大量的简化我们对于基本UI的关注度，让我们的工作聚焦在业务逻辑上，很好的分离业务与基础UI的代码，使得整个项目更有调理，...
目前Javascript的测试工具很多，但是针对React的测试策略，Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址：https://facebook.github.io/jest/。我们可以看到Jest官网宣称的是：Painless JavaScript Testing。是Facebook用于测试服务和React应用程序的JavaScript单元测试框架。 所谓单元测试也就是对每个单元进行测试，通俗的将一般针对的是函数，类或单个组件，不涉及系统和集成。单元测试是软件测试的基础测试。Jest主...
Eslint介绍 Eslint 是一个JavaScript验证工具,有了它可以让你的编辑器像ide一样进行一些静态的错误提示功能.安装eslint $ npm install eslint -g项目需要安装的插件 "babel-eslint": "^8.0.3","eslint": "^4.13.1","eslint-plugin-react": "^7.5.1",配置详情下面的配置涵盖了开发者所需要的绝大部分信息，rules中的值0、1、2分别表示不开启检查、警告、错误。你可以看到下面有些是0，如果有需要开启检查，可以自己修改为1或者2。 m...
前言最近在写 koa 的时候想到，如果我部分代码提供api，部分代码支持ssr，那我应该如何写呢？（不想拆成 2个服务的情况下） 而且最近写的项目里面也用过一些服务端渲染，如nuxt，自己也搭过next的项目，确实开发体验都非常友好，但是友好归友好，具体又是如何实现的呢，诸位有没有考虑过？ 本着求真务实的折腾态度，选了react作为研究对象（主要是vue写的有点多，恶心了），那下面就简单就以最小成本写一个react的服务端渲染 demo用...
一、NavigatorIOS组件介绍1，组件说明使用 NavigatorIOS 我们可以实现应用的导航（路由）功能，即实现视图之间的切换和前进、后退。并且在页面上方会有个导航栏（可以隐藏）。NavigatorIOS 组件本质上是对 UIKit navigation 的包装。使用 NavigatorIOS 进行路由切换，实际上就是调用 UIKit 的 navigation。NavigatorIOS 组件只支持 iOS 系统。React Native 还提供了一个 iOS 和 Android 都通用导航组件：Navigator。这个以后再说。...
最近在琢磨react中的一些小技巧，这篇文章记录一下在redux中用装饰器来写connect。 通常我们需要一个reducer和一个action，然后使用connect来包裹你的Component。假设你已经有一个key为main的reducer和一个action.js. 我们的App.js一般都这么写： import React from react import {render} from react-dom import {connect} from react-redux import {bindActionCreators} from redux import action from action.jsclass App exte...
在开发RN的漫漫长河中,早晚有那么一天要接触到安卓的原生开发,笔者来介绍一下其中的酸甜苦辣.对于一个不懂android的小白来说,刚开始有点难,不过都是万事开头难.语言是想通的,原理也是大径若一.开发过程中是要集成高德的导航功能,没有找到好的轮子的,只要写原生代码,然后在用JS去调用原生的导航模块. 首先注册模块 其意义在与将类注册到RN中,才能用JS去调用 public class AnExampleReactPackage implements ReactPackage {@Override...
D3js力导向图搭建d3js是一个可以基于数据来操作文档的JavaScript库。可以使用HTML,CSS,SVG以及Canvas来展示数据。力导向图能够用来表示节点间多对多的关系。实现效果：连线有箭头，点击节点能改变该节点颜色和所连接的线的粗细，缩放、拖拽。版本：4.X安装和导入npm安装：npm install d3前端导入：import * as d3 from d3;一、完整代码import React, { Component } from react; import PropTypes from prop-types; import { connec...
1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具，能够把各种文件（例如：ReactJS、Babel、Coffeescript、Less/Sass等）作为模块进行编译后进行打包。 2.安装Webpack 要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装。 npm install webpack -g3.创建一个项目 安装好后创建一个名叫learn-webpack的项目并进入该项目文件夹，当然项目名字你可以起你自己想要的名字。 mkdir learn...
前言 距离React Router v4 正式发布也已经挺久了，这周把一个React的架子做了升级，之前的路由用的还是v2.7.0版的，所以决定把路由也升级下，正好“尝尝鲜”... 江湖传言，目前官方同时维护 2.x 和 4.x 两个版本。（ヾ(??﹏?)??咦，此刻相信机智如我的你也会发现，ReactRouter v3 去哪儿了？整丢了？？巴拉出锅了？？？敢不敢给我个完美的解释！？）事实上 3.x 版本相比于 2.x 并没有引入任何新的特性，只是将 2.x 版本中部分废弃 ...
react-router作为react框架路由解决方案在react项目中举足轻重。 在react-router 4.0版本中，API与先前版本相比有了很大的修改，在2.0、3.0中常用的<Router>组件作为路由底层配置组件不再常用，取而代之的是四个各有不同的路由组件： <BrowserRouter>, <HashRouter>, <MemoryRouter>, <StaticRouter> 其中<MemoryRouter>组件在内存中保存“URL”信息，不会修改浏览器的地址栏，往往用于React Native或测试环境等非浏览器环境。 而<...
前言 或许你当前的项目还没有到应用Redux的程度，但提前了解一下也没有坏处，本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢？ React UI框架 Redux 状态管理工具，与React没有任何关系，其他UI框架也可以使用Redux react-redux React插件，作用：方便在React项目中使用Redux react-thunk 中间件，作用：支持异步action 目录结构 Tips：与Redux无关的目录已省略 |--src|-- store Redux目录|-- actions.js|-- i...
属性确认的作用使用 React Native 创建的组件是可以复用的，所以我们开发的组件可能会给项目组其他同事使用。但别人可能对这个组件不熟悉，常常会忘记使用某些属性，或者某些属性传递的数据类型有误。因此我们可以在开发 React Native 自定义组件时，可以通过属性确认来声明这个组件需要哪些属性。这样，如果在调用这个自定义组件时没有提供相应的属性，则会在手机与调试工具中弹出警告信息，告知开发者该组件需要哪些属性。 React...
前言 刚入门React可能会因为React的单向数据流的特性而遇到组件间沟通的麻烦，下面这篇文章就来给大家详细介绍下，在开始之前先来看一张图：react组件通信需要组件之进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信1. 父组件向子组件通信 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息 Child.jsx import React from react; import...
一、开源库介绍 今年1月份，新开源的react-natvigation库备受瞩目。在短短不到3个月的时间，github上星数已达4000+。Fb推荐使用库，并且在React Native当前最新版本0.44中将Navigator删除。react-navigation据称有原生般的性能体验效果。可能会成为未来React Native导航组件的主流军。本篇内容基于【 ^1.0.0-beta.9 】版本来介绍关于该库的使用和实战技巧。可以看到，虽然是beta版本，不过基本稳定，大家可放心在项目中使用。奉上 ...