React 最简单的入门应用项目

React干货 admin 暂无评论

2016年刚刚过去,在这仅仅一年的时间里,前端技术更新迅猛,2016年可以说是VUE与React的元年,作为前端开发人员,自然是要跟进最新的技术,通过看API与做DEMO练习,用了大概三天左右的时间入门React,并写下了这个留言板。

接下来讲讲自己使用React开发留言板过程中问题,踩到的坑与学习到的知识。

构建

package

在写 Js 代码之前我们需要定义好我们需要用什么编译器、相关的依赖包以及 npm 命令行脚本参数信息,这件事情就交给文件package.json去做。

1.png

webpack

scripts 表示命令行参数,这样我们可以直接在命令行键入npm start,会替换成webpack --progress --colors --watch,来使用 webpack 构建项目。由于使用到了 webpack ,所以我们需要对 webpack 也进行一些配置,下面是一个典型的配置文件。

2.png

webpack.config.js 文件则定义了输入输出的 js 文件路径、文件名、以及相关的编译器。

·        entry 表示入口文件是当前目录的 index.js

·        output 表示输出文件是 ./build/bundle.js

·        loader 表示使用 jsx-loader 来编译 JSX 语法

组件

写好配置文件,只需在命令行执行npm start,就可以看到构建信息,并且每次修改文件,都会自动刷新构建。

我们的留言板将分成两个组件,一个表单,一个列表。

表单组件

要注意这里当用户提交表单时,应该把表单的数据传回父组件,父组件提交数据到服务器,然后刷新评论列表组件,而不是直接在表单组件中提交数据到服务器。通过将父组件的提交表单函数传递给子组件作为props,子组件调用父组件的函数来实现这件事。在父组件的render 函数中加上 。表单组件的代码如下:

3.png

onSubmit 函数的作用就是监听表单的提交事件和清空表单,在事件回调中调用preventDefault()来避免浏览器默认地提交表单。父组件的 submit 现在已经成为了子组件的一个属性,表单组件监听到表单提交事件后立即调用。submit 函数主要作用是做 AJAX 向服务器提交数据,然后刷新评论列表。

4.png

列表组件

列表组件比较简单,主要是渲染父组件传递过来的数据。由于传递给列表的数据是动态变化的,所以我们需要将 data 申明 state,传递代码是 ,然后在 MessageList 中可以通过 props.data 获取。

5.png

更新状态

当组件第一次创建的时候,我们想从服务器获取(使用GET方法)一些JSON数据,更新状态,反映出最新的数据。

6.png

在这里,componentDidMount 是一个在组件被渲染的时候React自动调用的方法。动态更新的关键点是调用 this.setState()。我们把旧的评论数组替换成从服务器拿到的新的数组,然后UI自动更新。正是有了这种响应式,一个小的改变都会触发实时的更新。

总结

至此一个简单的留言板的大致完成,我们用到了 React 的组件构建方式,通过 props state 在父子组件之间传递函数、数据,虚拟DOM节点的概念以及如何获取真实的DOM节点。通过这个实例大致可以感受一下React

转载请注明:React教程中文网 - 打造国内领先的react学习网站-react教程,react学习,react培训,react开 » React 最简单的入门应用项目

喜欢 ()or分享