一、组件的嵌套

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title></title>

 <script src="react.min.js" type="text/javascript" charset="utf-8"></script>

 <script src="react-dom.min.js" type="text/javascript" charset="utf-8"></script>

 <script src="browser.min.js" type="text/javascript" charset="utf-8"></script>

 <style type="text/css">

 *{margin:0;padding:0;list-style: none;}

 html,body,#out,#inner{width:100%;height:100%;overflow:hidden;}

 #inner{display:-webkit-box;-webkit-box-orient:vertical;}

 </style>

 </head>

 <body>

     <div id="out"></div>

 </body>

 <script type="text/babel">

 var sty={

     sty1:{height:'50px',background:'orange','text-align':'center','line-height':'50px'},

     sty2:{height:'30px',background:'yellow','text-align':'center','line-height':'30px',overflow:'hidden'},

     sty3:{height:'30px',float:'left',width:'25%','box-sizing':'border-box',border:'1px solid red'},

     sty4:{background:'green',WebkitBoxFlex: 1}

 }

     var Demo=React.createClass({

         render:function(){

             return(

                 <div id="inner">

                     <Head/>

                     <Nav/>

                     <Con/>

                     <Footer/>

                 </div>

             )

         }

     })

     var Head=React.createClass({

         render:function(){

             return(

                 <div style={sty.sty1}>react组件头部</div>

             )

         }

     })

     var Nav=React.createClass({

         render:function(){

             return(

                 <ul style={sty.sty2}>

                     <li style={sty.sty3}>首页</li>

                     <li style={sty.sty3}>图片</li>

                     <li style={sty.sty3}>艺术</li>

                     <li style={sty.sty3}>音乐</li>

                 </ul>

             )

         }

     })

     var Con=React.createClass({

         render:function(){

             return(

                 <div style={sty.sty4}>内容</div>

             )

         }

     })

     var Footer=React.createClass({

         render:function(){

             return(

                 <ul style={sty.sty2}>

                     <li style={sty.sty3}>首页</li>

                     <li style={sty.sty3}>首页</li>

                     <li style={sty.sty3}>首页</li>

                     <li style={sty.sty3}>首页</li>

                 </ul>

             )

         }

     })

     ReactDOM.render(<Demo/>,document.getElementById('out'))

 </script>

 </html>

在做移动端的时候，有时候我们可以把React与mui混合使用，但mui中的classname记得换成className,另外三大框架（vue/react/angular）都可以与bootstrap搭配使用，

在一些简单的页面中我们可以使用bootstrap的可视化组件快速搭建原型页面概图。工具链接：http://www.bootcss.com/p/layoutit/#

React学习小结（二）的更多相关文章

  1. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  2. python --- 字符编码学习小结(二)

    距离上一篇的python --- 字符编码学习小结(一)已经过去2年了,2年的时间里,确实也遇到了各种各样的字符编码问题,也能解决,但是每次都是把所有的方法都试一遍,然后终于正常.这种方法显然是不科学 ...

  3. Vue学习小结(二)

    接上一批,小结(二). 三.导航内容(含左侧导航及顶部面包屑导航) 其实导航条主要根据element-ui的教程进行编写,官网:http://element-ui.cn/#/zh-CN/compone ...

  4. React学习小结（三）

    一.React数据的传输 1.属性和状态是react中数据传递的载体 2.属性是声明以后不允许被修改的东西 3.属性只能在组件初始化的时候声明并传入组件内部,并且在组件内部通过this.props获取 ...

  5. React学习小结（一）

    一.React的发展 facebook在构建instagram网站的时候遇见两个问题: 1.数据绑定的时候,大量操作真实dom,性能成本太高 2.网站的数据流向太混乱,不好控制 于是facebook起 ...

  6. React学习笔记(二) 组件状态

    组件的状态(this.state): 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI getIni ...

  7. react学习（二）--元素渲染

    元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普 ...

  8. Maven学习小结(二 项目构建过程)

    1.创建Maven项目 1.1 创建Maven项目的约定目录结构 1.2 编辑pom.xml <project xmlns="http://maven.apache.org/POM/4 ...

  9. javase学习小结二

    三角函数方法 Math.sin(radians):Math.sin(Math.PI/6)=0.5 Math.cos(radians):Math.cos(Math.PI/3)=0.5 Math.tan( ...

随机推荐

  1. C# SMTP发送邮件

    public void SendMail() { MailMessage mail = new MailMessage(); mail.From = new MailAddress("fro ...

  2. 关于sql语句between and的边界问题

    BETWEEN 操作符 操作符 BETWEEN ... AND 会选取介于两个值之间的数据范围.这些值可以是数值.文本或者日期. SQL BETWEEN 语法 SELECT column_name(s ...

  3. 个人php开发之工具--listary（一）

    摘要:俗话说:工欲善其事,必先利其器.作为一名开发者来说,熟练的使用工具可以达到事半功倍的效果,我就我自己使用的工具说自己的看法.当然,每个人对某个软件都有自己的看法或使用经验,还是那句老话,什么是最 ...

  4. 自动获取代理IP信息的例子，含代码，分享哦，

    /// <summary> /// 读取URL数据内容 /// </summary> /// <param name="url">网址</ ...

  5. Linux - atexit()（注册终止）函数

    进程终⽌的⽅式有8种,前5种为正常终⽌,后三种为异常终⽌: 1. 从main函数返回: 2 .调⽤exit函数:3 .调⽤_exit或_Exit:4 .最后⼀个线程从启动例程返回:5 .最后⼀个线程调 ...

  6. 什么是PROFINET IO系统的实时性

    实时系统是指系统能及时响应外部事件的请求,在规定的时间内完成对该事件的处理,并控制所有实时任务协调一致的运行. PROFINET IO系统的实时性就是指当有一个外部事件发生时,从输入信号到传输.到控制 ...

  7. bootstrap快速入门笔记（九）-响应式工具

    一,可用的类   超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 ...

  8. IT行业能力细分

    在软件行业工作7年了,平时很懒,懒得做分享,今天特意分享一下软件行业,职业大的技术分类,同学们可根据自己职业规划补充学习知识块.

  9. PL/SQL 自动补全[转]

    1.新建 shortcuts.txt 内容如下: s = SELECT t.* FROM t w = WHERE b = BETWEEN AND l = LIKE '%%' o = ORDER BY ...

  10. Struts2框架的基本使用（三）

    上篇 Struts2框架的基本使用(二)介绍了Action和result的相关配置操作,本篇接着介绍剩下的异常处理机制和Convention插件的使用.下篇文章介绍的是Struts2框架中标签库的使用 ...