一、组件的嵌套

 <!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. Ranklib源码剖析--LambdaMart

    Ranklib是一套优秀的Learning to Rank领域的开源实现,其中有实现了MART,RankNet,RankBoost,LambdaMart,Random Forest等模型.其中由微软发 ...

  2. C语言中关于三目运算符的注意事项

    C语言中常见的条件运算符?:在运算符优先级中排行13.部分时候可以代替if--else语句,使代码更加简洁.但是更容易隐含一些不易觉察的错误. 最近接了一个项目,本来通信协议部分很简单,自己的STM3 ...

  3. 看看我做的一款 时间轴 插件 timegliderJs

    TimegliderJs 是一款基于jQuery的时间轴插件.完成后效果. 介绍 Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及 ...

  4. MongDB系列(一)：使用node.js连接数据库

    1.首先启动mongodb数据库服务器 2.创建app.js,代码如下: /** * Created by byzy on 2016/8/18. * node.js 连接 mongodb实例 */ / ...

  5. java多线程基本概述（十三）——Executor

    1:Executor接口 public interface Executor 执行已提交的 Runnable 任务的对象.此接口提供一种将任务提交与每个任务将如何运行的机制(包括线程使用的细节.调度等 ...

  6. clamav 杀毒软件安装及使用配置

    安装clamav 之前还需要安装zlib 要不然安装过程中会报错的. tar -zxvf  zlib-1.2.3.tar.gz cd zlib-1.2.3 ./configure make make ...

  7. Linux--线程安全与可重入函数的异同

    线程安全 比如一个 ArrayList 类,在添加一个元素的时候,它可能会有两步来完成: 1. 在 Items[Size] 的位置存放此元素: 2. 增大 Size 的值. 在单线程运行的情况下,如果 ...

  8. Linux--struct file结构体

    struct file(file结构体): struct file结构体定义在include/linux/fs.h中定义.文件结构体代表一个打开的文件,系统中的每个打开的文件在内核空间都有一个关联的  ...

  9. React Starter Kit 中文文档

    最近没事又翻译了个玩意. Github上的一个Star 非常高的 React 样板程序. 由Node.js,Express,GraphQL和React构建,可选加入Redux等,并可以包含Webpac ...

  10. python——进程、线程、协程

    Python线程 Threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #!/usr/bin/env pytho ...