1.代码

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <script src="./react-0.13.2/build/react.js"></script>

    <script src="./react-0.13.2/build/JSXTransformer.js"></script>

	<script type="text/jsx">

		var style = {

			color : "red",

			border: "1px #000 solid",

		};

		var HelloWorld = React.createClass({

			render: function(){

				return <p>你好React</p>;

			}

		});

		React.render(<div style={style}><HelloWorld></HelloWorld></div>, document.body);

	</script>

</body>

</html>

2.运行结果

3.运行后源码

<html lang="zh-cn"><head>

    <meta charset="UTF-8">

    <title>Document</title>

<script>

		var style = {

			color : "red",

			border: "1px #000 solid",

		};

		var HelloWorld = React.createClass({displayName: "HelloWorld",

			render: function(){

				return React.createElement("p", null, "你好React");

			}

		});

		React.render(React.createElement("div", {style: style}, React.createElement(HelloWorld, null)), document.body);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNmb3JtZWQuanMiLCJzb3VyY2VzIjpbIklubGluZSBKU1ggc2NyaXB0Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsSUFBSSxLQUFLLEdBQUc7R0FDWCxLQUFLLEdBQUcsS0FBSztHQUNiLE1BQU0sRUFBRSxnQkFBZ0I7R0FDeEIsQ0FBQztFQUNGLElBQUksZ0NBQWdDLDBCQUFBO0dBQ25DLE1BQU0sRUFBRSxVQUFVO0lBQ2pCLE9BQU8sb0JBQUEsR0FBRSxFQUFBLElBQUMsRUFBQSxTQUFXLENBQUEsQ0FBQztJQUN0QjtHQUNELENBQUMsQ0FBQztFQUNILEtBQUssQ0FBQyxNQUFNLENBQUMsb0JBQUEsS0FBSSxFQUFBLENBQUEsQ0FBQyxLQUFBLEVBQUssQ0FBRSxLQUFPLENBQUEsRUFBQSxvQkFBQyxVQUFVLEVBQUEsSUFBYyxDQUFNLENBQUEsRUFBRSxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJcblx0XHR2YXIgc3R5bGUgPSB7XG5cdFx0XHRjb2xvciA6IFwicmVkXCIsXG5cdFx0XHRib3JkZXI6IFwiMXB4ICMwMDAgc29saWRcIixcblx0XHR9O1xuXHRcdHZhciBIZWxsb1dvcmxkID0gUmVhY3QuY3JlYXRlQ2xhc3Moe1xuXHRcdFx0cmVuZGVyOiBmdW5jdGlvbigpe1xuXHRcdFx0XHRyZXR1cm4gPHA+5L2g5aW9UmVhY3Q8L3A+O1xuXHRcdFx0fVxuXHRcdH0pO1xuXHRcdFJlYWN0LnJlbmRlcig8ZGl2IHN0eWxlPXtzdHlsZX0+PEhlbGxvV29ybGQ+PC9IZWxsb1dvcmxkPjwvZGl2PiwgZG9jdW1lbnQuYm9keSk7XG5cdCJdfQ==</script></head>

<body><div style="color:red;border:1px #000 solid;" data-reactid=".0"><p data-reactid=".0.0">你好React</p></div></body></html>

　　

React的CSS的更多相关文章

  1. React中css的使用

    网页的布局.颜色.形状等UI展示方式主要是由Css进行设置,在ReactJs中也是一样.ReactJs中的Css结构方式与传统的Web网页类似,但依然存在一些差异.ReactJs中Css文件本身的编写 ...

  2. React Transition css动画案例解析

    实现React Transition Css动画效果 首先在项目工程中引入react-transition-group: npm install react-transition-group --sa ...

  3. create-react-app创建react项目 css模块化处理

    用的css预处理器用sass,其他大同小异. 用create-react-app创建项目,执行npm run eject弹出配置文件(此操作不可逆): 配置sass,用的最新的CRA,webpack4 ...

  4. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

  5. CSS Modules 解决 react 项目 css 样式互相影响的问题

    1. CSS Modules引入目的 写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去. 另外,每 ...

  6. styled-components：解决react的css无法作为组件私有样式的问题

    react中的css在一个文件中导入,是全局的,对其他组件标签都会有影响. 使用styled-components第三方模块来解决,并且styled-components还可以将标签和样式写到一起,作 ...

  7. [React] Use CSS Transitions to Avoid a Flash of Loading State

    Based on research at Facebook, we know that if a user sees a flash of loading state, they perceive t ...

  8. react react使用css

    在react 中使用css有以下几种方法 第一种全局使用 app.js import React from 'react'; import Router from "./router&quo ...

  9. [Webpack + React] Import CSS Modules with TypeScript and webpack

    If you try to use CSS Modules in TypeScript the same way you would use them in JavaScript, with webp ...

随机推荐

  1. ios-仿新浪微博app-第1天UI搭建

    1:不用storyboard 点击工程删除main  ui加载全部手码  >> 在application的代理方法didFinishLaunchingWithOptions中添加代码显示w ...

  2. 查看Android应用签名信息

    本文档介绍在Android下如何查看自己的应用签名及三方APK或系统APK签名信息,包含其中的MD5.SHA1.SHA256值和签名算法等信息. 1.查看自己的应用签名 可以通过两种方式查看 (1)  ...

  3. Ubuntu 16.04 下卸载 lnmp/lamp 方法

    1.卸载 apache2 sudo apt-get --purge remove apache2* sudo apt-get autoremove apache2 (--purge 是完全删除并且不保 ...

  4. Poj 1029 分类： Translation Mode 2014-04-04 10:18 112人阅读 评论(0) 收藏

    False coin Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 16418   Accepted: 4583 Descr ...

  5. Asp.net 导入Excel（服务器不带Office）

    #region 把excel文件转换为DataSet. /// <summary> /// 把excel文件转换为DataSet. /// </summary> /// < ...

  6. 服务器NPC的ID如何分配的

    服务器ID分配包括NPC,Monster,Pet的ID分配都是调用allocateUID然后自动保存的ID加一,pet说是通过玩家的ID移位获得的,调试一下发现还是调用allocateUID,如果通过 ...

  7. VSTO Word2003 添加菜单栏, 添加工具栏

    直接上代码了:   Microsoft.Office.Core.CommandBar menuBar; CommandBarButton ccbtn = null;        CommandBar ...

  8. UML基本表示法（转载）

    UML是流行的图解符号.我们都知道,UML是可视化,说明,构建和记录软件和非软件系统的组成部分.这里的可视化是最重要的部分,需要被理解和记忆. UML符号是最重要的建模元素.适当有效地使用符号是非常重 ...

  9. （转）Engineering Productivity

    (转)http://www.wandoujia.com/blog/from-qa-to-ep 这个文章之前读过,很不错.今天再读,有不一样的感受!推荐下. 下面是几段摘录: EP 是什么 说到这里,E ...

  10. HDOJ 1428 漫步校园

    漫步校园 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...