第一个React页面

自己感觉学习React(以下简称R)没有必要上来就是全家桶,这样对自己的打击太大,除非你有使用过其他的桶的经验,如果是的话本文可能并不适合你.

准备工作

我们按照老旧的思路写一个R的页面.思路很简单,引入几个script就好了,在下面的script里面你看到的那几个面生的就是了,跟引入jQ的感觉差不多 当然我们也引入了jQ

我们自己的代码写在什么地方呢?其实就写在body下面的script里面,当然你可能看仔细了那并不是js而是jsx两者之间的区别并不多讲你就当成jsx是js的扩展语法就好了,其实官方也是这么说的,初次见到jsx你或许会感到很恶心,不过写的多了你就不恶心了.因为浏览器是不认识jsx的所以我们要加一句 type=text/babel就是说要用babel来转成浏览器能看的代码这个就不用你来操心了

多说一句本实例是要有本地服务器环境的自己用 nodejs 就能跑一个不多解释

JSX

到了我们的 JSX 部分, 其实这一部分的标题应该写成 component(组件)会更好一些.组件不说人话的解释就是对数据以及操作数据的方法封装, 封装的结果就是组件, 从这个角度讲组件跟class(类)很像, 其实不只是很像R中很多组件就是这么写的你比如class MyButton extends React.Component{...}

你可能对非人话版本的很疑惑那么到底什么是组件呢?其实你从开始学习HTML就一直在用组件, 你比如 这其实就是一个很简单的组件, 一个按钮的组件, 该组件的名字叫做 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 (
      

        
{this.props.item.title}
        
{this.props.test}
        
      
    )
  }
}

看见了吧里面没什么新奇的东西 其实就是写了个 class 当然这是 es6 的 写法 这个class 就两个方法 一个是 constructor 另外一个是 render constructor 负责数据的初始化工作 render 负责渲染输出, 里面的props比较有意思 这个东西是什么呢? 我们的组件需要一些数据但是这个数据需要从外部引入 引入的接口就是 props 想象一下 一个按钮里面的文字也是有 value 这个接口的你就懂了

那么这个props到底是多少呢?谁用这个props谁知道

---

好累 休息一会儿