一、组件的嵌套

 <!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. 什么是RESTful？

    RESTful一种软件架构风格,设计风格而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制. REST ...

  2. javaScript 中String的常用方法

    1.length() 字符串的长度 例:char chars[]={'a','b'.'c'}; String s=new String(chars); int len=s.length(); 2.ch ...

  3. DOM Mutation Observer

    源链接:http://www.jianshu.com/p/b5c9e4c7b1e1

  4. apache-maven-3.3.9 环境配置

    本地 maven 环境 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Maven是 Apache 下的一个项目,目前我的新版本是 3.3.9. 1.官网下载 Maven:http:/ ...

  5. Java中如何动态创建接口的实现

    有很多应用场景,用到了接口动态实现,下面举几个典型的应用: 1.mybatis / jpa 等orm框架,可以在接口上加注解进行开发,不需要编写实现类,运行时动态产生实现. 2.dubbo等分布式服务 ...

  6. div模拟输入框input/textarea

    //html<!--填写信息--> <div class="info-wrap"> <form class="formToCheck&quo ...

  7. ArrayList 如何完美去除空值

    package sourceCode.ArrayList; import java.util.ArrayList; import java.util.List; public class arrayL ...

  8. Google Earth影像数据破解之旅

    "Zed, you are so excellent." 为什么要写这句英文?容我卖个关子稍后再解释. 相信大多数人都体验过Google Earth(简称GE),我对GE最初的印象 ...

  9. python自动化测试应用-第6篇（WEB测试）--Selenium元素篇

    篇6                            python自动化测试应用-Selenium基础篇 --lamecho 1.1概要 大家好!我是lamecho(辣么丑),上一篇我们搭建好p ...

  10. 使用Asp.Net MVC开发兼职文章系统

    我已经开发好了,你拿去用就是了. 以下是README的内容,包含功能要求和开发过程的一些思考: 一.功能 1.学生兼职人员文章(任务.自由编写),审核(通过,退回修改,无效),并按每15天结算一次费用 ...