用React+Redux+ES6写一个最傻瓜的Hello World

前端之家收集整理的这篇文章主要介绍了用React+Redux+ES6写一个最傻瓜的Hello World前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近Redux+React似乎在前端圈子里越来越火了,然而即使是官方的文档也只给出了一个TodoMVC的范例,里面上百行的代码以及过多的新概念,对于很多初学者(包括我)来说依然很复杂。

google百度搜了搜,也一直没有找到简单傻瓜如同Hello World的快速入门,所以今天花了一点时间写了个最最简单的DEMO(真的是最最简单了/w\):

点这里看DEMO

Github:https://github.com/starkwang/react-redux-es6-quickstart

一、开发环境搭建

1、webpack

首先我们需要webpack这个打包工具(如果你已经有了就无视吧):

  1. sudo npm install -g webpack

2、依赖包

创建一个文件夹,随便叫什么名字,比如redux-test

  1. mkdir redux-test && cd redux-test

然后用npm安装以下依赖包:

  1. babel-loader

  2. react

  3. react-dom

  4. react-redux

  5. redux

3、Webpack的配置文件

这个项目中需要把ES6、JSX转换为浏览器可运行的ES5语法,所以我们需要使用webpack及其babel-loader来进行转换、打包。这里我们默认index.jsx是入口文件

  1. //webpack.config.js
  2. module.exports = {
  3. entry: 'index.jsx',output: {
  4. filename: 'bundle.js'
  5. },module: {
  6. loaders: [{
  7. test: /\.jsx?$/,exclude: /(node_modules|bower_components)/,loader: 'babel',// 'babel-loader' is also a legal name to reference
  8. query: {
  9. presets: ['es2015','react']
  10. }
  11. }]
  12. }
  13. };

把这个webpack.config.js放到目录下即可。

4、HTML

首先的首先,我们需要一张HTML页面,这个页面里有一个id为rootdiv作为我们应用的根节点:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <title>React-Redux Hello World</title>
  6. </head>
  7.  
  8. <body>
  9. <div></div>
  10. </body>
  11.  
  12. <script type="text/javascript" src="bundle.js"></script>
  13.  
  14. </html>

二、开始写代码

网上React的入门教学实在太多,不再赘述。

关于Redux,请务必读完中文文档的入门部分。

我们现在主要是要实现DEMO中的效果
点这里看DEMO
1、点击文字的时候,文字会在“Hello”和“Stark”中来回切换;
2、点击按钮的时候,文字会变为“You just click button”。


以下代码都是在同一个文件index.jsx中!

0、引入依赖包

我们需要react的本体、react-dom的render方法、redux的createStorebindActionCreators方法,以及react-redux的Providerconnect方法

  1. import React from 'react';
  2. import { render } from 'react-dom';
  3. import { createStore,bindActionCreators } from 'redux';
  4. import { Provider,connect } from 'react-redux';

1、Action

显然我们要定义两种事件:“文字来回切换”、“按钮点击”。

  1. //action
  2. //我们这里并没有使用const来声明常量,实际生产中不推荐像下面这样做
  3. function changeText(){
  4. return {
  5. type:'CHANGE_TEXT'
  6. }
  7. }
  8.  
  9. function buttonClick(){
  10. return {
  11. type:'BUTTON_CLICK'
  12. }
  13. }

2、Reducer

对于不同的action,对应的状态转换也不一样:

  1. //reducer
  2.  
  3. //最初的状态是"Hello"
  4. const initialState = {
  5. text: 'Hello'
  6. }
  7.  
  8. function myApp(state = initialState,action) {
  9. switch (action.type) {
  10. case 'CHANGE_TEXT':
  11. return {
  12. text:state.text=='Hello'?'Stark':'Hello'
  13. }
  14. case 'BUTTON_CLICK':
  15. return {
  16. text: 'You just click button'
  17. }
  18. default:
  19. return {
  20. text:'Hello'
  21. }
  22. }
  23. }

3、Store

Store是由Redux直接生成的:

  1. let store = createStore(myApp);

4、组件

这里一共有三个组件:文字组件Hello、按钮Change、以及它们的父组件App

  1. //Hello
  2. class Hello extends React.Component{
  3. constructor(props) {
  4. super(props);
  5. this.handleClick = this.handleClick.bind(this);
  6. }
  7.  
  8. handleClick(){
  9. this.props.actions.changeText();
  10. }
  11.  
  12. render() {
  13. return (
  14. <h1 {this.props.text} </h1>
  15. );
  16. }
  17. }
  1. //Change
  2. class Change extends React.Component{
  3. constructor(props) {
  4. super(props);
  5. this.handleClick = this.handleClick.bind(this);
  6. }
  7.  
  8. handleClick(){
  9. this.props.actions.buttonClick();
  10. }
  11.  
  12. render() {
  13. return (
  14. <button >change</button>
  15. );
  16. }
  17. }
  1. //App
  2. class App extends React.Component{
  3. constructor(props) {
  4. super(props);
  5. }
  6.  
  7. render() {
  8. //actions和text这两个props在第5步中会解释
  9. const { actions,text} = this.props;
  10. return (
  11. <div>
  12. <Hello acti text={text}/>
  13. <Change acti/>
  14. </div>
  15. );
  16. }
  17. }

