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. 新辰：4G时代怎样利用手机进行移动APP营销？

    未来的时代是4G时代,新辰手机用户的搜索量不在电脑端之下.那么,我们要怎样用手机进行营销呢?手机站点的竞价文章,要怎样去写比較好?手机站点要做专题吗?手机站点的优化思路在哪里?手机的系统不同,在不同的 ...

  2. SQL数据库插入文本信息

    文本内容

  3. SQLSERVER常用脚本整理

    数据库存储空间查询(数据库的大小及数据库中各个表的数据量和每行记录大小) IF NOT EXISTS (SELECT * FROM dbo.sysobjects WHERE id = Object_i ...

  4. 227. Basic Calculator

    1. 问题描述 Implement a basic calculator to evaluate a simple expression string. The expression string c ...

  5. 桦仔 笔记7-徐 SQLSERVER日志记录机制

    1 --SQLSERVER日志记录机制 2 --日志记录事务发生的时间,但是不保证记录下发起这个事务的用户名,更不记录发起者的程序名称!!! 3 USE AdventureWorks 4 CREATE ...

  6. 在Windows7防火墙允许指定的端口

    在xp系统的时代,修改防火墙很方便,很简单.windows7或许是做得过于复杂了.当然所谓安全性也是相当于其他之前版本的系统更高了.为什么要打开端口,肯定是在windows7下启动了网络服务,需要开启 ...

  7. .Net平台-MVP模式再探(二)

    PS:     本文与  上一遍文章  没有什么必然的联系,可以说是对于MVP的一定的加深,或许在理解上比上一篇多有点难度. 正文   一.简单讲讲MVP是什么玩意儿 如果从层次关系来讲,MVP属于P ...

  8. Android Studio 工程.GitIgnore应该忽略的文件

    # Built application files *.apk *.ap_ # Files for the Dalvik VM *.dex # Java class files *.class # G ...

  9. 公选网站作业4_2.php

    序:   此实验的功能是只有已经登陆或者已经注册的用户才有发表留言的资格,否则只能够浏览留言. 1.  主要文件: 4_2login.html// 登陆的主页面 4_2login.php  //处理登 ...

  10. C# 控件包

    http://www.cnblogs.com/Keep-Silence-/archive/2013/01/22/2871694.html