react和vue一样都是mvvm的这种开发模式。

下载js文件

引入HTML文件里

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script> 这三个文件必须引进来

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

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

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">这个地方script 必须加type

      // ** Our code goes here! **

    </script>

  </body>

</html>

1.模板和组件类的概念

模板：模板是return里边的东西，说白了就是DOM，放标签的地方，只能有一个顶层标签

组件类：就是自己定义的标签，首字母必须 大写

2.reactDOM.render()将模板添加到指定的容器（div）中，有时候模板东西比较多，我们可以使用组件类。

3.jsx语法：遇到html标签，该怎么写还是怎么写，js都写在{}里边，jsx只能写在模板中。外边地方还是用js语法

4.props是当前组件的组件标签身上的所有属性和子节点构成的集合。

对于组件标签的子节点，我们可以发现它是一个数组。有时候还是一个json，还会是undefined，这样对于我们遍历增加了不少麻烦。所以react自己用一个方法，可以针对这个问题进行子节点的遍历。

react.Children.map()

 <ol>

      {

        React.Children.map(this.props.children, function (child) {

          return <li>{child}</li>;

        })

      }

      </ol>

5.refs

Vue 中的refs  是模板中的所有组件标签构成的集合，必须在子组件标签上添加ref属性。

React中的refs

用于获取我们的虚拟dom的，

给你需要获取的dom节点添加ref属性，就可以通过this.refs.(ref的属性值)获取真实dom。注意 因为虚拟dom只有等到被插入文档之后才能获取，所有往往这里需要使用事件来触发。

6.react中的事件表示方式

在标签上使用驼峰法  原先的onclick 是错的 使用 onClick

事件方法的调用用{this.fn} 因为我们创建的是类 类规定将方法都写在类的内部。

7.state

State和props一样的。Props是一个静态值，一旦设定不需要改变了，往往是请求的网络地址。

State是一个状态值，这个值可以发生改变。改变这个状态值，react有自己的方法。

this.setState()



8.input




文本框在react中不能使用，传统的获取方法。使用事件源




9.钩子函数 componentDidMount()


												


											
react初学的更多相关文章
	

    
						
  1. React 初学整理
		
    1,通过createElement创建元素 HELLO Word ps:切记组建名称首字母大写 2,虚拟DOM 在虚拟DOM上操作 通过render来渲染真是DOM 3,JSX JSX 是对JS的语法 ...
    
		
    2. 
						
  2. react初学之render返回加括号的问题
		
    刚在学习react的初始阶段,跑了一段代码 var  Mydom = React.createClass({ render:function(){ return <div> <inp ...
    
		
    3. 
						
  3. React 初学
		
    React.createClass({}); getInitialState,this.setState({}); {}解读代码块,外层不要加引号,比如onChange={this.handleCha ...
    
		
    4. 
								
  4. 初学React：JSX语法
		
    这是本人初学React做的学习笔记;讲的不是很深,只算是简单的进行介绍. 这是一个小系列.都是在同一个模板中搭建的,但是代码是不能正常执行的. >>第一个组件.js 'use strick ...
    
		
    5. 
						
  5. 初学React，setState后获取到的thisstate没变，还是初始state？
		
    问题:(javascript)初学React,setState后获取到的thisstate没变,还是初始state?描述: getInitialState(){ return {data:[]}; } ...
    
		
    6. 
						
  6. 重写官方TodoList，对于初学react+redux的人来说，很有好处
		
    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
    
		
    7. 
						
  7. 初学 react | redux
		
    react | redux 一.安装 React Redux 依赖 React 0.14或更新版本 npm install --sava react-redux 你需要使用 npm 作为包管理工具,配 ...
    
		
    8. 
						
  8. 初学React：组件的样式
		
    React中组件的样式有三种: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
    
		
    9. 
						
  9. 初学React：定义一个组件
		
    接着聊React,今天说说如何创建一个组件类. <!DOCTYPE html> <html lang="en"> <head> <meta ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Windows资源管理器对物理内存的描述
			
    对每个进程的虚拟/物理内存使用描述: 1.硬错误/秒:在最后一分钟内每秒出现的平均硬页错误数 2.提交(KB):操作系统为内存保留的虚拟内存量,任务管理器中显示为:提交大小 3.工作集(KB):进程当 ...
    
			
    2. 
						
  2. Azure进阶攻略丨Azure网络通不通，PsPing&PaPing告诉你答案
			
    很多时候,为了解决一些问题,要查各种文档,很麻烦你造吗!做「伸手党」又容易被鄙视,这时候就需要用到[Azure 进阶攻略]啦!特此,我们推出关于 Azure 常用操作指南的系列文章,每篇涉及一个 Az ...
    
			
    3. 
						
  3. 第五章 LED的魔性操作
			
    想必大家都见过城市里漂亮的led广告牌吧,这一节我将带大家学习这些LED广告牌最基本的实现原理. 初识LED 接线方法:D1~D8从接23~37号数字端口,v1和前面的针头分别接41号和39号数字端口 ...
    
			
    4. 
						
  4. RF脚本中的坑2： pip下载python库时报certificate verify failed
			
    用pip命令下载第三方library时,报错certificate verify failed,截图如下: 在网上找了各种教程,包括修改了pip下载源地址也无效果,最后祭出了杀手锏——FQ,FQ成功后 ...
    
			
    5. 
						
  5. NO.007-2018.02.12《白头吟》两汉：卓文君
			
    白头吟_古诗文网_解析_鉴赏_赏析 白头吟 两汉:卓文君 白头吟:乐府<楚调曲>调名.据<西京杂记>卷三载,蜀地巨商卓王孙的女儿卓文君,聪明美丽,有文采,通音乐.孀居在家时,与 ...
    
			
    6. 
						
  6. IOS JPush 集成步骤(极光远程推送解决方案,支持android和iOS两个平台)
			
    ●  什么是JPush ●  一套远程推送解决方案,支持android和iOS两个平台 ●  它能够快捷地为iOS App增加推送功能,减少集成APNs需要的工作量.开发复杂 度 ●  更多的信息,可 ...
    
			
    7. 
						
  7. HDU 4278 卡特兰，区间DP
			
    题意:每个人有一个DI值,现在有一个小黑屋,这些人的顺序可以利用这个小黑屋调整,调整方式是入栈出栈方式,也就是说,这里的方案是有卡特兰数个方式. 调整后使得 d1*0 + d2*1 + d3*2 +  ...
    
			
    8. 
						
  8. 数字游戏II
			
    题面好难找:嘟嘟嘟 贪心 + dp. 首先要按bi的降序排序,让每一次减少大的数尽量靠前.为啥咧?于是我们就需要证明:令sum = a1 - (1 - 1) * b1 + a2 - (2 - 1) * ...
    
			
    9. 
						
  9. POJ 1830 开关问题 【01矩阵 高斯消元】
			
    任意门:http://poj.org/problem?id=1830 开关问题 Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 1 ...
    
			
    10. 
						
  10. 一篇博客：分类模型的 Loss 为什么使用 cross entropy 而不是 classification error 或 squared error
			
    https://zhuanlan.zhihu.com/p/26268559 分类问题的目标变量是离散的,而回归是连续的数值. 分类问题,都用 onehot + cross entropy traini ...
    
			
    11.