```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Clock extends React.Component {
constructor(props){
super(props);
this.state = {
msg:"hello world",
imgUrl:""
};
}
render(){
return(
<div>
<h1>{this.state.msg}</h1>
<img src={this.state.imgUrl} />
</div>
);
}
componentDidMount(){
var url = "https://douban.uieee.com/v2/movie/top250";
$.ajax({
url,
type:"get",
dataType:"jsonp",
success: res => {
console.log(1);
var subjects =res.subjects[0];
var title = subjects.title;
var imgUrl = subjects.images.small;
this.setState({
msg:title,
imgUrl:imgUrl
})
}
})
// console.log(1);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
</script>
</body>
</html>
```
- HTML,CSS
- 如何书写高效的css样式
- box-shadow
- 表格合并行列
- 自适应单位
- 隐藏元素
- 浏览器缓存
- 浏览器内核
- css和js的合理走位
- 2021样式问题汇总
- 模拟面试
- 移动端适配问题
- flexible(rem)
- vw+rem
- 判断一个属性是对象的私有属性
- px rpx em rem vw
- 清除浮动
- 栅格系统
- get&&post
- 雪碧图
- new操作符
- call apply bind区别
- 前端模块化
- 回调函数
- 回调地狱(封装版)
- 回调地狱(promise)
- 回调地狱(generator)
- 回调地狱(async)
- es6新特性
- let
- 箭头函数
- 展开 解构 默认赋值
- vue生命周期
- axios封装
- axios跨域拿数据
- ajax封装
- JavaScript
- 数组
- 排序
- 取偶数
- 反转排序
- 取最大值
- 数组去重
- 复杂版
- 数组的克隆(深拷贝)的方法
- 求质数
- 原型和原型链
- 创建对象
- 什么是路由
- SASS
- jQuery中的append和prepend区别?
- css动画及js动画的区别
- 隐式类型转换
- 原型
- 事件传播
- 函数
- 增加属性
- 构造函数
- 一元操作符
- 作用域
- 短语
- Vue
- - nextTick
- 自我介绍
- 哦豁(;д;)
- for in效果
- 事件
- promise特点
- 如何实现一个ajax请求
- 媒体查询
- substr和substring
- MVC、MVVM
- 面向对象
- 取数据、渲染数据
- ajax
- vue
- React
- es6-class
- 几种类型的DOM节点
- js同源策略
- 闭包
- 2021
- 数据类型
- 闭包2
- 防抖节流
- 原型与原型链
- call与apply与bind
- 深浅拷贝
- New关键字
