REACT - 技术教程文章

React 入门,5个常用DEMO展示【代码】【图】

阅读前请看这里: * 了解js及jQuery的使用 * 对react有一定的了解,知道jsx的语法 * 这里只讲述如何使用react,并不介绍react的优缺点如果不满足这些,建议先了解下,然后再看这篇文章下面会讲述5个react的实例,虽然仅有5个,但在常用的开发中,几乎会包含大部分的情况,只要熟练掌握这5个demo,相信一定会解决大部分问题。demo中,所有样例会打包后,传递到附件,大家可以下载阅览,最好自己亲手实践下,不要直接copy代码,没有意...

使用webpack和react搭建项目【代码】【图】

看了N多博客,日志,一边迷茫一边摸索。本文记录流程。我怕自己忘了。。。并且修复了博客园首页推荐那个日志中遇到的bug1、webstorm新建一个空白项目,比如webpack_demo2、因为要用react和es6语法,调整webstorm-设置-语言-javascript-jsx,确定。这样文件不会报错。3、新建app(存放入口文件,component组件),static(存放打包后的文件),webpack(存放webpack配置文件)三个文件夹4、在webpack_demo根目录,打开cmd或者终端,...

React Native TextInput 提交时/return时 如何隐藏输入光标

...render(){  <View>    <TextInput      value=‘text input‘      onSubmitEditing={Keyboard.dismiss}     />  </View>}...如上:只要在onsubmitEditing中调用Keyboard.dismiss就好了原文:http://www.cnblogs.com/codetime/p/7133098.html

react高阶组件【代码】【图】

高阶组件为了提高组件复用性,在react中就有了HOC(Higher-Order Component)的概念。所谓的高阶组件,其本质依旧是组件,只是它返回另外一个组件,产生新的组件可以对属性进行包装,也可以重写部分生命周期。首先看一下简单的例子:在components文件夹下新建Hoc.js组件文件,并在index.js中引入该组件。Hoc.jsimport React, { Component } from "react";function test(props){return (<div>{props.stage} - {props.name}</div>) }...

解决React 安装 antd 后出现的Module not found: Can't resolve './locale' in '...rc-picker/node-modules.....'一系列问题问题【图】

最近看到很多小伙伴发现了antd的这个问题,试用了网上的办法不行,我自己想了一种可行的方法,大家可以试一试。有位大佬用了yarn eject 方式 ,通过暴露config配置,在config.webpack.js里的alias配置自己下的稍前版本的moment.js 敲入一行代码配置别名:"moment$":"moment/moment.js",这样有些时候的确能起到作用。但是,这是包里配置包,是项目配置的包里嵌套的包,这个方法是失效的 解决办法:1:终端打开项目的node-modules下的 rc-pick...

运行.xcworkspace项目后报错:'React/RCTBundleURLProvider.h’ file not found

情况:根据https://github.com/rebeccahughes/react-native-device-info添加依赖库,运行.xcworkspacea项目后报错解决:Delete node modules, then run npm install (or better yet yarn) and after everything has finished downloading, run react-native upgrade which should give you the option to replace old files with the template ones, by doing so you re-link your native dependencies in react-native which shou...

react 复制内容【代码】

