web前端开发框架React.js的网页清晰部署流程

MVVM前端开发框架---React.js网页部署

首先我们看下要准备些什么东西：

1、React.js

2、React-dom.js

3、browser.min.js

准备好这三个插件，它们分别用处是：

1、React的核心库

2、操作DOM的相关功能

3、将JSX语法转为javascript语法

接下来开始部署到HTML当中去，先引入这三个文件：

然后接着写一个script标签，注意，这里的标签要加上type="text/babel"，作用是兼容javascript语法，因为我们接下来写的都是JSX语法。

接着我们写一个DIV标签

然后用ReactDom.render()方法来将模板渲染成HTML语言，并且插入到DOM当中去。看下语法结构：

每次写一个标签记得加上逗号，然后在获取DOM节点，ReactDom.render()方法才能渲染到相应的DOM节点上面。

然后看下完整的代码：

这时候就可以看到已经渲染出来的hello world啦。

那么，往往用React开发都是组件化，接下来，我们来看看一个组件的标准格式都需要哪些东西。

定义一个组件用React.createClass();方法。在这个组件当中常用的生命周期：

componentWillMount 将要挂载

componentDidMount 挂载之后

componentWillUnmount 销毁

接着我们来创建一个input组件来实现数据双向绑定

解释下上面的代码，定义一个组件名为：Inputs。然后给出初始状态：getInitialState方法，接着render()渲染。然后跟这个组件相关的事件都要写在Inputs组件里面。

写好的组件，这里要注意一点，一定要被一个DIV标签包含着，然后写上自定义组件的名称，多个组件以逗号隔开。

整个的定义一个Inputs组件渲染后的效果：

完成的流程格式代码：

之后你要写什么组件都可以先用React.createClass()方法先定义好，然后把组件名称写成标签以逗号隔开放在ReactDom.render()的DIV中。

下次给大家分享如何利用前端构建工具搭建一个React项目。