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. AppDelegate中的方法解析

    // 当应用程序启动完毕的时候就会调用(系统自动调用) -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOp ...

  2. 容器适配器之queue

    转载http://blog.csdn.net/thefutureisour/article/details/7751846容器适配器容器适配器其实就是一个接口转换装置,使得我们能用特定的方法去操作一些 ...

  3. Vim实用命令

    [n]yy:从当前行复制n行 [n]p:粘贴n次 [n]dd:删除当前行往下的n行 /  : 向后查找 ?:向前查找 u → undo 撤销上一操作 <C-r> → redo 0 → 开启 ...

  4. Netsharp快速入门(之7) 基础档案(工作区1 向导创建工作区)

    作者:秋时 杨昶   时间:2014-02-15  转载须说明出处 3.5     商品开发 3.5.1  创建部件工作区 3.5.1.1 工作区向导 1.打开平台工具,选择界面管理节点下的部件工作区 ...

  5. winform - BackgroundWorker

    http://www.cnblogs.com/happy555/archive/2007/11/07/952315.html 在VS2005中添加了BackgroundWorker组件,该组件在多线程 ...

  6. proxy server 代理服务器

    有时候,我觉得自己需要去搞明白.搞清楚一个概念,帮我打通一下自己的知识体系,或者说,尝试联络起来. 1. 简介 突破自身IP限制,访问国外站点. 访问单位或者团体内部资源. 突破中国电信的IP封锁. ...

  7. 【CentOS】安装jdk

    问题描述:       jdk安装与配置   (1)查看是否安装jdk --CentOS默认自带openjdk         先查看 rpm -qa | grep java         显示如下 ...

  8. ffmpeg iOS 编译

    编译模拟器版本1 到https://github.com/yuvi/gas-preprocessor下载gas-preprocessor.p并拷贝到/usr/sbin目录中2 下载ffmpeg源码.h ...

  9. 【bzoj1012】[JSOI2008]最大数maxnumber

    1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 8339  Solved: 3624[Submi ...

  10. ExtJs之字段集FieldSet

    //Ext.form.FieldSet扩展自Ext.container.Container.其优点就是把相同字段集中在一起,在外面字段外面加了个线"围住"他们.        // ...