React的CSS
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的更多相关文章
- React中css的使用
网页的布局.颜色.形状等UI展示方式主要是由Css进行设置,在ReactJs中也是一样.ReactJs中的Css结构方式与传统的Web网页类似,但依然存在一些差异.ReactJs中Css文件本身的编写 ...
- React Transition css动画案例解析
实现React Transition Css动画效果 首先在项目工程中引入react-transition-group: npm install react-transition-group --sa ...
- create-react-app创建react项目 css模块化处理
用的css预处理器用sass,其他大同小异. 用create-react-app创建项目,执行npm run eject弹出配置文件(此操作不可逆): 配置sass,用的最新的CRA,webpack4 ...
- [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 ...
- CSS Modules 解决 react 项目 css 样式互相影响的问题
1. CSS Modules引入目的 写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去. 另外,每 ...
- styled-components:解决react的css无法作为组件私有样式的问题
react中的css在一个文件中导入,是全局的,对其他组件标签都会有影响. 使用styled-components第三方模块来解决,并且styled-components还可以将标签和样式写到一起,作 ...
- [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 ...
- react react使用css
在react 中使用css有以下几种方法 第一种全局使用 app.js import React from 'react'; import Router from "./router&quo ...
- [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 ...
随机推荐
- Python 抓取网页乱码问题 以及EXCEL乱码
import codecs f1=codecs.open('items.json', 'r', encoding='utf-8').read().decode("unicode_escape ...
- vhdl基础---分频
偶数分频 ibrary IEEE; use IEEE.STD_LOGIC_1164.ALL; use ieee.std_logic_arith; use ieee.std_logic_unsigned ...
- homework-05 大家一起玩游戏~
046 195 1.接口设计 客户端 用户登录后,启动一个线程来进行游戏,等待服务器信息及发送新数据 服务器 开始时,主程序一直等待用户登录,有新用户登录就开一个线程去为其服务 等到用户都登录完成 ...
- [DHCP服务]——一个验证DHCP原理实验(VMware)
大致实验拓扑图 DHCP Server端的配置 1. 安装DHCP # yum -y install dhcp 2. 拷贝配置文件 # /dhcpd.conf.sample /etc/dhcp/dhc ...
- Notes of the scrum meeting(12.5)
meeting time:18:00~18:30p.m.,December 5th,2013 meeting place:3号公寓一层 attendees: 顾育豪 ...
- VS2013 help viewer搜索结果显示源码以及桌面独立运行help viewer
安装好VS2013后,启动help viewer2.1在搜索栏中搜搜时结果会出现HTML源码. 要解决这个问题先来看看MINE,即Multipurpose Internet Mail Extensio ...
- struts2异常记录--java.lang.IllegalStateException
java.lang.IllegalStateException at org.apache.catalina.connector.ResponseFacade.sendError(ResponseFa ...
- .net 常用正则表达式
Net中正则表达式的简单使用方法及常见验证判断 判断字符串是只是数字我们可以这样写:return new System.Text.RegularExpressions.Regex(@"^([ ...
- .NET-提取字符串实践总结
前阶段工作时遇到一个截取字符串的问题,由于字符串比较长,大概得几万字符吧(XML形式),要提取中间两个节点之间的内容,在网上费了好大功夫才找到能用的正则.工作当用的时候碰到这样的事最蛋疼了,网上的资源 ...
- 2、onclickListener冲突
事情是这样的. 我在activity中同时使用普通按钮和对话框按钮,并都设置点击时候的回调函数,由于都要用到onclickListener,但是两者却不是一个文件,无法同时import,这就是本文出现 ...