React 学习二 组件

时间：2022-10-26 16:05:03

React的一个最大的特点就是组件化的开发模式。今天就来试一下：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Hello React!</title>

    <script src="../src/react-0.14.3/build/react.js"></script>

  <script src="../src/react-0.14.3/build/react-dom.js"></script>

    <script src="../src/react-0.14.3/build/browser.min.js"></script>

  </head>

  <body>

    <div id='header'>

    </div>

    <hr  style="clear:both" />

    <div id="body">

      <div> Hi this is test page</div>

    </div>

    <hr />

    <div id="footer"></div>

    <script type="text/babel">

    var JMFooter = React.createClass({

      render: function() {

        return (

            <div className="footer">

              <a href="/AboutUS.aspx">关于博客园</a>

              <a href="/ContactUs.aspx">联系我们</a>

              ©2004-2015<a href="http://www.cnblogs.com/">博客园</a>

              保留所有权利

              <a href="http://www.miitbeian.gov.cn" target="_blank">沪ICP备09004260号</a>

            </div>

        );

      }

    });

    var JMHeader = React.createClass({

      render: function(){

        return <div><div style={{color:'red'}}><h1 >Jimson Blog</h1></div><h3>今天是{this.props.date} </h3></div>;

      }

    })

    ReactDOM.render(

      <JMHeader date={(new Date).toDateString()} style={"float:left"}/>,

      document.getElementById('header')

      );

    ReactDOM.render(

       <JMFooter />,

      document.getElementById('footer')

    );

    </script>

  </body>

</html>

创建两个组件Header，和Footer。 常见的网站头部和底部(这里直接复制了博客园的地步) 看效果：React 学习二 组件

有几个问题JSX语法的问题：

1. 添加css 类，<div class="footer">  是没有效果的，也不会渲染熟悉，正确的是 <div className="footer">

2. 添加style，<div style="color:red">是直接报错的，这里JSX语法不支持这样的，正确的写法是 <div style={{color:'red'}}>

3. 创建组件：React.createClass的render方法只能返回一个封装的节点，多个节点就会报错。如：return<h1></h1><h2></h2> 报错，return <div><h1></h1><h2></h2></div> 是成功的。

4. jsx不会写，没关系，用 jsx compiler 直接把html翻译过来。

React 学习二 组件的更多相关文章

  1. React学习笔记 - 组件&amp&semi;Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  2. 【react学习二】create-react-app 接入antd 并按需加载组件

    1.安装 cnpm i babel-plugin-import --save-dev 2.使用 在根目录下的package.json下的bable中添加相应代码 "babel": ...

  3. AntDesign&lpar;React&rpar;学习-15 组件定义、connect、interface

    虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...

  4. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;二&rpar;&equals;&equals;&equals;&gt&semi;组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  5. react学习&lpar;二&rpar;之通信篇

    react性能提升原理:虚拟DOM react把真是的DOM tree,转化成virtual DOM,每次数据更新后,重新计算virtual DOM并与上一次的作对比,然后对发生改变的部分进行批量更新 ...

  6. React 学习&lpar;二&rpar; ---- props验证与默认属性

    在上一节中, 我们提到了props, 组件之间数据的传递使用props. 我们调用组件时可以设置props, 组件内部通过props获取. 为了props 使用更加友好, React 提供了简单的验证 ...

  7. react学习二 生命周期

    转自:https://www.cnblogs.com/gdsblog/p/7348375.html react 中compent getDefaultProps object getDefaultPr ...

  8. React学习——子组件给父组件传值

    //子组件 var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:<input onCha ...

  9. React学习——ListView组件

    (草稿) 先把代码放上来,再补充说明 <!DOCTYPE html> <html> <head> <title>React ListView</t ...

随机推荐

  1. Http与Socket小谈

    http与socket是网络编程中最为重要的概念,不管是客户端还是服务端,都是最为重要的部分,以下简述两者的关系和区别(个人见解). Http 定义 基于应用层的超文本传输协议.通常承载于TCP/IP ...

  2. IBatisNet使用教程

     1.是数据持久层,对应.NET方向的有Ibatis.NET,只要用来处理数据库表结构和程序实体之间映射,ado.net是用来处理和数据库直接通信的,取出数据(object,int,string,da ...

  3. SQL 2014 in-memory中的storage部分

    基于CTP1的官方白皮书,自己理解的内容.白皮书下载地址:http://download.microsoft.com/download/F/5/0/F5096A71-3C31-4E9F-864E-A6 ...

  4. &lbrack;Android Pro&rsqb; AAR and JAR

    svn status svn log --limit 3 > RELEASE_NOTE.txt cat RELEASE_NOTE.txt pwd project_name_prefix=&quo ...

  5. rbenv Your user account isn&&num;39&semi;t allowed to install to the system Rubygems

    Clone一个新Rails项目到Mac, bundle install 的时候遇到下面的提示 Fetching source index from http://rubygems.org/ Your ...

  6. &lbrack;Js&rsqb;跟随鼠标移动的div

    例子:鼠标移动到一块东西上,出现提示文本框,并且提示文本框跟着鼠标的位置动 document.onmouseover=function(ev){ var oEvent=ev||event; var b ...

  7. 基于Web的企业网和互联网的信息和应用（ 1194&period;22 ）

    基于Web的企业网和互联网的信息和应用( 1194.22 ) 原文更新日期: 2001年6月21日原文地址: http://www.access-board.gov/sec508/guide/1194 ...

  8. pageX&comma;clientX&comma;offsetX&comma;layerX的区别

    pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...

  9. 软件推荐列表（Recommand Software）

    1.Nutstore(https://jianguoyun.com/) Nutstore是一款云端同步软件.类似的有微软的OneDrive(旧名SkyDrive).Google Cloud Drive ...

  10. FILTER优化

    explain plan for select a.* from fxqd_list_20131115_new_100 a where (acct_no, oper_no, seqno, trans_ ...

相关文章