electron是一两年前挺火的一个框架 本质上是一个浏览器，但是集成了很多windows系统的功能，让前端开发也可以直接操作windows的窗体，做成一个实打实的桌面软件 （当然听说mac上也可以用electron，不过没试过） （没错我还在用windows，不是mac也不是linux，我是个lowB） 团队主要的技术栈是react，所以考虑用react开发，方便维护。 PS.由于项目是大半年前做的，所以一些细节可能记忆有误请见谅 几个重点： 1.想要能调试必须使用we...
简单介绍 首先本文不会对webpack代码进行解释，其所有配置都可以在文档上找到。 平时工作中会写一些多页面应用，因为习惯了react的开发模式，故此写了一个简单的配置，跟大家一起分享。如果你也喜欢，对你的开发有所帮助，希望给点鼓励（start） github地址：https://github.com/ivan-GM/Gm-cli 项目目录介绍：打包后文件目录：打包成cli如果你厌烦了新项目的复制、粘贴，也可以构建成cli 1，首先创建个文件夹，npm init初始化项目...
背景 还是之前的那个项目，做完国际化没多久，还没来得及划水， 又有新的活了 -- 移动端的兼容。 考虑到后期的复杂度， 需要做两套资源。 具体的目标是：同一个URL，PC打开就显示PC的那一套， M端打开就显示Mobile的页面。 create-react-app 脚手架本身不支持多入口， 需要改造，今天下午研究了一下，改造了一波， 基本达到了预期， 在这里简单把经验总结分享下。 先睹为快 Mobile:PC:输出之后的文件， 相比之前的index.html， 多了...
前言 本文讲述怎么实现动态加载组件，并借此阐述适配器模式。 一、普通路由例子import Center from page/center; import Data from page/data;function App(){return (<Router><Switch><Route exact path="/" render={() => (<Redirect to="/center" />)} /><Route path="/data" component={Data} /><Route path="/center" component={Center} /><Route render={() => <h1 style={{ textAlign: center, marginTop: 160px, color:rg...
webpack 升级到4之后还没好好的同步一个可实用的webpack架子，接下来用webpack4来搭建一个简单的react的多界面应用，废话不说 直接撸码创建工程$ mkdir demo && cd demo $ npm init -y webpack 配置安装react + babel 依赖 $ npm i -S react@16.3.0 react-dom@16.3.0$ npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-dev-server@3.1.1 webpack-merge@4.1.2 babel-cli@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24....
React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中，使用浏览器的调试工具去Debug移动端的代码，无疑是最吸引开发人员的特性之一。 试想一下，当你在手机屏幕按下一个按钮，处理事件的代码就可以立即在浏览器的调试工具里进行断点调试，而且每当你对代码进行修改，界面便可以完成快速地重载，省去昂长的编译时间，这会是多么提高工作效率。 传统的Web前端开发人员自然很熟悉浏览器的调试工具，但是对于如何将其在...
是什么高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。 为什么用封装并抽离组件的通用逻辑，让此部分逻辑在组件间更好地被复用。 如何用//hoc为我们的高阶组件，可以使用es7装饰器语法来使用高阶组件 //当然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的语法更优雅一些。 //高阶组件可以叠加使用，可以对一个组件使用多个高阶组件 @hoc class Hello extends React.Component {// } ...
1. 介绍 在开发react应用时，应该没有人用传统的方法引入react的源文件(js)，然后在html编辑吧。 大家都是用webpack + es6来结合react开发前端应用。 这个时候，我们可以手动使用npm来安装各种插件，来从头到尾自己搭建环境。 比如： npm install react react-dom --save npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save npm install babel webpack webpack-dev-server -g虽然自己搭建的...
Angular 和 React 都是伟大的框架/库。Angular 提供了 MVC（模型、视图、控制器）的定义结构。React 提供基于状态变化的轻量级呈现机制。通常情况下，开发者在 AngularJS 上有一个旧的应用程序后，他们会想用 ReactJS 建立新的特性。 虽然将 AngularJS 应用移除，从头开始建立一个 ReactJS 应用是不错的选择。但对于大规模应用来说，它不是一个可行的解决方案。在这种情况下，单独建立一个 React 组件并将其导入 Augular 会更容易。...
前言 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...
Async/Await是尚未正式公布的ES7标准新特性。简而言之，就是让你以同步方法的思维编写异步代码。对于前端，异步任务代码的编写经历了 callback 到现在流行的 Promise ，最终会进化为 Async/Await 。虽然这个特性尚未正式发布，但是利用babel polyfill我们已经可以在应用中使用它了。 现在假设一个简单的React/Redux应用，我将引入 Async/Await 到其代码。 Actions 此例子中有一个创建新文章的 Action ，传统方法是利用 Promise 结合...
不论是React还是React-native，facebook官方都推荐使用ES6的语法，没在项目中使用过的话，突然转换过来会遇到一些问题，如果还没有时间系统的学习下ES6那么注意一些常见的写法暂时也就够用的，这会给我们的开发带来很大的便捷，你会体验到ES6语法的无比简洁。下面给大家介绍es6在react中的应用，具体内容如下所示： import React,{Component} from react; class RepeatArrayextends Component{constructor() { super();}render(){...
本文介绍了react router 4.0以上的路由应用，分享给大家，具体如下：在4.0以下的react router中，嵌套的路由可以放在一个router标签中，形式如下,嵌套的路由也直接放在一起。<Route component={App}><Route path="groups" components={Groups} /><Route path="users" components={Users}><Route path="users/:userId" component={Profile} /></Route> </Route>但是在4.0以后，嵌套的路由与之前的就完全不同了，需要单独放置在嵌套的...
写这个的初衷是很难找一个简洁的项目脚手架，很多脚手架都有很多依赖，光看依赖就要很久，所以自己参照网上的内容，弄个这么一个简单的多页面的脚手架。 利用creat-react-app 新建一个react应用 npm install -g create-react-app然后创建一个项目 create-react-app democreate-react-app会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请用cnpm淘宝镜像安装。然后我们进入项目并启动。 cd dem...
前言 所谓高级组件，即：接受一个组件作为参数，并且其返回值也为一个react组件 而大家应该都知道，权限控制算是软件项目中的常用功能了。在网站中，权限控制一般分为两个维度：页面级别和页面元素级别。 我们来说说页面元素粒度的权限控制。在某个页面中，有个“创建用户”的按钮，管理员才能看到。 一般想到的做法类似这样 class Page extends Component{render() {let hasCreatePermission = tool.getAuth("createUser"); retur...