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. 可编辑DIV  光标位置  处理
			
    //场景: 要做一个网页即时通信,发送信息的文本编辑框 要求能发图片和表情,那么textarea就不能满足需求了,因为textarea内没有办法加入image // 采用方案是使用可编辑的DIV(也就 ...
    
			
    2. 
						
  2. MicroService
			
    
			
    3. 
						
  3. .NET开源工作流RoadFlow-表单设计-标签（label）
			
    LABEL标签即在表单中添加一个文本标签: 字号:标签显示文字的大小. 颜色:标签显示文字的颜色. 样式:以粗体和斜体显示.
    
			
    4. 
						
  4. iPython与notebook的基本用法
			
    1 Ipython 安装 pip install ipython 2 Notebooke 基本用法 启动ipython使用ipython 启动notebook 使用 ipython notebook  ...
    
			
    5. 
						
  5. Android 自定义圆形图表
			
    <com...SignChartView android:id="@+id/signChart" android:layout_width="265dp" ...
    
			
    6. 
						
  6. adb工具包究竟能帮我们做什么？
			
    adb工具包主要作用于什么呢?应该有很多用户都不了解adb,那就一起来了解一下吧!adb的全称为Android Debug Bridge,就是起到调试桥的作用. 借助adb工具,我们可以管理设备或手机 ...
    
			
    7. 
						
  7. June 06th 2017 Week 23rd Tuesday
			
    At the touch of love, everyone becomes a poet. 一谈到爱,每个人都变成了一位诗人. Sweet words always have the power o ...
    
			
    8. 
						
  8. May 25th 2017 Week 21st Thursday
			
    Follow your heart, but take your brain with you. 跟随你的内心,但是请别失去理智. I was ever told that we should fol ...
    
			
    9. 
						
  9. May 18th 2017 Week 20th Thursday
			
    The greater the struggle, the more glorious the triumph. 挑战愈艰巨,胜利愈辉煌. Sometimes it would be better t ...
    
			
    10. 
						
  10. NO.013-2018.02.18《鹊桥仙·纤云弄巧》宋代：秦观
			
    鹊桥仙·纤云弄巧_古诗文网 鹊桥仙·纤云弄巧 宋代:秦观 纤云弄巧,飞星传恨,银汉迢迢暗度.金风玉露一相逢,便胜却人间无数.(度 通:渡)纤薄的云彩在天空中变幻多端,天上的流星传递着相思的愁怨,遥远无 ...
    
			
    11.