React Native学习提纲

当前版本最后修订日期: 2015年10月21日

版本 日期 说明 作者
1.0 2015-10-21 创建文档 罗晴明

一、 React.js入门基础

1.基础HTML/CSS与基础开发工具使用

  • html基础
    doctype、常用标签、标签闭合、自定义属性
  • css基础
    选择器(id、class)、常用样式、样式覆盖、行内样式、绝对与相对定位、flexbox布局
  • 基础开发工具
    使用Chrome调试网页、使用Webstorm编辑代码、使用github管理代码与搜索问题

2.基础Javascript与Node知识

  • Javascript基础(ES5)
    基本编码风格与习惯、基本数据类型及转换、数组与对象的操作、函数的定义与使用、引用与深复制、dom操作、ajax
  • Node基础
    Node与浏览器环境的差异、nvm、CommonJS规范、require/export等语句的使用、npm基础命令的使用、package.json配置

3.react.js基础

  • ES6基础
    webpack/babel基础配置、箭头函数、class继承、模块导入导出、解构、const与let声明、promise、默认参数、展开运算符(...obj)、Map/Set
  • react.js基础实践
    vmdom基础概念、jsx语法与注意事项、component生命周期与适用场景、事件代理、强制设置innerHTML、不可控组件问题(input)、ref的使用、state与props、ajax/fetch、组件嵌套与复用、尝试编写交互式界面如tabbar

4.react.js进阶

  • react.js进阶实践
    父子组件间通讯(props、context、回调、暴露接口)、任意组件间通讯(flux思想)、redux框架、react-router框架、代码质量控制(flow、eslint、propTypes、mocha/karma/jasmine/jest)、搜索与使用第三方组件、PureRenderMixin、immutable.js

二、 React Native入门基础

1.开发环境搭建

  • 科学上网
  • iOS开发环境搭建
    Mac OS X、XCode、Homebrew、命令行基础(sudo、chown等)、watchman、iOS模拟器的使用
  • Android开发环境搭建(Windows)
    //TODO
  • Android编译与打包工具链
    //TODO

三、 实战开发

1.样式与布局

  • 样式
    样式的组织、复用、覆盖、局限
  • 布局
    flexbox布局、绝对定位布局

2.基础实践

  • 常用基础组件
    View、Text、Image、TouchableX、WebView、TextInput等
  • 常用复杂组件
    Navigator、TabBar、Modal、ListView/ScrollView等
  • 常用API
    相册、地理定位、fetch、timer、AsyncStorage、Dimensions、Alert/Toast等

四、 进阶技巧与最佳实践

1.复杂交互界面
Animated、LayoutAnimation、InteractionManager、requestAnimationFrame、setImmediate/setTimeout、PanResponder

2.整合/编写原生模块
XCode与Android Studio的基本使用、Native Modules、Native UI Components、jsBridge、回调、事件订阅

时间: 2024-10-28 11:56:09

React Native学习提纲的相关文章

react native 学习一(环境搭配和常见错误的解决)

react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装python2.nodejs.git.Android Studio.这里前面两个都比较好装,android studio装起来相当慢,其实应该只用装sdk就行了,安装sdk可以按http://www.androiddevtools.cn/这个里面的方式设个代理. 软件装好了,就是环境变量设置了,添加AND

React Native学习(1):怎么快速学习一门新技术

React Native学习方法论 这是我技术公众号的第一篇文章,也是ReactNative系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学习任何语言和系统都适用. 对于新技术的学习,分为两种,一种是语言,类似Swift.Objective-C.Java.ES6,另一种是系统,比如Android.iOS.前端. 1. 语言层面,如果你精通某一门语言,那么是可以很快切换到另一门语言的.这就是语言的相通性.

React Native学习-将 'screen', 'window' or a view生成图片

https://github.com/facebook/react-native/commit/ac12f986899d8520527684438f76299675dc0daa 这是react-native自带的生成图片的属性,所以使用之前只需要引用UIManager属性即可: View生成图片: state = { uri: null }; takeToImage() { UIManager.takeSnapshot(this.refs.location, {format: 'png', qu

React Native学习笔记(一)Mac OS X下React Native的环境搭建

本文介绍Mac OS X系统下的React Native环境搭建过程. 1.环境要求: 1) Mac OS X操作系统 2) Xcode6.4或以上版本 3) Node.js4.0或以上版本 4) watchman和flow 2.安装过程 1) Node.js的安装可以在Node.js的官网https://nodejs.org/ 中下载最新的版本.这里下载的是node-v4.4.2.pkg版本.直接双击运行安装就可以了.查看是否安装成功可以在终端中输入如下命令: $node -v 如果能够显示版

React Native学习方法论

这是我技术公众号的第一篇文章,也是React Native系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学习任何语言和系统都适用. 对于新技术的学习,分为两种,一种是语言,类似Swift.Objective-C.Java.ES6,另一种是系统,比如Android.iOS.前端. 1. 语言层面,如果你精通某一门语言,那么是可以很快切换到另一门语言的.这就是语言的相通性.翻开市面上那些21天精通某某语言之

React Native学习

学习 首先,假使你已经安装了Nodejs 6,也有使用npm进行Nodejs的包管理 npm install -g react-native-cli 也可以使用yarn作为包管理工具 npm install -g yarn 安装Android Studio 配置系统变量 创建react native 工程 react-native init projectName #projectName是项目名称,可以任意 运行react native 工程 react-native start 运行reac

react native 学习资料整理

入门教程 深入浅出 React Native:使用 JavaScript 构建原生应用 http://www.appcoda.com/react-native-introduction/  中文版 http://www.cocoachina.com/ios/20150408/11513.html react-native 之布局篇 https://segmentfault.com/a/1190000002658374 Flex布局入门 http://www.ruanyifeng.com/blog

react native 学习之 native modules

翻译自https://facebook.github.io/react-native/docs/native-modules-ios.html Native Modules 很多情况下,app需要使用原生的api,或者是用一些已经用OC.Swift或C++写好的模块,又或者需要写出更高效率的.或多线程的代码来支撑图像处理.数据库或其它高要求的需求. React Native的设计当然是支持我们使用原生特性的,以使平台本身的能力得以完全发挥.不过这相对来说是比较进阶的功能,他们的存在虽然是必要的,

React Native学习笔记之一

1:运行React Native报连接错误解决 解决方式: 在终端进入项目文件里,然后执行:(cd Pods/React; npm run start) 2:组件生命周期介绍 创建阶段 1. getDefaultProps 作用于组件类,也就是调用React.createClass()的时候被调用. 每次创建组件的时候执行且只执行一次,方式如 reload Js. 用来处理props的默认值. note : 如果在JS文件中定义了一个组件,但是没有使用它,此组件的getDefaultProps也