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. IOS开发:xcode5版本引发的问题

    下面这段代码是用于处理ios7头部透明问题的 #if __IPHONE_OS_VERSION_MAX_ALLOWED >= 70000 if ( IOS7_OR_LATER ) { self.e ...

  2. MyBatis使用Generator自动生成代码

    MyBatis中,可以使用Generator自动生成代码,包括DAO层. MODEL层 .MAPPING SQL映射文件. 第一步: 配置好自动生成代码所需的XML配置文件,例如(generator. ...

  3. 发现一个名为“Douyu”的国人项目

    刚刚在javaeye看到一个名为Douyu的国人项目,认为搞下去未来可能非常有意思,放到blog上做个标记. ——————下面是转载的作者原文——————— 原文地址例如以下:http://zhh20 ...

  4. [转] C#.Net Socket网络通讯编程总结

    1.理解socket1).Socket接口是TCP/IP网络的应用程序接口(API).Socket接口定义了许多函数和例程,程序员可以用它们来开发TCP/IP网络应用程序.Socket可以看成是网络通 ...

  5. getMetaData()

    ResultSet resultset = null; ResultSetMetaData resultsetmetadata = null; resultsetmetadata = resultse ...

  6. Hibernate中为什么要重写equals方法和hashcode方法

    1.*为什么要重写equals方法,首先我们来看一下equals源码: public boolean equals(Object anObject) { if (this == anObject) { ...

  7. [Puzzle] 蚂蚁路线碰撞问题

    有这么一道题目, 看下面的图, 假设有一条直线, 每个叉叉上有一只蚂蚁, 它们会随机选择一个方向, 向前或者向后移动, 每次走一格, 前进中当两只蚂蚁相遇, 它们会掉头, 问: 全部蚂蚁都走出去的最长 ...

  8. codeforces 633G. Yash And Trees dfs序+线段树+bitset

    题目链接 G. Yash And Trees time limit per test 4 seconds memory limit per test 512 megabytes input stand ...

  9. PADS Layout怎样放置间距一样的同一种元件

    少数元件的话,栅格设置是最好的,即将栅格设置成你要放置元件的间距,然后逐个移动元件放置.如果元件几十上百个,这样做就累死人了,此时就得设置阵列.按顺序选择你要放置的元件-右键-create arry, ...

  10. crtmpserver初探

    前言       Adobe的FMS(Flash Media Server)是很好用.但对应着分级授权的是money和有限功能开放.商业的东西既然用不起,也阻碍了我们的技术进步,那就只能求助于开源社区 ...