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. c++sizeof大全
			
    sizeof,一个其貌不扬的家伙,引无数菜鸟竟折腰,小虾我当初也没少犯迷糊,秉着“辛苦我一个,幸福千万人”的伟大思想,我决定将其尽可能详细的总结一下.但当我总结的时候才发现,这个问题既可以简单,又可以 ...
    
			
    2. 
						
  2. 【Linux】TFTP & NFS 服务器配置
			
    Why?--交叉开发 一.交叉开发模型 宿主机(PC)------ 网络.串口.USB.JTAG ------ 目标机(ARM系统) PC机作为TFTP & NFS 服务器,目标机从网络下载软 ...
    
			
    3. 
						
  3. python 按值排序
			
    转自:http://www.cnpythoner.com/post/266.html,感谢分享! python 字典(dict)的特点就是无序的,按照键(key)来提取相应值(value),如果我们需 ...
    
			
    4. 
						
  4. js事件学习的小demo
			
    直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>  ...
    
			
    5. 
						
  5. 基于alpine定制常用命令镜像
			
    FROM alpine RUN apk update RUN apk add curl coreutils 像busybox.alpine镜像date命令都不是完整版的,不能执行加减的操作(date  ...
    
			
    6. 
						
  6. vue-cli项目接口地址可配置化（多环境部署）一处修改多处适用
			
    本文档目的在于帮助对vue了解比较少的同学,能够快速配置vue应用中的接口地址.方便项目切换服务环境后,重新修改多组件的http请求地址. 一.前言 我们在上一篇文章分享了vue-cli项目基本搭建( ...
    
			
    7. 
						
  7. 四、获取远程URL图片
			
    #!/usr/bin/python # -*- coding: UTF-8 -*- import re import urllib def getHtml(url): page = urllib.ur ...
    
			
    8. 
						
  8. Android（java）学习笔记28：泛型概述和基本使用
			
    1. 泛型的概述和基本使用: package cn.itcast_01; import java.util.ArrayList; import java.util.Iterator; /* * Arr ...
    
			
    9. 
						
  9. expected expression __bridge
			
    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u013020103/article/details/30491117 expected expres ...
    
			
    10. 
						
  10. Reverse Polish notation
			
    Reverse Polish notation is a notation where every operator follows all of its operands. For example, ...
    
			
    11.