一、组件的嵌套

 <!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. java 基础知识二 基本类型与运算符

    java  基础知识二 基本类型与运算符 1.标识符 定义:为类.方法.变量起的名称 由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...

  2. 36.java_exception_test

    package mytext1; class TZException extends Exception{ TZException(String str){ super(str); } public ...

  3. Linux 安装SVN服务器 （转）

    一. SVN 简介 Subversion(SVN) 是一个开源的版本控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个中央资料档案库 (repository) 中 ...

  4. listview展示倒计时

    public class MainActivity extends Activity { /**截至时间数据源**/ private List<Date> listData; /**当前时 ...

  5. 使用PCA + KNN对MNIST数据集进行手写数字识别

    首先引入需要的包 %matplotlib inline import numpy as np import scipy as sp import pandas as pd import matplot ...

  6. 深入理解css中vertical-align属性

    一.为什么要写这篇文章 今天看到一个问题: 两个div 都设置 display:inline-block,正常显示:但是在第二个div中加一个块级元素或者内联元素,显示就变了个样,为什么? <m ...

  7. 最近公共祖先LCA(Tarjan算法)的思考和算法实现

    LCA 最近公共祖先 Tarjan(离线)算法的基本思路及其算法实现 小广告:METO CODE 安溪一中信息学在线评测系统(OJ) //由于这是第一篇博客..有点瑕疵...比如我把false写成了f ...

  8. Java: 隐性赋值（Implicit Assignment)

    初学 Java 时,我总是记不住如何区别 i++ 和 ++i.在<算法(第四版)>一书中第16页,作者提到: ** ++i ** is the same as i = i+1, and h ...

  9. Json对象和Json字符串之间的转换

    json字符串转json对象,调用parse方法: var b='{"name":"2323","sex":"afasdf&quo ...

  10. 过滤器Filter（17/4/8）

    1:是JavaWeb三大组件之一: Servlet.Lisener(2个感知监听器不需要配置).Filter 2:过滤器 它会在一组资源(jsp.servlet.css.html等等)的前面执行! 它 ...