谈谈从0开始快速学习React Native(一)

React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,学起来比较枯燥。

我可以说是从0开始学习React Native,之前学习的人少,自己也走了不少弯路,以后能把自己的一些想法或者是学习方法写出来分享一下,让后来学习的同行们少走一些弯路。(最好先学习一下reactjs)

自己理解的React(我们需要了解的东西)

1.React?

2.React的特点

3.JSX语法

4.组件(Component)

5.组件的属性、状态


一、什么是React?

React是一个用于组建用户界面的JavaScript库,让你更加简单的方式来创建交互式用户界面。

个人认为的优点吧:

1.React就是由许多个组件来组合而成的。

2.数据改变的时候,React能高效的更新和渲染更新的组件。

3.声明性视图让你的代码容易调试,自己能预测出效果

4.封装管理自己的状态组件,将他们组成复杂的界面。

5.由于组件逻辑是用JavaScript编写的,可以轻松地通过程序传递大量数据,并保持DOM状态。

6.一次学习随时随地可以编写,学会了React,不仅可以轻松的开发web,也可以用于React Native来开发Android+ios应用。


二、开始学习React

使用React之前需要在[React官网](https://facebook.github.io/react/downloads.html)下载这些库,也可以将其下载到本地去使用。

-react.js

-react-dom.js

-browser.min.js

上面一共列举了三个库: react.js 、react-dom.js 和 browser.min.js ,它们必须首先加载。

react.js是React的核心库

react-dom.js是提供与DOM相关的功能

browser.min.js的作用是将JSX语法转为JavaScript语法

这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

注意:我们实际在做React Native开发时,这些库作为React Native核心库已经被初始化在node_modules目录下,所以不需要单独下载。


使用React写出我们非常熟悉的Hello World



JavaScript代码里写着 XML 格式的代码称为 JSX,下文会介绍。为了把 JSX 转成标准的 JavaScript,我们用<script  type="text/babel">标签,然后通过Babel转换成在浏览器中真正执行的内容

注意:ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

SX 和 HTML

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

每一个XML标签都会被JSX转换工具转换成纯JavaScript代码,使用JSX,组件的结构和组件之间的关系看上去更加清晰。

JSX并不是React必须使用的,但React官方建议我们使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。


HTML标签 与 React组件 对比

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。

//var myDivElement = <div className="foo">;

React.render(myDivElement, document.body);

要渲染 React 组件,只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});

var myElement =<MyComponent someProperty={true} />;

React.render(myElement, document.body); 

注意:

- React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

- 由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代, React DOM 使用 className 和 htmlFor 来做对应的属性。


JavaScript 表达式

属性表达式

要使用 JavaScript 表达式作为属性值,只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 (“”)。

// 输入 (JSX):

var person =<Person name={window.isLoggedIn?window.name:''} />;

// 输出 (JS):

var person = React.createElement(

      Person,

      {name: window.isLoggedIn ? window.name : ''}

);


React中注释

JSX 里添加注释很容易;它们是 JS 表达式。需要在一个标签的子节点内(非最外层)用 {} 包围要注释的部分。

{/*标签子节点的注释*/}

注意:

在标签内要使用{/*注释的内容*/}

在标签节点以外注释,和通常的注释是一样的,多行用/*多行注释的内容*/单行用//单行注释的内容;

修改组件的属性,会导致React不会对组件的属性类型(propTypes)进行的检查。从而引发一些预料之外的问题。

两种写法都能实现

不推荐的:

var component = <Component />;

component.props.foo = x;

component.props.bar = y; 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,277评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,689评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,624评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,356评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,402评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,292评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,135评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,992评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,429评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,636评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,785评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,492评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,092评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,723评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,858评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,891评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,713评论 2 354

推荐阅读更多精彩内容