React学习之JSX

React

什么是JSX？

简单点说，JSX是对javascript的扩展，语法类似于XML，但JSX不是一门新的语言，
确切来说只是语法糖，每一个XML都会被响应的转换工具转换成纯的javascript代码。
在使用React时，你没有必要使用JSX来构建组件，但是推荐使用JSX，因为这样可以让组件的结构
和组件之间的关系看起来更清晰。

好了，开始使用JSX吧！

首先我们分别使用JSX和纯js来渲染一个组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 使用JSX
ReactDOM.render(
    <div>
        <h2>使用了JSX语法糖</h2>
    </div>,
    document.body
)
// 不使用jsx
ReactDOM.render(
    React.createElement('div', null,
        React.createElement('h1', null, '不使用jsx')
    ),
    document.body
)

html标签和React组件

ReactDOM.render()可以渲染html标签，也可以渲染React组件，但是这里有一些命名上的规范

html标签使用首字母小写的方式，但使用首字母大写也能够正常加载

1
2
var renderDiv = <div>这是一个标签</div>
ReactDOM.render(renderDiv, document.body)

React组件使用首字母大写的方式

1
2
3
4
5
6
var RenderComp = React.createClass({
    render: function(){
        return: <div>这是一个组件</div>
    }
});
ReactDOM.render(<RenderComp />, document.body)

经过测试，发现如果使用首字母小写的方式，将不会正常渲染组件，也不会报错, 当然你也可以这样写:

1
2
3
4
5
6
7
var RenderComp = React.createClass({
    render: function(){
        return: <div>这是一个组件</div>
    }
});
var renderComp = <RenderComp />
ReactDOM.render(renderComp, document.body)

js表达式

当我们想要在React中使用js变量或者是表达式时候,使用{}来进行包裹，不能够出现””,否则会被当作字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var SampleComp = React.createClass({
    getInitialState: function(){
        return {
            iscls: false;
        }
    },
    render: function(){
        return (
            // 表达式
            <div className={this.state.iscls ? 'cls' : 'no_cls'}>
            // 变量
            <h2>{this.props.msg}</h2>
            </div>
        )
    }
});
ReactDOM.render(<SampleComp msg='学习搬砖中...' />, document.body)

这里提示一下，在JSX中，标签的class和for属性分别使用className和htmlFor代替了

其它

在给标签添加style属性的时候，应该这样写:

1
style={{display: 'none'}}

也可以把要应用的样式赋值给一个变量，再使用变量

1
2
3
4
5
var style = {
    color: red,
    display: none
};
<div style={style}></div>

HTML转义，为了防止XSS攻击，React默认是使用转义的,所以当你想使用一些富文本这里就必须注意
为了不让其转义，我们可以这样写：

1
2
3
4
5
6
var mesg = '<h2>这里的字体大小是多少?</h2>'
ReactDOM.render(
    <div dangerouslySetInnerHTML={{__html: mesg}}>
    </div>,
    document.body
)

总结

刚开始学习React的时候对JSX是生畏的，以为会很难理解。当慢慢的接触React，踩过一些小坑，
发现使用JSX是那么好掌握, 它仅仅是语法糖而已，并且转换的规则也很简单

分享到 评论

写在正式学习React之前

React

如果你还不知道大名鼎鼎的ReactJS, 先去这里看看吧

在使用过了诸如BootStrap, Foundation这类的前端框架后，在初识React就被其虚拟DOM和组件化的开发深深的吸引。
然后在接下来的几天，我慢慢的对React产生的恐惧，模式转变得太快，让我很不舒服。
然后又经过几天玩坏了，我才返现React简直是一股清流，开始爱上它了！

好了，开始使用React吧！

安装React

请先安装Node和npm

使用React之前，先来安装一下bower吧

1
$ npm install -g bower

安装bower后我们来正式的进入React的学习中来

新建一个目录

1
$ mkdir proj

使用以下命令来安装React

1
$ bower install react

安装完后我们在proj目录下会看见一个bower_components目录,目录里面有一个React目录，ok！

1
$ touch index.html

使用文本编辑器打开index.html, 开始码起！

第一个React helloworld

引入react.js和react-dom.js（在head,或者body中引入都可以，但是必须在我们开写地方的上面）

就像这样
引入图片

接着申明一个script标签

1
<script type="text/babel"></script>

注意这里的type是text/babel

1
2
3
4
5
6
7
8
9
10
var HelloWorldComponent = React.createClass({
	render: function(){
		return (
			<div id="app">
				<h1>开始学习使用工具搬砖啦！</h1>
			</div>
		)
	}
});
ReactDOM.render(<HelloWorldComponent />, document.body)

好了，不出意外的话，我们将会在浏览器中看到
结果图

好啦，我们的第一个react组件算是开发完成了，这里讲一讲我们到底做了什么
首先我们使用了JSX语法，有关JSX的知识会单独的加深了解,但是最基本的规则就是，遇到{}解析成js，遇到‘<’解析成html
然后使用了React提供的createClass来创建一个组件类，类名一定要大写，实现了其中一个必须要实现的render方法，返回一个h1标签
最后使用ReactDOM.render()渲染到body中去
搞定

分享到 评论