前言 Electron可以使用HTML、CSS、JavaScript构建跨平台桌面应用，可是在使用到React和Webpack时，会遇到一些配置问题，本文将针对React+Webpack下的Electron配置提供一个通用的解决方案。 环境配置"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-plugin-transform-class-properties": "^6.24.1","babel-plugin-transform-object-rest-spread": "^6.26.0","babel-preset-env": "^1.6.1","babel-preset-react": "^6.24.1...
通常公司的后台管理系统都需要权限控制，即不同的角色用户看到不同的菜单，如下图：下面，通过react实现这样的后台管理系统(脚手架)，功能简介：1.顶部的菜单项根据用户的角色动态生成。2.侧边测菜单项根据已选的顶部菜单动态生成。直接上代码：路由配置： export default (<Route path="/" component={App}><IndexRoute component={EmployeeList}/><Route path="/employee" component={Employee}><IndexRoute component={Employee...
前言 在一个复杂的SAP应用中，我们可能需要根据用户的角色控制用户进行页面的权限，甚至在用户进入系统之前就进行权限的控制。本文就此一权限控制进行讨论。本文假设读者了解React和React-Router的相关使用。 从传统的Router开始 一个传统的路由大概长下边这个样式，这是没有添加任何权限限制的。 export default (store) => {const history = syncHistoryWithStore(hashHistory, store);return (<Router history={history}><Route...
本文介绍了react-navigation 如何判断用户是否登录跳转到登录页的方法，分享给大家，也给自己留个笔记，具体如下：新建一个index.jsimport React, {Component} from react; import {AppRegistry, Text, View, Button,Image,StyleSheet,BackHandler,ToastAndroid} from react-native; import { StackNavigator,TabNavigator,NavigationActions } from react-navigation; //全局存储 import stroage from ./StorageUtil; import ...
之前使用的组件是ListView，当时要添加一个下拉刷新，上拉加载的功能，所以对ListView做了一些封装，但是后来看官方文档，不建议再使用ListView，因为效率问题，做过Android的朋友都知道，Android的ListView如果不自己处理一下，也是有效率问题的。所以官方又推出了FlatList，而且自带上拉下拉的功能。 功能简介 完全跨平台。支持水平布局模式。行组件显示或隐藏时可配置回调事件。支持单独的头部组件。支持单独的尾部组件。支持自...
React 教程 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 React 特点 1.声明式设计 ?React采用声明范式，可以轻松描述应用。 2.高效 ?React通过对DOM的模拟，最大限度地减少与DOM的交互。 3...
Async/Await是尚未正式公布的ES7标准新特性。简而言之，就是让你以同步方法的思维编写异步代码。对于前端，异步任务代码的编写经历了 callback 到现在流行的 Promise ，最终会进化为 Async/Await 。虽然这个特性尚未正式发布，但是利用babel polyfill我们已经可以在应用中使用它了。 现在假设一个简单的React/Redux应用，我将引入 Async/Await 到其代码。 Actions 此例子中有一个创建新文章的 Action ，传统方法是利用 Promise 结合...
前言 本文主要给大家介绍了关于nginx配置React静态页面的相关内容，文中给大家详细介绍了关于nginx的安装以及一些基本操作，然后给大家分享了React 静态页面 nginx 配置简洁版的示例代码，下面话不多说了，来一起看看详细的介绍吧。 关于nginx的安装启动以及80端口被占用的解决方法，大家也可以参考这篇文章：//www.gxlcms.com/article/110291.htm 第一步：安装 1、http://nginx.org/en/download.html 下载2、tar -xf nginx-1.2.0....
React简介 React是有Facebook开发出来用于构建前端界面的JS组件库，由于其背后的强大背景，使得这款库在技术开发上完全没有问题。 React的优势 解决大规模项目开发中数据不断变化变得难以操作的问题；组件化开发，使得开发更加快速；单向数据流，有利于找到问题；虚拟DOM，在React内部有一套diff算法可以快速的计算出整体需要改动的位置，从而做到快速局部刷新；举个栗子：删除一个列表再插入个新表，计算后会比较出不同然后插进去...
在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架，此文将简要介绍下 fetch 的基本使用。 在 AJAX 时代，进行请求 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题，但是当我们进行 Hybrid App 开发的时候，如我之前介绍的Ionic 和React Native，都可以使用 fetch 进行完美的网...
本文介绍了React Native 搭建开发环境，分享给大家，具体如下： 准备工作 node -v：确认是否安装Node，若已经成功安装了，则执行下面的命令；否则先进行Node的安装。npm install -g create-react-native-app：使用npm快速创建React Native应用。create-react-native-app AwesomeProject：创建名为AwesomeProject的项目。cd AwesomeProject：进入项目所在文件目录。yard start：启动服务，终端会显示二维码和链接地址。手机下载Expo...
?在使用 React 编写组件的时候，我们常常会碰到两个不同的组件之间需要共享状态情况，而通常的做法就是提升状态到父组件。但是这样做会有一个问题，就是尽管只有两个组件需要这个状态，但是因为把状态提到了父组件，那么在状态变化的时候，父组件以及其下面的所有子组件都会重新 render，如果你的父组件比较复杂，包含了其他很多子组件的话，就有可能引起性能问题。 Redux 通过把状态放在全局的 store 里，然后组件去订阅各自需要的...
前言 大家应该都知道，TabBarIOS是RN中自带的组件,可直接使用,不用引用第三方组件,下面讲解TabBarIOS的使用方法，话不多说了，来一起看看详细的介绍吧。首先看一下效果图,如下图所示:效果图 看完效果图再对代码进行说明.import React, { Component } from react; import {StyleSheet,View,TabBarIOS,NavigatorIOS,Navigator,AppRegistry,Image,TouchableHighlight,Platform, } from react-native; //首先导入需要的组件 import Hom...
前言 众所周知在React Native中如何实现页面的跳转,这是一个突破点也是一个难点,想让我们的页面切换起来动起来应该是每一个初学者所追求的,那么在RN中实现这样的功能那必须要了解Navigator的用法了.Navigator是React Native自带的组件,不需要导入第三方组件,下面就来具体说明如何使用. 方法如下 首先,我们最好不要把index.ios.js和index.android.js文件写的很冗余很多代码,可以仅仅将其当做是一个工程的入口,好,废话不多说,开始上代...
本文介绍了React实践之Tree组件，分享给大家，具体如下：实现功能 渲染数据展开合并使用 数据结构： const node = {title: 00000, key: 0 ,level:level1,open: true,child:[ {title: 0-111111, key: 0-0,level:level2,open: true,child:[ { title: 0-1-1111, key: 0-0-0,level:level3, }, { title: 0-1-2222, key: 0-0-1,level:level3,open: true,child: [{ title: 0-1-2-11111, key: 0-0-1-0,level:level4,open: true,child: [{ ...