React实战——基于百度IFE学院task50

背景

2016年的百度IFE学院进行到现在已经快要收尾了，最后一个阶段也就是第四阶段的任务早已放出来了，第四阶段其中的一个任务task50是问卷调查的网页。

在查阅了一些大牛的意见后对目前前端的方向有以下推荐：

• JS：react+redux+react-router
• css: css-modules+sass/less/postcess
• 构建工具: webpack+Babel+npm
• 其次，目前较多的团队都开始去jQuery化了，值得注意。
• 建议react——>router——>es6——>redux

这个问卷调查网页一度想用jQuery mobile去完成，因为无论是界面、功能还是使用终端上来说，这个问卷调查的页面都挺适合用web app的框架来写。

但是jQuery mobile已经写过了一个TODO来练手了，所以这次打算用React撸一下，顺便入个React的门。

于是乎开了这篇博客来记录我完成整个项目过程中的难题和经验。

引入JS文件

如果纯使用React的话必需要引入这三个文件

react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
————阮一峰老师的React入门

如果是通过一些自动化框架(如webpack)来做的话只要提前引入就好了。

toggle功能

项目中碰到需要一键选择所有select选项框并改变其样式。在这个时候可以先通过getInitialState设置初始的state，这样可以随时通过this.state.XXX来调取预设的条件。

然后通过handleClick或者handleChange来动态更改state的值，注意：要用this.setState方法去改，直接给this.state.XXX赋值的方法行不通。

JSX语法与HTML

一定要牢记JSX语法中都不再是是HTML，并且class等是关键词，所以当需要在JSX语法里面设置class或者事件函数的时候，要使用驼峰法命名。比如：onClick，添加class则要用className

Router 路由

教程

这个系列教程做完就能很明白了——react-router-tutorial

经验

慢慢摸索中，尤其是里面关于激活后的样式，默认的主页都有方法，可以参考一下这篇文章——React-Router学习整理

调用JSX里的参数

首先，JSX里的参数要用花括号{}括起来。

当要调用的参数是JSX里的时可以用this，当参数在render里面，return的前面时，直接把参数放入花括号中即可。

webpack 打包

教程

• 这本书走下来，webpack基本上就跑起来了——webpack入门指南
• 对配置文件里面的参数有详细的注释——一小时包教会 webpack 入门指南
• 有介绍普通JS和通过Babel来写代码对比——轻松入门React和Webpack
• 一个详细的webpack指南，目前还在更新中——webpack

经验

引用路径

在npm里面使用webpack打包的时候，在zJS里面引用文件的方法与HTML里面不同，HTML里面同目录引用是类似：src="hello.js"

但是JS里面引用的话要遵循NodeJS里面的方法，比如我的目录是：

|+src
|++app.js
|+entry.js

这样的话想在entry.js里面require到app.js，按照HTML里的方法应该是
require('src/app.js')
但是这么的话调用webpack的时候就会报错，正确的这么引用：
require('./src/app.js')

找了很久在这篇文章中找到答案。——NodeJs：“require” 函数详解，懂这个你就懂NodeJs了

Babel 转义

最新版6以上的Babel貌似不支持转义了，所以在webpack里面的loader要添加预设es2015，以下是我的设置。

{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }

下面是babel 6 的提示：
From the babel 6 Release notes:

Since Babel is focusing on being a platform for JavaScript tooling and not an ES2015 transpiler, we’ve decided to make all of the plugins opt-in. This means when you install Babel it will no longer transpile your ES2015 code by default.

参考链接：

• 关于webpack编译时的错误， Unexpected token <
• “unexpected token import” in Nodejs5 and babel?

Redux

教程

关于Redux的学习，这个仓库介绍的很详细react-redux-tutorial

由于redux里面使用的es5以及以上的语法，所以建议学习前先了解下es6，我就是在es语法的地方都看不懂然后傻了很久没有进展。必需要掌握的可以看我的es5学习笔记——ECMAScript 6 notebook

经验

需要实现动态增减内容，简单的页面其实可以用自带state加props就能解决了，官方提供了一个表单制作的示例，下面的链接感觉比官方要容易懂点供参考：react简易表单。

更新state的方法参照下方

就是因为以前看到state是数组，就自然而然的想到用push方法去更新，这是错误的。

var state = [{text:'test1',completed: false}];//更新statestate = [...state,{text:'test2',completed: false}];//而不是state.push({text:'test2',completed: false});

注意：

唯一能更新state的方法就是触发action，使用store的dispatch更新state