Day5＆Day6 React＋Node评论系统实现-单页面应用

小姐姐这两天把各种环境，软件装好了，什么Apache端口反向代理，iterm2等，顺便学完了React.js入门文档。内部的资料还是很不错的。入门文档中需要做一个新闻评论系统。tnpm安装和运行的速度令人发指的快。敲方便。开始有点喜欢这里了呢。慢慢变得聒噪起来~~

遇到一些问题

搭建过程

【学习文档参考】https://www.jianshu.com/p/794d573d2c53

往两个文件打包，一个是webpack.config.js，这是目标build,另外一个是webpack.production.config.js，目标dist.通过这个配置，对main.js进行打包，webpack-dev-server是一个小型的node.js Express服务器,为webpack打包生成的资源文件提供Web服务。大概端口在这个地方配置么？？默认情况下，它将在当前文件夹下启动一个websocket服务，端口号为8080

*****果然跑的端口在这里配置。webpack.config.js加入

注意，在package.json里面需要加入这段话。才能生效。

配置好之后，在main.js里面随便写点东西，然后运行

然后，额。。报错了

需要安装 webpack-cli，webpack4把这个拆开了。参考文档【https://webpack.toobug.net/zh-cn/chapter3/cli-api.html】

【https://segmentfault.com/q/1010000013395159/a-1020000013396648】

Command Line Interface，顾名思义，也就是命令行用户界面。—mode production回退老版本也可以。

然后页面应该跑起来了，但是没有任何东西，由于在webpack.config.js设置了将app文件夹的main.js打包到bundle.js中，所以，现在需要在main.js中写入一些内容。大致的内容，我写的是react里面的路由。这样能够通过对应的路由访问到相应的component文件夹里面的组件。

学了个快捷键 cmd + 左右，光标跳到行首和行尾很实用。【https://my.oschina.net/u/1433048/blog/489580】

main.js里面的内容

这里id=app的dom在index.html里面。

emmmmm, 遇到了各种问题，心烦意乱，然鹅一想到梅西出线了，学习遇到困难就不能放弃，毕竟除了国足大家都在看世界杯，梅西大大压力还是很大的。猪队友带都带不动，只能靠自己。【日常吐槽】

学习了react-router的使用方法。【http://www.ruanyifeng.com/blog/2016/05/react_router.html】阮大神的文档写的很好。勤耕不辍。

webpack3到4的坑真是不少，配置文件中的loader需要改成rules。

package.json，scripts指定了运行脚本命令的npm命令行缩写and 各种依赖包，在tnpm init的时候会加载依赖，比如start指定了运行npm run start时，所要执行的命令.

把之前写的demo都跑起来了，emmmmmmm.敲开心，哈哈哈哈哈~~~~

包括显示Hello world，状态按钮变化等。props,refs使用

Node做接口供前台访问

打开IDE的时候，发现左下角的version control不见了。然后问了赋苏小哥哥，顶部的VCS需要enable版本控制。大神就是，在解决你问题的时候，同时会告诉你为啥这样做。灰常666。 想提交一个版本，但是git status的时候发现很多xml文件和node modules文件也在里面，所以使用了以下的指令进行忽略。

也就是即将需要使用的MVC框架。我才知道这个叫MVC框架。

网上的文章真是一言难尽，难得碰到写的好的。

大概也就是想做个简单功能

【https://itbilu.com/javascript/react/E1n52IsAg.html】这篇文章介绍了ssr渲染的具体做法

但是我现在想采用的是web端渲染。所以没采用。

参考的文章是这一篇【https://www.cnblogs.com/nzbin/p/5860219.html】确认过眼神，就是这篇了。认真的研究了一下下。

将服务器的数据渲染到web页面上

在一个真实的应用中，我们可能会使用 API 来获取应用所需的数据。我们先把数据保存在一个js文件中。

然后写CmmentsApplication组件

在目录app下的建立src/views/index.ejs

接着开始写服务端代码了，hahhahahahah

小姐姐放在了service/mainTest.js目录下

首先介绍一下ReactDOMServer.renderToString()。这个方法能在服务端口将虚拟DOM生成一个HTML字符串。需要用到。

用户comments提交+渲染在页面上

用户在页面填写的form表单提交到服务器端。下次访问还能显示。

参考文献

【http://www.cnblogs.com/QLeelulu/archive/2011/01/28/nodejs_into_and_n2mvc.html】

【https://segmentfault.com/a/1190000006166385】

【http://www.alloyteam.com/2017/01/react-from-scratch-server-render/】

【http://www.aliued.com/?p=4139】

前端的优秀团队【http://www.alloyteam.com/nav/】

大牛博客【https://blog.gaoqixhb.com/p/55c98c1811ab29df6ec4a065】

【日常美食鉴赏，跟着司勤有肉吃】

德国昨天不知道踢了什么鬼

发现个很可爱的美食

好吃的麻辣香锅

我爱的羽毛球

接下来继续搬砖跳舞打球

~~