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. Oracle数据库错误消息
			
    Oracle数据库错误消息 导出错误消息 l EXP-00000导出终止失败 原因:导出时产生Oracle错误. 操作:检查相应的Oracle错误消息. l EXP-00001数据域被截断 - 列长度 ...
    
			
    2. 
						
  2. （转）防止ViewPager中的Fragment被销毁的方法
			
    在使用ViewPager与Fragment的时候,ViewPager会自动缓存1页内的数据,如下图: 当我们当前处在页面2的时候,页面1和页面3的View实际上已经创建好了,所以在我们拖动的时候是可以 ...
    
			
    3. 
						
  3. Android 自定义圆形图表
			
    <com...SignChartView android:id="@+id/signChart" android:layout_width="265dp" ...
    
			
    4. 
						
  4. 通过 Powershell 来调整 ARM 模式下虚拟机的尺寸
			
    需求描述 在部署完 ARM 模式的虚拟机以后,可以通过 PowerShell 命令来调整虚拟机的尺寸,以下是通过 PowerShell 命令来调整 ARM 模式的虚拟机尺寸. Note 本文只限于 A ...
    
			
    5. 
						
  5. Oracle SYS用户无法设置session级别的read only
			
    官方文档参考:SYSDBA is used internally in the Oracle database and has specialized functions. Its behavior  ...
    
			
    6. 
						
  6. GitLab   数据自动备份
			
    gitlab自动备份 周期性计划任务: crontab -e * * * /opt/gitlab/bin/gitlab-rake gitlab:backup:create service crond  ...
    
			
    7. 
						
  7. matlab中换行
			
    若在命令窗口中,如果一条语句已经写完,需要换行,可以用"Shift+Enter", 如果一条语句没写完就想换行,可以使用"...+Enter".
    
			
    8. 
						
  8. March 22 2017 Week 12 Wednesday
			
    Satisfaction doesn't come from the outside, but from the inside. 满足感并非来自外界,而是来自内心. Everything that e ...
    
			
    9. 
						
  9. mongorc.js文件
			
    当启动的时候,mongo检查用户HOME目录下的一个JavaScript文件.mongorc.js.如果找到,mongo在首次显示提示信息前解析.mongorc.js的内容.如果你使用shell执行一 ...
    
			
    10. 
						
  10. note02-计算机网络
			
    2.物理层 通信系统模型(源->发送器->XXX->接收器->终),源发出数字信号,调制器编码为模拟信号,进行传输,解调器解码模拟信号为数字信号给终 信噪比,香农公式,C=B  ...
    
			
    11.