react-redux学习笔记-1-react

1.背景

    一个常用的构建项目的技术栈：webpack + react-redux + JSX + ES6。近期基于公司的一个项目了解了一下这个技术栈的大体思路及各个技术的关键思想。在此记录一下自己对react-redux搭建项目的理解。不涉及细节，只介绍一下思路。webpack在之前的一篇博客里有较详细的介绍。

    本文先基于一个简单的demo介绍一下react。

2.react

    react是一个前端框架。它的关键词是“组件”。组件是一个基本的交互单元。举个例子，比如我们要做一个简单的单页应用——计算器。那这个计算器就可以抽象成一个组件。在react中，一个组件包括数据和视图。我们可以通过改变数据来更新视图。数据在react的组件中用“state”表示。每个组件都有一系列的state，在交互过程中，state可能会改变，而state的改变会导致视图的改变。

3.创建组件

    react创建组件的API是React.createClass，一个组件可以定义自己的属性和方法，也需要实现组件默认的方法。如getInitialState和render。getInitialState返回一个对象，这个对象是组件的state的初始值。render表示渲染的方法，在这个方法里，我们根据数据去渲染不同视图。

4.使用组件

    使用组件的API是ReactDOM.render，第一个参数是组件，第二个参数是DOM挂载点。

5.组件之间通信

    父组件向子组件传递消息通过props，子组件向父组件传递消息使用回调，即父组件向子组件传递一个方法，子组件通过调用这个方法来向父组件传递消息。至于组件层级比较深或者不是上下关系，则可以使用事件机制进行通信。

6.webpack配置

    JSX是一种扩展语法，用于在js中写html代码，浏览器不能识别。同样不能被浏览器识别的还有ES6，因此我们使用webpack打包时需要使用相应的loader进行加载，webpack配置如下：

var ExtractTextPlugin = require('extract-text-webpack-plugin');var HtmlPlugin = require('html-webpack-plugin');module.exports = {    entry: __dirname + '/game/main.js',    output: {        path: __dirname + '/public',        filename: 'main.js'    },    module: {        rules: [            {                test: /\.js$/,                use: {                    loader: 'babel-loader',                    options: {                        presets: ['env', 'react', 'es2015']                    }                }            },            {                test: /\.css$/,                use: ExtractTextPlugin.extract({                    fallback: 'style-loader',                    use: 'css-loader'                })            }        ],    },    plugins: [        new ExtractTextPlugin('[name].css'),        new HtmlPlugin()    ]}

需要安装babel-loader，请参考 文章《Webpack傻瓜指南（三）和React配合开发》

其中：

babel-preset-es2015 es6语法包，有了这个，你的代码可以随意的使用es6的新特性啦，const,箭头操作符等信手拈来。
babel-preset-react react语法包，这个包，是专门作为react的优化，让你在代码中可以使用React ES6 classes的写法，同时直接支持JSX语法格式。

7.demo

git地址：https://github.com/KIDFUCKER/react-redux-demo.git

分支：v1-react