一、组件的嵌套

 <!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. 关于block使用的几点注意事项

    1.在使用block前需要对block指针做判空处理. 不判空直接使用,一旦指针为空直接产生崩溃. if (!self.isOnlyNet) { if (succBlock == NULL) { // ...

  2. [编织消息框架][JAVA核心技术]动态代理应用10-水平扩展方案

    服务分为系统服务同用户服务两种 水平扩展是基于系统服务,而拆分方式又有几种方案,按数据跟业务情况来做决策 1.每个服务独立存储(图1):每个服务只负责一个或多个领域实体存储,A服务不能直接修改B服务的 ...

  3. 【模板】链式前向星+spfa

    洛谷传送门--分糖果 博客--链式前向星 团队中一道题,数据很大,只能用链式前向星存储,spfa求单源最短路. 可做模板. #include <cstdio> #include <q ...

  4. 【Java 并发】详解 ThreadPoolExecutor

    前言 线程池是并发中一项常用的优化方法,通过对线程复用,减少线程的创建,降低资源消耗,提高程序响应速度.在 Java 中我们一般通过 Exectuors 提供的工厂方法来创建线程池,但是线程池的最终实 ...

  5. vue实现全选效果

    vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...

  6. Python之路- 反射&定制自己的数据类型

    一.isinstance和issubclass isinstance(obj,cls)检查是否obj是否是类 cls 的对象 issubclass(sub, super)检查sub类是否是 super ...

  7. linux系统中.bashrc的妙用

    一.有何作用 .bashrc - The individual per-interactive-shell startup file. .bashrc - 主要保存个人的个性化设置,如命令别名.路径等 ...

  8. JavaScript 中有关Array操作的一些函数

    JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素. 要取得Array的长度,直接访问length属性: var arr = [1, 0.222, 'Hi', null, ...

  9. 蓝桥杯-平方怪圈-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  10. JAVA控制台版斗地主

    一.核心思路: 1.首先分析流程: A>B>C>A>B>C>A>B>C 等于  while(true){ A>B>C } 然后完善细节 发牌 ...