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 ...
随机推荐
- Page_Prerender介绍
它是asp.net页面的OnPreRender事件的处理程序.此事件是定义在Control类中的,因为Page类(aspx页面的基类)继承的是System.Web.UI.WebControl类,而We ...
- VisualStudio中的代码段
VS很强大,在这里就不过多说了,在平时码代码时应用代码段会提高我们的编写速度. 举个例子: 比如输入Console.WriteLine (); 传统方法就是一个字母一个字母的输入进去. 如果大家掌握了 ...
- web - float ， 浮动
浮动 : 使元素脱离文档流,按照指定的方向发生移动,遇到父级边界或者相邻的浮动元素则停下来: 元素被设置浮动属性后,呈现的特征有: 1.多个块可以在一行显示 2.内联元素支持狂傲 3.默认宽度由内容撑 ...
- 展开BOM并使用最终用量的算法(转载)
本文系转载子ITPUB,如果有侵犯您权益的地方,烦请及时的告知与我,我即刻将停止侵权行为: 网址:http://www.itpub.net/thread-1020586-1-1.html http:/ ...
- JS图标插件
1.web开发中,有时候需要图标等控件,amcharts可以胜任. amcharts官方网址:http://www.amcharts.com/javascript-charts/
- BZOJ 4199: [Noi2015]品酒大会( 后缀数组 + 并查集 )
求出后缀数组后, 对height排序, 从大到小来处理(r相似必定是0~r-1相似), 并查集维护. 复杂度O(NlogN + Nalpha(N)) ------------------------- ...
- C++之继承和动态内存分配
C++之继承和动态内存分配 如果基类使用动态内存分配,并重新定义赋值和复制构造函数,这将如何影响派生类的实现呢?这取决于派生类的属性,如果派生类也使用动态内存分配,这将如何实现呢?这种 ...
- Spring总结——控制反转，注入（配置和注解两种方式）
一.Spring的容器: 1.什么是控制反转:传统的方法,当某个java对象A需要调用对象B时,是由调用者(对象A)通过new关键字来创建对象B的(也可以说类A依赖类B),而在Spring中,则是由s ...
- VS中，NUnit适合测试者尽心开发自动化测试，而Unit适合开发者开发单元测试。
1.整合Visual Studio和NUnit 在Visual Studio 2010中,通过安装NUnit插件,可以不使用外部客户端,直接运行测试. 当然,貌似在最新版本的VS2012中,安装过NU ...
- Linux菜鸟之路[4]-cal,date,bc,echo $LANG,man
由于前四天一直在看鸟哥的linux书本的计算机的一些基础知识,今天才接触基本的命令,从今天起每天记录一下自己的linux学习过程. cal:日历 cal: cal 2015:列出2015年所有日历 c ...