根据博主  http://www.ruanyifeng.com/blog/2015/03/react.html  的几个Demo(https://github.com/ruanyf/react-demos),持续学习一下React,一款负责UI框架的语言(使用虚拟的DOM,并且将它们储存起来,每当状态发生变化的时候就会创造新的虚拟节点和以前的进行对比,让变化的部分进行渲染。整个过程没有了获取、操作dom节点的步骤,只有一个渲染的过程,所以react就是一个ui框架。)。

首先get了几个sublime的快捷键,非常好用!command+D:选中更多的相同元素;command+control+G:选中所有相同项;command+control+上或下:将整行上移或者下移;control+shift+W:将选中的加上标签。这个几个还需持续练习!另外command+回车是换到下一行(光标在本行中)。

React需要引用的几个JS文件

<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>

script标签:

<script type="text/babel"></script>  //为什么写text/bable呢,这样可以使用JSX

  1. ReactDOM.render()方法   html语言可以直接写在里面;
 var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
document.getElementById('example') 之后无分号!数组使用[]扩住。
 2.React.createClass 方法就用于生成一个组件类
  所有组件类都必须有自己的 render 方法,用于输出组件。
 
render: function() {},
propTypes: {}, /*参数校验*/
XXXX: function(){},
getInitialState: function() {}/*初始态,然后用户互动,导致状态变化,从而触发重新渲染 UI*/

  举一个例子

<script type="text/babel">
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
}); ReactDOM.render(<Input/>, document.getElementById('example'));
</script>

  

 

React了解的更多相关文章

  1. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  3. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  4. React 入门教程

    React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...

  5. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  6. 2017-1-5 天气雨 React 学习笔记

    官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...

  7. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  8. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

  9. React的使用与JSX的转换

    前置技能:Chrome浏览器   一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

  10. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

随机推荐

  1. ExpandableListView解析JSON数据

    效果图:                                       说明:刚开始使用这个控件我花费了3天的时间,但是一直都没有达到预期的效果,要么就是直接全部不显示,要么就是数据累加 ...

  2. 19-06 【phpunit和docker】

    phpunit简介 在用PHP做项目的时候,有时候我们需要写一些测试代码,其中可能包含单元测试(比如字符串处理,ip解析,mobile解析等). 我们常用的工具是phpunit,它很方便地帮我们组织测 ...

  3. ROC AUC

    1.什么是性能度量? 我们都知道机器学习要建模,但是对于模型性能的好坏(即模型的泛化能力),我们并不知道是怎样的,很可能这个模型就是一个差的模型,泛化能力弱,对测试集不能很好的预测或分类.那么如何知道 ...

  4. 【CSS】面试知识整理

    手写clearfix .clearfix:after { content: ''; display: table; clear: both; } .clearfix { *zoom:; } flex布 ...

  5. pg_dump 数据处理

    从数据库导出数据 -U 用户 -p 端口 -h 主机地址 -f 导出文件地址 -O 备份数据库结构和数据,不设置拥有者 -s  只导出数据库结构 最后是库名 (全部导出)pg_dump -U post ...

  6. Centos 系统swap虚拟内存添加与删除配置

    SWAP是Linux中的虚拟内存,用于扩充物理内存不足而用来存储临时数据存在的.它类似于Windows中的虚拟内存.在Windows中,只可以使用文件来当作虚拟内存.而linux可以文件或者分区来当作 ...

  7. Kubernetes 1.3.1 快速单机部署

    Kubernetes发展到今天, 在官网上已经有非常多的成熟部署方案, 但是由于墙的原因, 最简单的MiniKube都无法进行, 参考了以下两篇文章后, 终于安装成功. k8s-1.13版本测试环境搭 ...

  8. ORA-15137: cluster in rolling patch

    oracle 12.1.0.2,给diskgroup加盘的时候报错ORA-15137: cluster in rolling patch 确认两节点补丁相同 crsctl query crs soft ...

  9. How to Read a Paper

    How to Read a Paper 原文: https://www.yuque.com/lart/papers/yrkv5u 题目:How to Read a Paper 作者:S. Keshav ...

  10. 一键脚本清理DEBIAN系统无用组件 减少系统资源

    虽然如今我们选择服务器资源都比较多,以前我们看到很多128MB内存.甚至32MB内存的建站网站,感觉特别羡慕.其实这些也不是难事,相比之下,DEBIAN系统比CENTOS系统占用资源少,然后我们需要进 ...