最近学习一下React,通过  阮一峰《React 入门实例教程》 、React 入门教程、菜鸟教程--React 这三个学习基础使用，接下来看慕课网的三个教学视频。

React是什么我也不能说的很透彻，但学习时候觉得就是能摆脱不得复用的陋习，要什么就写什么组件。

以下内容包含  利用Jquery读取ajax，利用map遍历，同时用到了父子组件，组件生命周期，state,props。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.js"></script>

    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.js"></script>

    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>

<p>根据ajax获得一个JSON对象  遍历出信息，同时定义一个按钮子组件，通过props.id传递，并将ID打印出来 </p>

<div id="example"></div>

<script type="text/babel">

//子组件 按钮

var ButtonDel = React.createClass({

    handleClick : function(){

        console.log(this.props.id)

    },

    render: function(){

        return (

            <button id={this.props.id} onClick={this.handleClick}>del me</button>//读取父组件上的id属性

        )

    }

});

var UserGist = React.createClass({

//定义初始化state 我当做声明来用

    getInitialState : function(){

        return{

            config :[]

        }

    },

//组件第一次渲染调用后，使用ajax

  componentDidMount: function() {

    var config = this.state.config;

    $.get(this.props.source, function(result) {

//拿到返回的值之后设置state 把整个json给config

     this.setState({

        config : result

     });

    }.bind(this));

  },

  render: function() {

    var config = this.state.config;

    var items = config.map(function(item){

        return (

            <li>

               { item.owner.login}  link  {item.html_url}

               <ButtonDel id={item.id}/> //这个是按钮子组件

            </li>

        );

    },this); //这里的this是做什么用的呢？

// <ButtonDel id={item.id} delClick={this.handleClick} > 如果上面的ButtonDel出现this.handleClick 需要上面的this

    return (

      <div>

        {items}

      </div>

    );

  }

});

//定义组件

ReactDOM.render(

  <UserGist source="https://api.github.com/users/octocat/gists"/>,

  document.getElementById('example')

);

    </script>

</body>

</html>

上面的结果就是点击console.log   button上面的id，再进行别的操作。

以上只是小小整合，期待能更加深入进入学习.....待续

React--基础学习混搭的更多相关文章

  1. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  2. react基础学习

    什么是react:React(有时称为React.js 或ReactJS)是一个为数据提供渲染HTML视图的开源JavaScript库; 其特点: 声明式设计:采用声明范式,可以轻松描述应用高效:通过 ...

  3. react基础学习 一

    1. 搭建环境 安装react脚手架  >npm install create-react-app -g 创建文件            >create-react-app 项目名称 启动 ...

  4. react基础学习 三

    获取原生的DOM 注意:获取DOM是要在组件渲染之后才能被获取,所以在constructor里面获取不到原生的DOM 方法一:回调函数   推荐 方法二:createRef()   16版本,推荐 方 ...

  5. react基础学习 二——生命周期

    生命周期mount: mounting装载创建 update更新 unmounting卸载 错误捕获 注意点:生命周期函数的 作用,什么之后用 只有类式组件有生命周期,函数式组件没有生命周期 moun ...

  6. AntDesign(React)学习-3 React基础

    前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...

  7. react基础（1）

    在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...

  8. React 基础入门，基础知识介绍

    React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...

  9. 【优质】React的学习资源

    React的学习资源 github 地址: https://github.com/LeuisKen/react-collection https://github.com/reactnativecn/ ...

  10. react native学习资料

    一:基础学习: react-native中文文档(react native中文网,人工翻译,官网完全同步)http://react-native.cn/docs/getting-started.htm ...

随机推荐

  1. NIO--2-代码

    package com.study.nio; import java.io.IOException; import java.net.InetSocketAddress; import java.ni ...

  2. Codeforces Round #518 Div. 1没翻车记

    A:设f[i][j][0/1]为前i个数第i位为j且第i位未满足/已满足限制的方案数.大力dp前缀和优化即可. #include<iostream> #include<cstdio& ...

  3. [bzoj1018] [SHOI2008]堵塞的交通

    题目描述 有一天,由于某种穿越现象作用,你来到了传说中的小人国.小人国的布局非常奇特,整个国家的交通系统可以被看成是一个22行CC列的矩形网格,网格上的每个点代表一个城市,相邻的城市之间有一条道路,所 ...

  4. [洛谷P3153] [CQOI2009]跳舞

    题目大意:有n个女生,n个男生,每次一男一女跳舞.同一队只会跳一次.每个男孩最多只愿意和k个不喜欢的女孩跳舞,女孩同理.问舞会最多能有几首舞曲? 题解:二分跳了多少次舞,每次重建图,建超级原点和汇点, ...

  5. Flash by sshockwave [树dp]

    题目 给定一棵树,每个点有一个活动时间,长度为正整数$t_i$ 你需要安排每个点的活动时间什么时候开始什么时候结束,并且满足:任何一个时刻没有两个相邻的点都在活动 开始时刻为0,在以上条件下最小化所有 ...

  6. CentOS 7, Attempting to create directory /root/perl5

    By francis_hao    Apr 10,2017 在使用CentOS 7的时候,首次登陆会出现新建一个perl5文件夹的提示,删除该文件后,之后登陆还是会出现该提示并新建了perl5文件夹. ...

  7. POJ3436：ACM Computer Factory（最大流）

    ACM Computer Factory Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9963   Accepted: 3 ...

  8. Python 入门学习笔记

    安装和运行 官网下载安装包https://www.python.org/downloads/mac-osx/下载完直接安装即可 运行打开 terminal,输入命令 python,进入 python ...

  9. jquery中lhgdialog插件（一）

    一:前言 最近在使用jquery的控件,其实以前也写但是突然之间遇到了需要从弹出窗口传值到父窗口,突然觉得这种传值的方式其实也是需要javascript的基础的,但是我自己还没有去真正的做过,所以还是 ...

  10. HDU2177取(2堆)石子游戏---（威佐夫博弈）

    http://acm.hdu.edu.cn/showproblem.php?pid=2177 取(2堆)石子游戏 Time Limit: 3000/1000 MS (Java/Others)    M ...