写在正式学习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中去
搞定

分享到 评论