React使用笔记1-React的JSX和Style
React使用笔记1-React的JSX和Style
Date: 2015-11-27 20:56
Category: Web
Tags: JavaScript
Author: 刘理想
1. 文件基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!--react.js-->
<script src="js/react.js"></script>
<!--解析JSX-->
<script src="js/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<!--JSX的声明需要是type="text/jsx"-->
<script type="text/jsx">
var Hello = React.createClass({
render: function(){
return <div>Hello, {this.props.name}</div>;
}
});
React.render(<Hello name="world"/>,
document.getElementById('container'));
</script>
</body>
</html>
注意：JSX的type是text/jsx.
2. 添加样式
2.1 使用外部CSS样式
注意，在JSX中不能直接给components添加class，因为class在ES6中是关键字，并且在ES6之前也是保留字，使用className来代替。
<script type="text/jsx">
var Hello = React.createClass({
render: function(){
return <div className="alert-text">Hello, {this.props.name}</div>;
}
});
React.render(<Hello name="world"/>,
document.getElementById('container'));
</script>
2.2 使用内联CSS样式
JSX中内联样式需要使用字典来表示，并且使用驼峰命名法代替原有的font-size等格式的样式，比如fontSize来代替font-size等。
注意，如果样式出现错误，可以通过控制台来查看错误。
<script type="text/jsx">
var Hello = React.createClass({
render: function(){
return <div style={{color:'red'}}>Hello, {this.props.name}</div>;
}
});
React.render(<Hello name="world"/>,
document.getElementById('container'));
</script>
style={{color:'red'}}中有两个括号，可能会让人看着发晕，其实它与下面是等价的
var styleObj = {color: 'red'};
style={styleObj}
作者：liulixiang1988#gmail.com (#换成@)
参考链接：http://www.imooc.com/learn/504
React使用笔记1-React的JSX和Style的更多相关文章
- React学习笔记-2-什么是jsx?如何使用jsx？
什么是jsx? JSX是JavaScript XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度.所以jsx就是在javascri ...
- React使用笔记(3)-React Event Listener
Date: 2015-11-28 12:18 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1. 构造基本结构 首先,我们先创建一个按钮,一个输入框 ...
- 【React学习笔记】React生命周期梳理（16.X前后两种）
React生命周期 「16版本以前的:」 生命周期流程图 组件从生成到被挂在到页面上的一系列过程 根据流程图打印的执行顺序图: 流程讲解: 初始化流程 start 开始创建组件 在这个周期中做的事情 ...
- React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- React学习笔记 - Hello World
React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...
- 前端笔记之React（一）初识React&组件&JSX语法
一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...
随机推荐
- [置顶] Guava学习之Splitter
Splitter:在Guava官方的解释为:Extracts non-overlapping substrings from an input string, typically by recogni ...
- log file sync等待超高一例
这是3月份某客户的情况,原因是server硬件故障后进行更换之后,业务翻译偶尔出现提交缓慢的情况.我们先来看下awr的情况. 我们能够看到,该系统的load profile信息事实上并不高,每秒才21 ...
- Java中的变量与变量的作用域
关于Java中的变量及变量的作用域 关于Java中的变量及变量的作用域 0. 变量的概念 在程序运行期间,系统可以为程序分配一块内存单元,用来存储各种类型的数据.系统分配的内存单元要使用一个标记符来标 ...
- R包——ggplot2（二）
关于ggplot包(二) 关于ggplot包(二) 标尺(Scale) 从前面可以看到,画图其实就是在做映射,不管是映射到不同的几何对象上,还是映射各种图形属性.在对图形属性进行映射之后,使用标尺可以 ...
- JavaScript 网页链接调用Android程序
如何让网页链接实现启动Android的应用,网上有说重写WebView相关的shouldOverrideUrlLoading方法,但是这种理论上能实现,因为你的网页不是仅仅被你自己的webview来浏 ...
- ndk 编译 boost 库，支持serialization
Boost库是一个可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的开发引擎之一. Boost库由C++标准委员会库工作组成员发起,其中有些内容有望成为下一代C++标准库内容.在C+ ...
- PHP合并数组+与array_merge的区别分析
主要区别是两个或者多个数组中如果出现相同键名,键名分为字符串或者数字,需要注意 1)键名为数字时,array_merge()不会覆盖掉原来的值,但+合并数组则会把最先出现的值作为最终结果返回,而把后面 ...
- 在JSTL EL中处理java.util.Map，及嵌套List的情况
关联的键查找存储在映射中的值. 在方括号中指定键,并将相应的值作为表达式的值返回.例如,表达式 ${map['key']} 返回与 map标识符所引用的 Map 中的 "key" ...
- RedHat/CentOS发行版本号及内核版本号对照表
RedHat/CentOS发行版本号及内核版本号对照表 : Redhat 9.0———————————————2.4.20-8RHEL 3 Update 8————————————2.4.21-47R ...
- php 接口示例
php 接口示例: public function dev(){ $m=new Model('machine_info'); $ip=$_GET['ip']; echo $ip; //$arr=$m- ...