写在最前暑假想要学习React, 发现React官网上的没有说明如何搭建React开发环境, 网上找的很多都是基于webpack3的, 或者直接使用脚手架, 所以趁着放假, 就稍微学了下webpack, 开始搭建自己的React项目. 第一次写博客, 如有错误, 请指出, 谢谢!之后也会继续更新从零搭建React全家桶系列, react+react-router+redux+es6. 希望大家多多支持.说明开发环境是windows 10技术栈版本node 10.3.0npm 6.1.0webpack 4.16.1react 16.4.1babel-co...
万事开头难作为一只进入ECMAScript世界不久的菜鸟，已经被React Native的名气惊到了，开源一周数万星勾起了我浓烈的兴趣。新年新气象，来个HellWorld压压惊吧^_^（故意少打个‘o‘）具体的详细教程这里都有，我就说说这里没找到的几个坑，由于大部分资料还是0.1.4版本的react-native，笔者用最新的0.1.7和现有的很多是不一样的。http://reactnative.cn/docs/android-setup.html#content00.第一个坑，安卓墙Android SDK下载：本来抱...
使用系统自带Model 不能做到，因为官网讲了，只能有一个在最上层的Model可以用import Modal from ‘react-native-modalbox‘;这个Model 可以设置coverScreen={true},弹出之后能覆盖全屏，隐藏了底部导航栏。这个功能是很实用的。参考：https://www.cnblogs.com/wang4517/p/6178859.html原文：https://www.cnblogs.com/liuw-flexi/p/12325726.html
官网介绍： https://reactnative.cn/docs/0.44/backhandler.html使用前引入improt {Platform，BackHandler} from react nativecomponentDidMount() {if (Platform.OS === ‘android‘){BackHandler.addEventListener(‘hardwareBackPress‘, this.onBackAndroid); } }componentWillUnmount() {if (Platform.OS === ‘android‘) {BackHandler.removeEventListener(‘hardwareBackPress‘, this.onBackAndroid); } }onBackAndroid =...
一、父组件向子组件传值 父组件绑定属性值传给子组件，子组件通过this.props()接收。 例子如下： 父组件中调用名字为Child的组件：<Child value={10}/>子组件获取方式为：<p>父组件传递过来的值为:{this.props.value}</p>。//父组件传递过来的值为:10二、子组件向父组件传值 子组件绑定一个方法，方法中通过this.props.父组件方法名（参数）传递给父组件，父组件通过该方法接收数据。 例子如下： 子组件绑定从父...
一、代码结构不同于mac开发环境，拥有index.ios.js和index.android.js两个编译文件，此处windows下仅在app.js中编译； 二、简单的helloword一闪闪效果app.jsimport React, { Component } from ‘react‘; import { Text, View, StyleSheet } from ‘react-native‘;class HelloWorldApp extends Component {constructor(props) {super(props);this.state = { showText: true };// 每1000毫秒对showText状态做一次取反操作setInterv...
今天，我们要讨论的是react router中Link传值的三种表现形式。分别为通过通配符传参、query传参和state传参。ps:进入正题前，先说明一下，以下的所有内容都是在react-router V4的版本下。1.通配符传参Route定义方式：<Route path=‘/path/:name‘ component={Path}/>Link组件：<Link to="/path/通过通配符传参">通配符</Link>参数获取：this.props.match.params.name注意这个match,许多博客活文章都是忽略了它，导致取不到值。这里...
1、生命周期的引入1、组件从创建到死亡它会经历一些特定的阶段。2、React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。3、我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。2、React生命周期（旧）图解： 初始化阶段：由ReactDOM.render()触发 ----- 初次渲染（顺序为constructor（构造器） ----- componentWillMount （组件将要挂载的钩子）----- render（初次渲染） ----- componentDi...
前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。一、按钮Buttonpages->ui->button.js：对应路由/admin/ui/buttonsimport React from ‘react‘; import {Card, Button, Radio} from ‘antd‘ import ‘./ui.less‘class Buttons extends React.Component{state = {loading: true,size: ‘default‘} handleCloseLoading = () =>{th...
写react组件的时候，我们写的都是jsx文件，那jsx到页面渲染成功这个过程发生了什么呢？ 首先通过react和babel编译将jsx转化为javascript对象，react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。生命周期 挂载阶段的 生命周期：componentWillMount 组件挂载开始之前，也就是render之前调用这个生命周期钩子componentDidMount 组件挂载完成以后，也就是 DOM 元素已经插入页面后调...
项目中有一个动态添加、删除时间选择框每次点击删除都会把最后一个删掉,查了百度都说是key的问题，对比了下，最终的问题在index，把name={`time${index}`},改为name={`time${item.id}`}所以在遍历后，不要把index用于元素个项的识别上，例如：key name等{timeList.map((item, index) => (<FormItemkey={item.id}label={index === 0 ? ‘时间‘ : ‘‘}{...formItemLayout}wrapperCol={index === 0 ? null : {offset: 3}}requiredre...
这是一个单独的页面，可以从其他地方跳转过来。输入语言关键字，从github检索相关数据import React, {Component} from ‘react‘; import {StyleSheet,View,Text,Button,TextInput, } from ‘react-native‘;export default class FetchDemoPage extends Component {constructor(props){super(props);this.state={showText:‘‘}}loadData(){let url = `https://api.github.com/search/repositories?q=${this.searchKey}`; fetc...
In this lesson, we‘ll refactor a React component to use Ramda lenses to update our component state. We‘ll create a lens to focus on the property we want to target and use over to apply the existing state value to a utility function and we‘ll get back a new state that will be reflected in our rendered UI. We have code here, and we are going to improve the code://@flow import React from ‘react‘...
用HTML5和React Native分别实现盒子模型显示 写法不一样： 1.样式  2.元素  3.书写格式 . When we isolate our styles inside React components we lose the ability to theme them. To get round this we can put our theme variables on the context of our app and then read them from individual components in order to make styling decisions. Recompose allows us to creat...