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. CKEditor的使用
			
    需要配置的功能列表 //class: cke_button( 按钮 ) , ck_combo(下拉) /* 需要配置的功能列表 document:保存(save).新建(newpage).预览(pre ...
    
			
    2. 
						
  2. Grunt压缩图片和JS
			
    今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install ...
    
			
    3. 
						
  3. 创建 XMLHttpRequest 对象时IE的兼容问题解决办法
			
    为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象.如果支持,则创建 XMLHttpRequest 对象.如果不支持,则创建 ActiveXO ...
    
			
    4. 
						
  4. learn OpenStack by picture
			
    
			
    5. 
						
  5. SharePoint 2013 - Add-ins
			
    1. App Web & Host Web The special website to which the app is deployed is called an App Web. The ...
    
			
    6. 
						
  6. Ubuntu(Debian)apt-get
			
    Ubuntu(Debian)的aptitude与apt-get的区别和联系   最近在使用Puppet快速部署Openstack,看到一些没见过的工具,例如aptitude,在Ubuntu上有强大的a ...
    
			
    7. 
						
  7. 【NLP_Stanford课堂】正则表达式
			
    或者 [Ww]oods,方括号里的是或的关系,符合其一即被提出.用来匹配单个字符 [A-Z]:表示所有的大写字母之一 [a-z]:表示所有的小写字母之一 [0-9]:表示所有的0-9的数字之一 否定: ...
    
			
    8. 
						
  8. String, StringBuffer and StringBuilder
			
    一 String 概述: String 被声明为 final,因此它不可被继承. 在 Java 8 中,String 内部使用 char 数组存储数据. public final class Stri ...
    
			
    9. 
						
  9. 开始学习git
			
    今天看着廖雪峰的git使用教程开始学习git.不过没有将项目托管在github上,而是选择托管在了码云上. 看着明白做起来还是出了些问题,不过好在最后都解决了.果然眼高手低要不得. 试着将自己平时学习 ...
    
			
    10. 
						
  10. 让免费版MarkdownPad2使用Pro版本的功能
			
    让免费版MarkdownPad2使用Pro版本的功能 找到配置文件 启用Markdown扩展模式 Markdown处理器:Github风格 语法检查设置 自动保存设置 找到配置文件 一般在用户的数据目 ...
    
			
    11.