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. VHDL----基础知识1

    摘要: 打算分几篇,来理清VHDL的基础知识 ----------------------------------------------------------------------------- ...

  2. DSP28335矩阵键盘的检测

    #include "DSP2833x_Device.h"#include "DSP2833x_Examples.h"char temp;void gpio_in ...

  3. JAVA事务

    一.什么是事务 我们通常会认为事务与数据库有关. 事务是访问数据库的一个操作序列,数据库应用系统通过事务集来完成对数据库的操作.事务的正确执行使得数据库从一种状态转换成另外一种状态. 事务必须服从IS ...

  4. CoolShell Puzzle攻略[更新隐藏剧情]

    CoolShell博主陈皓做了一个在线的puzzle很有意思,链接在这里,这里记录一下解题的一些步骤. Puzzle 0 ++++++++[>+>++>+++>++++> ...

  5. python-day3-集合

    集合的特性:无序性,唯一性,可嵌套性 1 #创建集合方式 2 s1={11,22}# 直接创建 3 s2=set()#创建空集合 4 s3=set([111,222,333])#转换为集合 1 #集合 ...

  6. c读取文本文档

    想数一下文本文档一共有多少行,写了个小程序 1.用fopen()以只读方式打开文件 2.用fgetc()获取文件流中的字符内容 3.如果字符内容为'\n'换行符,count++ 最后输出count的值 ...

  7. 解释型语言和编译型语言如何交互？以lua和c为例

    转自http://my.oschina.net/mayqlzu/blog/113528 问题: 最近lua很火,因为<愤怒的小鸟>使用了lua,ios上有lua解释器?它是怎么嵌入大ios ...

  8. android中 回调方法，怎么转变为阻塞执行的方法

    项目中需要用到在wifi这一块,扫描附近wifi,然后一个个遍历所有wifi,并且尝试连接,所以就在这里需要每连接一个wifi进行阻塞,当连接失败的时候才进行尝试下一个连接,当连接成功时则break. ...

  9. 【BZOJ】【1211】【HNOI2004】树的计数

    Prufer序列+组合数学 嗯哼~给定每个点的度数!求树的种数!那么很自然的就想到是用prufer序列啦~(不知道prufer序列的……自己再找找资料吧,这里就不放了,可以去做一下BZOJ1005明明 ...

  10. JSP Workshop

    http://www.cnblogs.com/ITtangtang/p/4126395.html 发现http://www.tutorialspoint.com/里的资料很全也很不错啊! 资料:htt ...