const CopyList=(props)=>{const handleCopyClick = (e) =>{//复制的内容console.log(99,props.text);copy(props.text);if(props.text){message.success(‘复制成功‘);}const range = document.createRange();window.getSelection().removeAllRanges();// range.selectNodeContents(e.target.innerHTML); range.selectNode(e.target.innerText);window.getSelection().addRange(range); //返回一个selection对象const su...

《React+Redux前端开发实战》笔记3:基于Webpack构建的Hello World案例(下)【代码】【图】

2.使用React编码下面正式开始使用React来编写前端代码。(1)npm安装react和react-dom:npm install react react-dom -S(2)用下面代码替换./src/index.jsx中的console:import React from‘react‘;import { render } from‘react-dom‘;class App extends React.Component {render () {return <p> Hello React</p>;}}render(<App/>, document.getElementById(‘app‘));(3)在根目录下执行:./node_modules/.bin/webpack -d现...

ReactiveCocoa Weak-Strong Dance

AC在应用中大量使用了block,由于Objective-C语言的内存管理是基于引用计数的,为了避免循环引用问题,在block中如果要引用self,需要使用@weakify(self)和@strongify(self)来避免强引用。一、block的循环引用问题 ?[objc] view plain copy print?- (void)loadView { [superloadView]; _observer = [[NSNotificationCenter defaultCenter] addObserverForName:@"testKey" ...

海马玩模拟器——搭建React Native环境

Visual Studio Emulator for Android 模拟器国内这网络环境不太用,所以使用海马玩模拟器,给大家推荐一下!下面开始配置环境:1)下载1.8+JDK,配置JDK环境参考http://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html2)下载Android Studio配置Android SDK环境,SDK的platform-tools、tools两个子目录加入系统PATH环境变量C:\Users\...\Sdk\tools;C:\Users\...\Sdk\platform-tools;注:Android SDK Build-Tools 必须是2...

ReactNavigation中如何实现页面跳转

一、ReactNavigation中如何实现页面跳转 因为每个屏幕组件(具有路由地址的组件)都是有App根组件自动创建并挂载的,App组件在创建屏幕组建时,会自动传递进来一个props: navigation 从当前屏幕跳转到其它屏幕:this.props.navigation.navigate( ‘屏幕地址‘ ) 注意:默认情况下,Image没有onPress事件,如果想被点击实现跳转,需要封装到“触摸反馈组件”,如<TouchableOpacity onPress={}> <Image/></TouchableOpacity> 3.Rea...

React Native开发必备的10个插件包

Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等。Sublime Text 更妙的是它的可扩展性。所以,这里挑选了全栈开发必备的10款 Sublime Text 插件,让本已精彩的编辑器更加好用,全端开发的码农们不用去网上一个个找了,赶紧收藏起来吧。 1. Package Control 作为安装 Sublime Text 插件的必备利器,Package Control 是这款编辑器的标配,可以方便开发人员快速安装需要的插件。 2. Git 在工作...

React connect()() 双括号 --柯里化写法【代码】

1、有人提问:  这段代码是dva的基础代码import React from ‘react‘; import { connect } from ‘dva‘;function IndexPage() {return (<div> this is a div </div>); }export default connect()(IndexPage);  【请问】最后一行这个 connect()(IndexPage) 怎么理解?  还要请教:这两个括号的在一起的写法是es6语吗?(我在阮一峰的es6指南中没找到这个语法说明,我要看箭头函数一章,还是到哪章去了解这个()())  老司机...

[RN] React Native 封装选择弹出框(ios&android)【图】

之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用。先上动态效果图~ 参考:https://www.jianshu.com/p/42b4390e860ehttps://www.jianshu.com/p/71c4d047b2f8 原文:https://www.cnblogs.com/wukong1688/p/10960917.html

reacto小项目【代码】

本章要讲述一个评价栏的制作。首先先简单写一个ract组件来试试。index.html<!DOCTYPE html><html><head><title>Hello React</title><script src="../js/jquery.min.js"></script><script src="../js/JSXTransformer.js"></script><script src="../js/react-0.13.4.min.js"></script><script src="../js/react-dom-0.14.0.js"></script></head><body><div id="content"></div><script src="../component/CommentBox.js" type="text/...

react倒计时导致的页面刷新问题

记录一次倒计时导致的页面刷新异常问题 背景如下:做了个活动页面,每晚21点活动开始,需要展示倒计时,需求让倒计时自动展示,不需要用户刷新页面,那么问题来了:1、倒计时需要一直定时,在判断不展示的时候,需要延长倒计时时间,并且隐藏倒计时,展示其他的视觉2、倒计时展示期间,需要每秒刷新3、倒计时的展示与否,需要设置state 而问题主要出现在第3点上,频繁的设置state,导致页面在disable cathe时,会刷新,特别是每秒更...

react 中的 三大重要属性state refs props【代码】

React中 的三大属性还是挺重要的呢 那今天我们就来说一下 这React中的三大属性叭!分别是 state refs props No.1 : state state 它的作用是 初始化指令1constuctor(){ 2 super() // 这是必写的 super34this.state = { 5 stateName : value 6 } 7 }读取的话就是使用this.state.stateName这就是给它 初始化值的方式如果想修改state中的值,在事件成员函数中如何修改state呢fn(){this.setState(){stateName : ‘newna...

React学习笔记4【代码】【图】

今天来说说如何利用react这个框架:第一步,安装NodeJS,这个下载下来直接安装即可;第二步,检查npm和node是否安装成功,Windows键+R键启动“运行”,输入cmd回车打开命令行,然后分别输入如下命令:node -vnpm -v如果出现如下结果,说明安装成功,解释一下,安装的node.js中包含了npm工具,所以才会出现如下结果:当然,这里的npm不一定是最新版本的,如果想安装最新版本的,可以再运行下面的命令:npm install npm@latest -g另外...

[HMLY]14.ReactiveCocoa 和 MVVM 入门【图】

MVC任何一个正经开发过一阵子软件的人都熟悉MVC,它意思是Model View Controller, 是一个在复杂应用设计中组织代码的公认模式. 它也被证实在 iOS 开发中有着第二种含义: Massive View Controller(重量级视图控制器)。它让许多程序员绞尽脑汁如何去使代码被解耦和组织地让人满意. 总的来说, iOS 开发者已经得出结论: 他们需要给视图控制器瘦身, 并进一步分离事物;但该怎么做呢? MVVM于是MVVM流行起来, 它代表Model View View-Model,...

React-Native hello word 搭建及新手常见问题【图】

参考文档:http://reactnative.cn/docs/0.20/getting-started.html cmd 打开 敲入1、npm config set registry https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist 2、npm install -g react-native-cli 3、 cmd 中切换到指定的项目路径 react-native init AwesomeProject 4、 启动服务: react-native start运行程序: react-native run-android 问题: 找不到 sdk 参考:http://blog.cs...

React中事件的处理【代码】

React 中使用 onClick 类似的写法来监听事件,注意 this 绑定问题 React 里严格遵循单项数据流,没有数据双向绑定,所以要处理两件事,第一是元素本身值的赋值,第二是值改变以后的事件,例如输入框需要设置 value 和 onChange 。 1.在 src -> components 文件夹中,再新建 CartSample.js ,具体代码如下:import React, { Component } from 'react';export default class CartSample extends Component {// 状态的初始化一般放在...

如何对react进行性能优化

{...this.props} (不要滥用,请只传递component需要的props,传得太多,或者层次传得太深,都会加重shouldComponentUpdate里面的数据比较负担,因此,也请慎用spread attributes(<Component {...props} />))。::this.handleChange()。(请将方法的bind一律置于constructor)this.handleChange.bind(this,id)复杂的页面不要在一个组件里面写完。请尽量使用const element。map里面添加key,并且key不要使用index(可变的)。具体可参...

vscode 调试 react 项目【代码】

主要分为以下三个步骤安装 debug for chrome配置 launch.json 文件配置内容如下 {"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "Launch Chrome","url": "http://localhost:3000", // 改为目标 url"sourceMaps": true,"webRoot": "${workspaceFolder}","skipFiles": ["node_modules/**"],"sourceMapPathOverrides": {"webpack:///*": "${webRoot}/*"}}] }打断点,在 Debug 模块启动调试本...

react问题总结与归纳【代码】

欢迎大家指导与讨论 : )  【持续更新】本文主要记录笔者在学习中遇到的问题,并作出相应总结。有错误的地方希望各位能够支持。  一、在es6中getInitialState( 摘要: constructor(props)和this.state )/*es6*/ class TodoList extends Component{constructor(props){super(props);this.state = {items: [‘hello‘, ‘world‘, ‘click‘, ‘me‘]}}render(){//.. } } /*es5*/var TodoList = React.createClass...

基于vite2的react脚手架【代码】【图】

vite-react-boilerplate开发编译yarn start 启动开发yarn build 启动编译代码质量和风格husky/lint-staged/eslint/prettier 暂存区代码提交自动检查修复 , 可以自行扩展git hooks , e.g. commit-msg 代码提交检查等。HMR@vitejs/plugin-react-refresh 实现react HMR代码库(样式)按需加载样式按需加载 (组件不存在这个问题),默认配置了antd 和zarm组件库,对于其他组件库, 参考vite-plugin-style-import 文档 plugins: [styleImp...

React Native 之 HelloWorld【代码】

1. 切换目录输入之前要切换到要保存的目录2. 修改下载源cd ~/ vim .npmrc添加 registry = https://registry.npm.taobao.org 3. 在终端中输入react-native init HelloWorldReactNative 4. 运行项目ios: 用xcode打开android ,在项目目录,运行命令:react-native run-android原文:http://www.cnblogs.com/SimonGao/p/5565738.html

[react] 细数 React 的原罪【代码】

Props & onChange 的原罪 。「props & onChange 接口规范」它不是一个典型的「程序接口规范」。当你拿到一个可视组件的 ref,却没有类似 setProps() 这样的方法来改变其 props,你只能在 render() 方法中,通过 jsx 语言来设置其 props。这意味着父元素必须保存并维护这个 props 对应的值,而更多时候,父容器只是想一次性的设置一个值,然后就走,让以后的事情交给子元素自己去维护。当然,你也可以通过 ref 来获取子元素的应用,...

[React Testing] Hide console.error Logs when Testing Error Boundaries with jest.spyOn【代码】

When testing an error boundary, your console will be filled with console.error calls from React. Those can be a real distraction from the rest of the output for your tests. Let’s clean those up with jest.spyOn. beforeAll(() => {// do log out any error messagejest.spyOn(console, ‘error‘).mockImplementation(() => {}) })afterAll(() => {console.error.mockRestore() }) Then we can verify the console....

React 生态

1. 状态管理Redux JavaScript 状态容器,提供可预测化的状态管理MobX 通过函数响应式编程使得状态管理变得简单和可扩展Redux Thunk Redux的异步处理中间件Redux Saga Redux中间件,用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等)Dva 一个基于 redux 和 redux-saga 的数据流方案 2. UI组件库Ant design 基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品Ant design mobile 基于...

浅谈React【代码】

组件化组件的封装组件的复用组件的封装视图数据视图和数据之间的变化逻辑import React, {Component} from ‘react‘;export default class List extends Component{constructor(props){super(props);this.state = { //数据list:this.props.data,}}render() { return (<div> <ul>{this.state.list.map(function(item,index){return (<li key={index}>{item}</li>);})}</ul></div>)} } 组件的复用(通过props传递)import React, {Com...