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. jquery获取不了ajax动态添加的内容的解决办法
			
    在HTML页面的一个button <div class="ajaxClick"> <button>内容</button> </div> ...
    
			
    2. 
						
  2. window.frames在不同浏览器中的用法
			
    document.frames 等同于 window.frames,用来取得当前页面内 window 对象的集合. 不支持Firefox,其他浏览器(chrome.opera.IE.360)均支持.  ...
    
			
    3. 
						
  3. SharedPreferences的封装
			
    android.content.SharedPreferences是一个接口,用来获取和修改持久化存储的数据.有三种获取系统中保存的持久化数据的方式: 1). public SharedPrefere ...
    
			
    4. 
						
  4. static final int DEFAULT_INITIAL_CAPACITY = 1 << 4; // aka 16
			
    查看HashMap源码,发现这个static final int DEFAULT_INITIAL_CAPACITY = 1 << 4;  值为16. 这个是位移算法. 例如: 4<& ...
    
			
    5. 
						
  5. March 31 2017 Week 13 Friday
			
    Sometimes, you think the sky is falling down, actually, that is just because you stand slanting. 有时候 ...
    
			
    6. 
						
  6. 【转】Activity、Window、View的关系
			
    1.先看一个现象 1 2 3 4 5 6 7 8 9 10 11 public class MainActivity extends Activity {       @Override     pr ...
    
			
    7. 
						
  7. c#主窗体以及副窗体弹出
			
    在program.cs中,Form1的位置就是主窗体的位置(主窗体特征:关闭窗体应用程序结束) 弹出副窗口(点击按钮弹出窗口) Close为关闭窗口(关闭对应对象,需要先自己new一个) this.C ...
    
			
    8. 
						
  8. 基于bootstrap模态框的二次封装
			
    一.参数设置 $.beamDialog(options); var defaults = { title:'标题', content:'内容', showCloseButton:true, //显示关 ...
    
			
    9. 
						
  9. 【洛谷P4568】[JLOI2011]飞行路线
			
    飞行路线 题目链接 今天上午模拟考试考了原题,然而数组开小了,爆了4个点. 据王♂强dalao说这是一道分层图SPFA的裸题 dis[i][j]表示到点i用k个医疗包的最小消耗,dis[u][j]+e ...
    
			
    10. 
						
  10. 【题解】洛谷P1445 [Violet]樱花 （推导+约数和）
			
    洛谷P1445:https://www.luogu.org/problemnew/show/P1445 推导过程 1/x+1/y=1/n! 设y=n!+k(k∈N∗) 1/x​+1/(n!+k)​=1 ...
    
			
    11.