React学习之JSX

什么是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之前

如果你还不知道大名鼎鼎的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中去
搞定

分享到 评论