React--基础学习混搭
最近学习一下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--基础学习混搭的更多相关文章
- react基础学习和react服务端渲染框架next.js踩坑
说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...
- react基础学习
什么是react:React(有时称为React.js 或ReactJS)是一个为数据提供渲染HTML视图的开源JavaScript库; 其特点: 声明式设计:采用声明范式,可以轻松描述应用高效:通过 ...
- react基础学习 一
1. 搭建环境 安装react脚手架 >npm install create-react-app -g 创建文件 >create-react-app 项目名称 启动 ...
- react基础学习 三
获取原生的DOM 注意:获取DOM是要在组件渲染之后才能被获取,所以在constructor里面获取不到原生的DOM 方法一:回调函数 推荐 方法二:createRef() 16版本,推荐 方 ...
- react基础学习 二——生命周期
生命周期mount: mounting装载创建 update更新 unmounting卸载 错误捕获 注意点:生命周期函数的 作用,什么之后用 只有类式组件有生命周期,函数式组件没有生命周期 moun ...
- AntDesign(React)学习-3 React基础
前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...
- react基础（1）
在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...
- React 基础入门，基础知识介绍
React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...
- 【优质】React的学习资源
React的学习资源 github 地址: https://github.com/LeuisKen/react-collection https://github.com/reactnativecn/ ...
- react native学习资料
一:基础学习: react-native中文文档(react native中文网,人工翻译,官网完全同步)http://react-native.cn/docs/getting-started.htm ...
随机推荐
- Anaconda使用入门
简介 Conda是一个开源的包.环境管理器,可以用于在同一个机器上安装不同版本的软件包及其依赖,并能够在不同的环境之间切换 Anaconda包括Conda.Python以及一大堆安装好的工具包,比如: ...
- tomcat 服务添加到系统服务
tomcat: 设置环境变量: CATALINA_HOME: tomcat路径 列如:D:\apache-tomcat-8.5.24 打开命令窗口,进入到tomcat/bin目录下 执行service ...
- 【题解】洛谷P1975排序
分块,注意重复的值之间的处理.跟普通分块的操作一样的啦,具体可以参见‘不勤劳的图书管理员’. #include <bits/stdc++.h> using namespace std; # ...
- ContestHunter#17-C 舞动的夜晚
Description: L公司和H公司举办了一次联谊晚会.晚会上,L公司的N位员工和H公司的M位员工打算进行一场交际舞.在这些领导中,一些L公司的员工和H公司的员工之间是互相认识的,这样的认识关系一 ...
- js操作div的显隐
<!DOCTYPE html><html> <head> <title> new document </title> <meta ht ...
- 小程序根据input输入，动态设置按钮的样式
[需求]实现当手机号已填写和协议已勾选时,“立即登录”按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <v ...
- ES6学习笔记（二）——数组的扩展
扩展运算符 ... 将数组转化成用逗号分隔的参数序列 * 扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换. 应用 1. 合并数组 2. 将 ...
- jaspersoft中分组打印
一:前言 使用IReport已经四个月了,最近在做一个保镖,是要按照类型分类,并且这些类型要横着打印,最后还要算这个类型金额的总值,这张报表现是说需要用到子报表,最后和一个同事一起用group来分组做 ...
- 【Foreign】划分序列 [线段树][DP]
划分序列 Time Limit: 20 Sec Memory Limit: 256 MB Description Input Output 仅一行一个整数表示答案. Sample Input 9 4 ...
- 【Atcoder】ARC 080 F - Prime Flip
[算法]数论,二分图最大匹配 [题意]有无限张牌,给定n张面朝上的牌的坐标(N<=100),其它牌面朝下,每次操作可以选定一个>=3的素数p,并翻转连续p张牌,求最少操作次数使所有牌向下. ...