5、连接React组件和Redux

  1. //mapStateToProps的作用是声明,当state树变化的时候,哪些属性是我们关心的?
  2. //由于我们这个应用太小,只有一个属性,所以只有text这个字段。
  3. function mapStateToProps(state) {
  4. return { text: state.text }
  5. }
  6.  
  7. //mapDispatchToProps的作用是把store中的dispatch方法注入给组件
  8. function mapDispatchToProps(dispatch){
  9. return{
  10. actions : bindActionCreators({changeText:changeText,buttonClick:buttonClick},dispatch)
  11. }
  12. }
  13.  
  14. //这里实际上给了App两个props:text和actions,即第4步中的那段注释
  15. App = connect(mapStateToProps,mapDispatchToProps)(App)

6、渲染我们的App

  1. //Provider是react-redux直接提供的
  2. //store是我们在第3步中生成
  3.  
  4. render(
  5. <Provider store={store}>
  6. <App />
  7. </Provider>,document.getElementById('root')
  8. )

7、编译、打包

还记得安装的webpack和写好的配置文件吗?

直接在项目目录下执行:

  1. webpack

然后就可以把index.jsx编译打包成bundle.js

三、index.jsx源代码

下面是index.jsx的完整源码,可以直接复制

  1. import React from 'react';
  2. import {render} from 'react-dom';
  3. import { createStore,connect} from 'react-redux';
  4.  
  5. //action
  6. function changeText(){
  7. return {
  8. type:'CHANGE_TEXT'
  9. }
  10. }
  11.  
  12. function buttonClick(){
  13. return {
  14. type:'BUTTON_CLICK'
  15. }
  16. }
  17.  
  18. //reducer
  19. const initialState = {
  20. text: 'Hello'
  21. }
  22. function myApp(state = initialState,action) {
  23. switch (action.type) {
  24. case 'CHANGE_TEXT':
  25. return {
  26. text:state.text=='Hello'?'Stark':'Hello'
  27. }
  28. case 'BUTTON_CLICK':
  29. return {
  30. text: 'You just click button'
  31. }
  32. default:
  33. return {
  34. text:'Hello'
  35. };
  36. }
  37. }
  38.  
  39. //store
  40. let store = createStore(myApp);
  41.  
  42.  
  43. class Hello extends React.Component{
  44. constructor(props) {
  45. super(props);
  46. this.handleClick = this.handleClick.bind(this);
  47. }
  48.  
  49. handleClick(){
  50. this.props.actions.changeText();
  51. }
  52.  
  53. render() {
  54. return (
  55. <h1 {this.props.text} </h1>
  56. );
  57. }
  58. }
  59.  
  60. class Change extends React.Component{
  61. constructor(props) {
  62. super(props);
  63. this.handleClick = this.handleClick.bind(this);
  64. }
  65.  
  66. handleClick(){
  67. this.props.actions.buttonClick();
  68. }
  69.  
  70. render() {
  71. return (
  72. <button >change</button>
  73. );
  74. }
  75. }
  76.  
  77. class App extends React.Component{
  78.  
  79. constructor(props) {
  80. super(props);
  81. }
  82.  
  83. render() {
  84. const { actions,text} = this.props;
  85. return (
  86. <div>
  87. <Hello acti text={text}/>
  88. <Change acti/>
  89. </div>
  90. );
  91. }
  92. }
  93.  
  94. function mapStateToProps(state) {
  95. return { text: state.text }
  96. }
  97.  
  98. function mapDispatchToProps(dispatch){
  99. return{
  100. actions : bindActionCreators({changeText:changeText,dispatch)
  101. }
  102. }
  103.  
  104. App = connect(mapStateToProps,mapDispatchToProps)(App)
  105.  
  106. render(
  107. <Provider store={store}>
  108. <App />
  109. </Provider>,宋体"> 四、总结

  110. 如果你还能坚持活着看到这里,你一定在吐槽,“卧槽这种简单到连jQuery都懒得用的小玩具竟然也要写100+行代码?”

  111. 没错,Redux作为Flux架构的一个变种,本来就是“适合大型应用”的,它解决的是当应用复杂度上升时,数据流混乱的问题,而并非直接提升你的代码效率。

  112. 有时候用Angular、jQuery甚至原生js就几行代码的事,在Redux下却会分为action、reducer、store三步来进行。虽然效率低下,但是当项目越来越大时,可以很好地管理项目的复杂度。

猜你在找的React相关文章