自己感觉学习React(以下简称R)没有必要上来就是全家桶,这样对自己的打击太大,除非你有使用过其他的桶的经验,如果是的话本文可能并不适合你.
准备工作
我们按照老旧的思路写一个R的页面.思路很简单,引入几个script就好了,在下面的script里面你看到的那几个面生的就是了,跟引入jQ的感觉差不多 当然我们也引入了jQ
我们自己的代码写在什么地方呢?其实就写在body下面的script里面,当然你可能看仔细了那并不是js而是jsx两者之间的区别并不多讲你就当成jsx是js的扩展语法就好了,其实官方也是这么说的,初次见到jsx你或许会感到很恶心,不过写的多了你就不恶心了.因为浏览器是不认识jsx的所以我们要加一句 type=text/babel就是说要用babel来转成浏览器能看的代码这个就不用你来操心了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Learn</title>
<script src="./static/js/react.js"></script>
<script src="./static/js/react-dom.js"></script>
<script src="./static/js/browser.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
body{
background-color: rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div id="app"></div>
<script src="./static/js/script.jsx" type="text/babel"></script>
</body>
</html>
多说一句本实例是要有本地服务器环境的自己用 nodejs 就能跑一个不多解释
JSX
到了我们的 JSX 部分, 其实这一部分的标题应该写成 component(组件)会更好一些.组件不说人话的解释就是对数据以及操作数据的方法封装, 封装的结果就是组件, 从这个角度讲组件跟class(类)很像, 其实不只是很像R中很多组件就是这么写的你比如class MyButton extends React.Component{...}
你可能对非人话版本的很疑惑那么到底什么是组件呢?其实你从开始学习HTML就一直在用组件, 你比如<input type="button" value="Button" onclick="alert('Hello Kitty')"/> 这其实就是一个很简单的组件, 一个按钮的组件, 该组件的名字叫做 input 有 type value 这种属性(数据)也有 onclick 这种方法, 如果我要复用的话再写一个input 就好了, R里面组件我理解为是以上组件的再组件化 可以说是 组件的组件
我们的第一个页面我不想太简单 最好引入数据 http://api.douban.com/v2/movie/top250?start=0&count=10 这是豆瓣的一个 api 里面是一堆的json数据我们想要把数据渲染出来 我们想每一组的数据就用 li 来做 我们的第一个组件就叫做 MovieItem 其他的无所谓 但是第一个字母一定要大写, 这是规定
class MovieItem extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<li>
<h2>{this.props.item.title}</h2>
<h3>{this.props.test}</h3>
<img onClick={this.handleClick} src={this.props.item.images.small} alt={this.props.item.title} />
</li>
)
}
}
看见了吧里面没什么新奇的东西 其实就是写了个 class 当然这是 es6 的 写法 这个class 就两个方法 一个是 constructor 另外一个是 render constructor 负责数据的初始化工作 render 负责渲染输出, 里面的props比较有意思 这个东西是什么呢? 我们的组件需要一些数据但是这个数据需要从外部引入 引入的接口就是 props 想象一下 一个按钮里面的文字也是有 value 这个接口的你就懂了
那么这个props到底是多少呢?谁用这个props谁知道
好累 休息一会儿
网友评论