学习一项工具,最快的方式就是边学便用。在学习 GUI 时我会边看API边写一个记事本,学习 web 框架时我会边学边写一个留言板。
学习和工作上一直是在写后端代码,有一点前端基础,但没有用过JS框架,看到最近React特别火,就开始了边学 React 边写留言板。一共花了大概两天左右的时间入门 React 并写出了这个留言板。
另外还收集了一些资料,比较适合刚接触 React 的人或是前端新手。
接下来讲讲自己在用React开发留言板前端过程中遇到的坑和学习到的知识。项目路径:https://github.com/David-Guo/message-board 觉得对你有用的话,给个 star 呗。效果图如下
关于 React 的介绍和 Nodejs 安装,这里就不多介绍了,网上有相当丰富的资料。
构建
package
在写 Js 代码之前我们需要定义好我们需要用什么编译器、相关的依赖包以及 npm 命令行脚本参数信息,这件事情就交给文件package.json
去做。
1 | { |
webpack
scripts
表示命令行参数,这样我们可以直接在命令行键入npm start
,会替换成webpack --progress --colors --watch
,来使用 webpack 构建项目。由于使用到了 webpack ,所以我们需要对 webpack 也进行一些配置,下面是一个典型的配置文件。
1 | module.exports = { |
webpack.config.js
文件则定义了输入输出的 js 文件路径、文件名、以及相关的编译器。
entry
表示入口文件是当前目录的index.js
output
表示输出文件是./build/bundle.js
loader
表示使用jsx-loader
来编译 JSX 语法
组件
写好配置文件,只需在命令行执行npm start
,就可以看到构建信息,并且每次修改文件,都会自动刷新构建。
我们的留言板将分成两个组件,一个表单,一个列表。
表单组件
要注意这里当用户提交表单时,应该把表单的数据传回父组件,父组件提交数据到服务器,然后刷新评论列表组件,而不是直接在表单组件中提交数据到服务器。通过将父组件的提交表单函数传递给子组件作为props
,子组件调用父组件的函数来实现这件事。在父组件的render
函数中加上 <MessageForm submit={this.submit} />
。表单组件的代码如下:
1 | var MessageForm = React.createClass({ |
onSubmit
函数的作用就是监听表单的提交事件和清空表单,在事件回调中调用preventDefault()
来避免浏览器默认地提交表单。父组件的 submit
现在已经成为了子组件的一个属性,表单组件监听到表单提交事件后立即调用。submit
函数主要作用是做 AJAX 向服务器提交数据,然后刷新评论列表。
1 | var Container = React.createClass({ |
列表组件
列表组件比较简单,主要是渲染父组件传递过来的数据。由于传递给列表的数据是动态变化的,所以我们需要将 data
申明 state
,传递代码是 <MessageList data={this.state.data} />
,然后在 MessageList
中可以通过 props.data
获取。
1 | var MessageList = React.createClass({ |
更新状态
当组件第一次创建的时候,我们想从服务器获取(使用GET方法)一些JSON数据,更新状态,反映出最新的数据。
1 | var Container = React.createClass({ |
在这里,componentDidMount
是一个在组件被渲染的时候React自动调用的方法。动态更新的关键点是调用 this.setState()
。我们把旧的评论数组替换成从服务器拿到的新的数组,然后UI自动更新。正是有了这种响应式,一个小的改变都会触发实时的更新。
总结
至此一个简单的留言板的大致逻辑功能就实习,我们用到了 React 的组件构建方式,通过 props ,state 在父子组件之间传递函数、数据,虚拟DOM节点的概念以及如何获取真实的DOM节点。由此可以大致感受如何使用 React 写前端已经 React 的思想。