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的更多相关文章

  1. React学习笔记-2-什么是jsx?如何使用jsx？

    什么是jsx?    JSX是JavaScript  XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度.所以jsx就是在javascri ...

  2. React使用笔记(3)-React Event Listener

    Date: 2015-11-28 12:18 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1. 构造基本结构 首先,我们先创建一个按钮,一个输入框 ...

  3. 【React学习笔记】React生命周期梳理（16.X前后两种）

    React生命周期 「16版本以前的:」 生命周期流程图 组件从生成到被挂在到页面上的一系列过程 根据流程图打印的执行顺序图: 流程讲解: 初始化流程 start 开始创建组件 在这个周期中做的事情 ...

  4. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

  5. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  6. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  7. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  8. React学习笔记 - Hello World

    React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...

  9. 前端笔记之React（一）初识React&组件&JSX语法

    一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...

随机推荐

  1. 布线问题(prime)

    布线问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 南阳理工学院要进行用电线路改造,现在校长要求设计师设计出一种布线方式,该布线方式需要满足以下条件:1.把所有 ...

  2. Ubuntu 14.04安装地里编码软件Nominatim过程

    一.必须软件: 在Ubuntu系统编译执行Nominatim软件系统必须安装的软件有: 1.GCC 编译器 2.postgresql 数据库 3.proj4 4.geos 5.postgis 6.PH ...

  3. js快排与namespace

    function quickSort(arr){ if(arr.length<=1){ return arr; } var num = Math.floor(arr.length/2); var ...

  4. [编程题] 最大的LeftMax与rightMax之差绝对值

    [编程题] 最大的LeftMax与rightMax之差绝对值 给定一个长度为N的整型数组arr,可以划分成左右两个部分: 左部分arr[0..K],右部分arr[K+1..arr.length-1], ...

  5. ASP.Net中使用Report Service

    昨天研究以下Report Service,发现SQL Service自带的报表服务器也非常强大, 一,报表在不同的应用中表现形式 参考:http://www.cnitblog.com/yide/arc ...

  6. Oracle分析函数之开窗子句-即WINDOWING子句

    Oracle的分析函数,对我们进行统计有很大的帮助,可以避免一些子查询等操作,在统计中,我们对开窗函数的接触较少,下面主要介绍下开窗函数的使用; http://www.itpub.net/thread ...

  7. iOS开发通过代码方式使用AutoLayout (NSLayoutConstraint + Masonry)

    iOS开发通过代码方式使用AutoLayout (NSLayoutConstraint + Masonry) 随着iPhone6/6+设备的上市,如何让手头上的APP适配多种机型多种屏幕尺寸变得尤为迫 ...

  8. jquery选择器结果是数组时需要主要的一个问题

    代码很简单,如下 <div id="div1"> <span>111</span> <span>222</span> & ...

  9. java_httpservice

    http://blog.csdn.net/maosijunzi/article/details/41045181

  10. C语言２

    函数是C语言的基本单位,类是java,c#,c++的基本单位 int abs(int x); double fabs(double x);   按变量的存储方式:静态变量.自动变量.寄存器变量 指针就 ...