React-Native入门指南 第4篇React-Native布局实战 前辈教导我们，掌握一门新技术的最快方法是练习。因此，我找了下比较有爱，暖气的界面。当然不是给美团打广告了，只是觉得页面蛮清新的。下面就是要显示的效果： 第三篇文章基本上对React-Native的布局基本上有个大致的认识，现在开工吧。总体上，该页面分三个部分：（1）我们约会吧及其右边3栏；（2）1元吃大餐及其底下的4栏；（3

React-Native入门指南 第四篇React-Native布局实战(二) 在不断深入的过程中，发现React-Native布局和样式的坑还有很多，他没有像浏览器那样灵活和有规律可循，其中的规律需要我自己踩坑的时候发现。比如：不存在zIndex,后面的元素覆盖前面的元素；内层元素覆盖外层元素等等,borderRadius的设置，需要考虑到内层元素的位置等等。 一、实战的内容 这里选用携程的Ap

React-Native入门指南 第六篇JSX在React-Native中的应用 一、JSX概述 你一定疑问为什么要用JSX？其实这不是必需，而是建议。只是因为React是作为MVC中的V,是为UI而生，所以，React-Native使用JSX更能像HTML样表达树形结构，其实HTML的超类就是XML,React-Native将这个带到了解放前，不可否认的是JSX相比节省了很多的代码。JSX不是什

注：这篇文章只是讲解React Redux这一层，并不包含Redux部分。Redux有计划去学习，等以后学习了Redux源码以后再做分析； 注：代码基于现在 (2016.12.29) React Redux 的最新版本 (5.0.1)。 Connect工具类篇 这里讲的其实是connect方法的基础，本来是准备先把connectAdvanced和Provider写完，再专门写connect和相关方

注：这篇文章只是讲解React Redux这一层，并不包含Redux部分。Redux有计划去学习，等以后学习了Redux源码以后再做分析 注：代码基于现在(2016.12.29)React Redux的最新版本(5.0.1) Connect工具类篇(1) Connect工具类篇(2) verifySubselectors.js 这里有四个参数： mapStateToProps, mapDispat

React的学习 用webstorm开发React要注意了，如果了用了webpack管理代码的话，一定要在webstrom设置里设置 点击settings -------->搜索“safe writing”------------------>去掉对应的勾如图所示： 环境的搭建 安装node npm 淘宝镜像 在github上搜索create-react-app 脚手架 - 安装顺序：npm in

react的子父组件传递参数 父组件在state的状态下设置 getInitialState(){ return{ childNameA:"小样，你好吗？", childNameB:'小样，我不好！！', item:[ ], time:0 } 子组件用props属性来接收 <

jsx语法的简介 什么是jsx 如何使用jsx 什么是jsx jsx = JavascriptXml = 虚拟dom jsx是基于EcmaScript的一种新特性 jsx是一种定义带属性（DOM属性）树结构(DOM结构)的语法 jsx的特点 类xml语法容易接受 增加js语义 结构清晰 抽象程度高&&跨平台 代码模块化 jsx的语法 元素名 （首字母大写） 子节点 （嵌套） 求值表达式 可以是三元

react实现 目录结构 index.js var React = require('react'), ReactDOM = require('react-dom'), App = require('./App/index.js'), Todo = require('./to-do/index'); require('./index.css'); ReactDOM.r

react + Ant Design后台管理系统 下载命令：npm install antd --save 官网：https://ant.design Step 1：安装脚手架工具 （Node.js 需要 v4.x 或以上） $ npm install antd-init -g step 2：创建项目&初始化 $ mkdir ant-design-demo && cd ant-design-dem

前端路由的由来是利用location hash 锚点的值来跳转路由 <button id='aaa'>aaa</button> <button id='bbb'>bbb</button> <a href="#ccc">ccc</a><br/> <a href="#ddd">ddd</a>

1.为了测试用的是本地图片，首先图片资源集成到项目中。 这里是android适配的项目 将图片资源放置在下面 通过json 方式访问 项目名称\android\app\src\main\res\drawable 文件   NewWine.json { "data":[ { "image": "gujing", "money": "1

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, TextInput, ListView, Touc

这里通过一个简单的例子来阐述Navigator页面的跳转与数据的传递： 查询用户信息的例子，FirstPageComponent传递id到SecondPageComponent，然后SecondPageComponent返回user信息给FirstPageComponent import React, { Component } from 'react'; import

ReactNative源码篇：源码初识 作者: 郭孝星 邮箱: guoxiaoxingse@163.com 博客: http://blog.csdn.net/allenwells 简书: http://www.jianshu.com/users/66a47e04215b/latest_articles 关于作者 郭孝星，非著名程序员，代码洁癖患者，爱编程，好吉他，喜烹饪，爱一切有趣的事物和人。 关

ReactNative源码篇：通信机制 作者: 郭孝星 邮箱: guoxiaoxingse@163.com 博客: http://blog.csdn.net/allenwells 简书: http://www.jianshu.com/users/66a47e04215b/latest_articles 关于作者 郭孝星，非著名程序员，代码洁癖患者，爱编程，好吉他，喜烹饪，爱一切有趣的事物和人。 关

ReactNative源码篇：代码调用 作者: 郭孝星 邮箱: guoxiaoxingse@163.com 博客: http://blog.csdn.net/allenwells 简书: http://www.jianshu.com/users/66a47e04215b/latest_articles 关于作者 郭孝星，非著名程序员，代码洁癖患者，爱编程，好吉他，喜烹饪，爱一切有趣的事物和人。 关

ReactNative源码篇：启动流程 作者: 郭孝星 邮箱: guoxiaoxingse@163.com 博客: http://blog.csdn.net/allenwells 简书: http://www.jianshu.com/users/66a47e04215b/latest_articles 关于作者 郭孝星，非著名程序员，代码洁癖患者，爱编程，好吉他，喜烹饪，爱一切有趣的事物和人。 关

实践三 Todo List示例，未使用redux。内容涉及到展示组件与容器组件的合理使用，事件处理，参数传递，控件访问，组件功能设计等方面。其中遇到的坎，设置输入焦点，由于使用了styled-components而有不同;每个组件应试包含哪些state，是否应该进行状态提升;子组件如何向父组件传递数据。 代码分析 组件拆分：Li单个信息条目、LiList信息条目列表、InputAndButton输

本系列文章，不断更新中... Nowa 上手篇（1）- 介绍 Nowa 上手篇（2）- 创建 React Web 项目 Nowa 上手篇（3）- 工具使用指南 Nowa 上手篇（4）巧用命令集 ... 在看完废话超多的介绍篇后，欢迎各位看官来到实战篇，当然没看介绍也完全 OK 啦。 这篇文章主要介绍如何使用 Nowa 可视化工具快速创建 web 项目。好了，废话不多说，卷起袖子，开战～ 1、进入新