前言本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程。注意本文不提供一条龙式的使用方法，只是将使用过程中的一些实现思路进行总结，供以参考。react项目中导入ueditor，会存在各种不正交的问题，需要注意。引入首先在ueditor官网下载最新安装包，然后在项目入口的html中导入（导入方式不一，可以采用import的方式，需要自行度娘。但是无论哪种引入方式，只要想自定义功能，不正交问题就难以避免QAQ）。不管三...
本文介绍了了Webpack 4.x搭建react开发环境的方法步骤，分享给大家，也给自己留个笔记 必要依赖一览(npm install) 安装好。"dependencies": {"babel-core": "^6.26.3","babel-loader": "^7.1.5","babel-preset-env": "^1.7.0","react": "^16.4.2","react-dom": "^16.4.2","webpack": "^4.16.5"... }babel系列是干什么用的呢？是为了支持es6以上的高级语法的编译。但是因为react有jsx这个东西存在，所以单纯的babel是不够的，此外要...
当我问自己第一百次时，我正在研究一个典型的CRUD屏幕：“我应该将状态保留在这个组件中还是将其移动到父组件？”。 如果需要对子组件的状态进行轻微控制。您可能也遇到了同样的问题。 让我们通过一个简单的例子和??三种修复方法来回顾它。前两种方法是常见的做法，第三种方法不太常规。 问题； 为了向您展示我的意思，我将使用一个简单的书籍CRUD（译者注：增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)）屏幕（...
问题 最近在试着用react做一个音乐播放器，在这之前其实并不了解styled-components，但由于使用css in js并且想实现hover效果，百度各种解决方案后发现了styled-components这个好东西，如果你看到了这篇博客，就证明你应该了解或者熟练运用styled-components了。 回到项目开发中，一个音乐播放器应该由多个组件组成，其中有一个list组件用于展示歌曲列表，就像这样 鹅。。。好像暴露了我的喜好。。。 每一列就是一个div（当然ul也...
iOS消息推送的基本流程 1.注册：为应用程序申请消息推送服务。此时你的设备会向APNs服务器发送注册请求。2. APNs服务器接受请求，并将deviceToken返给你设备上的应用程序 3.客户端应用程序将deviceToken发送给后台服务器程序，后台接收并储存。 4.后台服务器向APNs服务器发送推送消息 5.APNs服务器将消息发给deviceToken对应设备上的应用程序 使用leanclound进行消息推送 优势：文档清晰，价格便宜 接入Leanclound 1.首先需要创建一...
需求和出发点我们会有较多的小的单页应用，主要是一些简单的页面和活动之类。这些页面相互之间没有交集，但是会有一些可以共用的代码，资源、接口、组件啥的。 对此，我们想到了两种解决方案： react-router 路由方案；同一个项目的多入口编译；针对我们的业务需求，其实 react-router 方案会有两个小问题： 单个活动的修改，其实需要编译整个项目；若是不做编译优化，整个项目的包会比较大，但其实没必要，当然这个可以通过 react...
在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换. 这些组件分成下面两种.第一种非常简单,同时大多数第三方组件都能达到效果.这里重点讲述第二种,我们要让第二种组件不仅能左右滑动,同时还能够在点击的时候自动滑动,将点击的位置滑动到正中间. 准备 我们先来分析一波.一个滑动组件在APP上是一种什么状态.这里可以看出,tab组件需要考虑到长度超过APP的屏幕,并且在超过之后能够滑动. 同时计算出当前位置需要滑动多少距...
为什么要实现服务端渲染(SSR)总结下来有以下几点： SEO，让搜索引擎更容易读取页面内容首屏渲染速度更快（重点），无需等待js文件下载执行的过程代码同构，服务端和客户端可以共享某些代码今天我们将构建一个使用 Redux 的简单的 React 应用程序，实现服务端渲染(SSR)。该示例包括异步数据抓取，这使得任务变得更有趣。 如果您想使用本文中讨论的代码，请查看GitHub: answer518/react-redux-ssr 安装环境在开始编写应用之前，需要我...
1webpack简介webpack是目前最流行的打包工具之一，是一个为前端模块打包构建而生的工具，它既吸取了大量已有的方案优点和教训，也解决了很多前端开发过程中已有的痛点，如代码的拆分与异步加载，对非js资源的支持，强大的loader设计使得它更像是一个构建平台，而不是打包工具。 2webpack,react开发环境 1）新建一个项目文件夹,进入此文件夹，创建package.json文件(npm init命令) 2）确认已安装webpack,web pack-dev-server模块 3）...
前言React Native 可以开发 ios 和 android 的 app，在开发过程中，势必会遇上屏幕适配（ios 好几种尺寸的屏幕以及 android 各种尺寸的屏幕）的问题，下面介绍一种几行代码搞定 RN 适配的方法！ 屏幕适配的前置知识RN 中的尺寸单位为 dp，而设计稿中的单位为 px原理虽然单位不同，但是元素所占屏幕宽度的比例是相同的 利用元素所占屏幕比例不变的特性，来将 px 转为 dp（这样实现屏幕适配的话，在不同尺寸的屏幕下，元素会等比放大...
this在javascript中已经相当灵活，把它放到React中给我们的选择就更加困惑了。下面一起来看看React this的5种绑定方法。1.使用React.createClass如果你使用的是React 15及以下的版本，你可能使用过React.createClass函数来创建一个组件。你在里面创建的所有函数的this将会自动绑定到组件上。const App = React.createClass({handleClick() {console.log(this > , this); // this 指向App组件本身},render() {return (<div onClick=...
新公司前端就我一个，目前个人选型用react作技术栈开发前端h5页面。最近做一个需求是pc页面需要seo的，后端是Java开发，又不想自己用ssr做seo渲染，只好写html给java大神改成jsp了。然而这个又需要搞一套工作流太麻烦（太懒了），所以直接拿来create-react-app的工作流进行修改了。附上Git地址。 修改dev流程 在已经通过create-react-app生成项目的基础下yarn run eject yarn add globby 用于查看html文件 修改config/paths.js //遍...
1.初始化项目 mkdir react-redux && cd react-redux npm init -y2.安装webpack npm i webpack -Dnpm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies中，主要在开发环境中的依赖包. 如果使用webpack 4+ 版本，还需要安装 CLI。 npm install -D webpack webpack-cli3.新建一下项目结构 react-redux|- package.json + |- /dist + |- index.html|- /src|- index.js index.html <!DOCT...
正文最近的react项目需要使用轮播图，自然而然的就想到了swiper，一直想通过npm安装的方式来使用，但是网上找了很多，资料很少，于是就暂时通过在index.html里直接引用swiper的js和css文件的方式来加载，下面来说一下具体的步骤和使用方法。首先说一下我这里使用的是swiper3x系列。接下来说具体的步骤：在index.html中引入js和css文件<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content=...
本文介绍了React从react-router路由上做登陆验证控制的方法，分享给大家，具体如下：验证代码 import React from react import {connect} from react-redux;function requireAuthentication(Component) {// 组件有已登陆的模块 直接返回 (防止从新渲染)if (Component.AuthenticatedComponent) {return Component.AuthenticatedComponent}// 创建验证组件class AuthenticatedComponent extends React.Component {static contextType...