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. oracle查看最大长度

    select s.ids from Student s where length(s.ids)=311 select max(length(s.ids)) from Student s

  2. 20145120 《Java程序设计》第10周学习总结

    20145120 <Java程序设计>第10周学习总结 教材学习内容总结 转自:http://www.cnblogs.com/springcsc/archive/2009/12/03/16 ...

  3. <梦断代码>读后感2

    <梦断代码>这本书读了一半,我的心情久久不能平静. 为什么好软件如此难做?这是我本人,我想也是很多人都在苦苦思索的一个问题,虽然没有人能有完全确定的答案,但通过书中的记述,和个人思考,还是 ...

  4. js—对象

    一.创建对象 var car = new Object(); var car = {}; 二.属性和方法 var car = { color : "red", run : func ...

  5. Tomcat性能参数设置

    Tomcat性能参数设置 Tomcat性能参数设置 博客分类: Java LinuxTomcat网络应用多线程Socket 默认参数不适合生产环境使用,因此需要修改一些参数 1.修改启动时内存参数.并 ...

  6. 【Length of Last Word】cpp

    题目: Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return t ...

  7. Linux sort --copy

    Source: http://www.cnblogs.com/51linux/archive/2012/05/23/2515299.html sort是在Linux里非常常用的一个命令,管排序的,集中 ...

  8. 用U盘作为启动盘，安装Yosemite

    1.选择一个存贮空间大于Yosemite系统(Yosemite系统大概5.1G左右)的U盘,用磁盘工具(Disk Utility)对此磁盘进行分区,可以参照此链接处对U盘进行分区.如果用磁盘工具进行分 ...

  9. JavaScript之arguments对象讲解

    javascript的arguments对象类似于PHP的extract()函数实现. 在不确定函数参数个数的情况下,可以通过arguments访问参数,并以索引0为起始. function sayH ...

  10. nginx 多站点配置方法集合（转）

    关于nginx的多站设置,其实和apache很相似,假设我们已经有两个域名,分别是:www.websuitA.com和www.websuitB.com.并且这两个域名已经映射给了IP为192.168. ...