react+redux+webpack教程1

经历了EXT、YUI时代,又经历了Angular时代,我们正在步入React时代。 前端开发框架凭借JS极其灵活强大的特性模样越来越“怪异”,正是这怪异让我们对前端开发把玩不尽。

好吧,说把玩这些技术有些过于装13了。当牛逼哄哄的React如雷贯耳之时,我们最关心的还是它能不能用在我们的项目里, 怎么快速把他用起来,别等我们能把它用起来的时候又进入下一个框架时代了。 所以这里我要跟大家细细分享一下怎么把React用起来。

要做一个项目,不单单是用React一个框架的事儿。React只是一个用户界面框架,如果拿MVC概念来说的话也只是V。 当然前端开发中视图是最重要的,但是如果不控制好数据和逻辑到后面会越来越痛苦。于是要考虑如何管理数据。 脸书官方推荐的是Flux,但听说连Flux都有些过时了,干脆用个最新最火的Redux。其实两者思路是一样的,据说后者更易用。 单页应用总得处理路由,可选余地很多,为了风格统一还是选用配套的react-router,为了管理方便,再用个redux-router。 打包工具总得有,要不开发太受限,还是选最新最火的webpack,这样就可以用各种风格的模块系统,连样式和图片都能搁到模块系统里。 语言上嘛,我原本推崇coffee,而且也有现成的coffee-jsx编译器,但是看react社区都对ES6青睐有加, 了解了ES6的特性后,觉得一部分跟coffee挺像,还有一些确实超越了coffee,那就忍痛舍弃缩进语法、一切皆表达式这些特性,用ES6吧!

这么多一堆新玩意儿,肯定还没开始做已经就头疼上了:从哪儿入手啊!

想想如果是别人已经搭好的环境,我们一上来就只管往里添加代码,那肯定上手容易很多,于是就有这样的开源项目,把最让人头疼的环境都给你准备好了。 我选用了generator-react-webpack-redux, 看名字就知道我要用的几个东西它大部分都包含了,除了webpack、react、redux,它还包含了ES6编译器babel, 还支持less、sass、stylus等常见样式语言编译器,还配置好了热加载,让你代码一保存就能在浏览器上看到效果。

齐活儿,这就开始吧!

我这里不会细讲React的基础。其实React的基础很简单,极易上手。React全都是围绕着组件的, 所以React基础也就是:写组件的jsx、组件的生命周期以及组件的属性和状态。jsx,只要是用过html模板的分分钟就能写了; 所谓生命周期就是组件在创建、销毁、更新阶段的那几个回调函数,让你有机会再这几个关键点上对组件和环境做点手脚; 属性就像html标签里的属性一样决定了这个组件是什么样的;而状态,像是属性很像也和属性很不同,它是可变的, 是控制组件的唯一入口,这个以后可得细说。那个redux,其实就是在鼓捣状态。

首先安装那个贴心的代码环境。前提是自己电脑上已经装过了node。来打开终端(命令行)。

npm install -g yo
npm install -g generator-react-webpack-redux

然后新建个项目目录,并切换到这个目录下,对这个目录进行项目初始化:

mkdir my-project && cd my-project
yo react-webpack-redux

然后根据提示,输入项目名称、选择想用的样式语言,接着等待依赖的内容下载安装完就行了。 咱的项目环境就搭建好了,然后让它跑起来看看效果吧:

npm start

这时浏览器会自动打开,载入咱的项目页面,一个很Q的名叫“yo”小人出现,呦,这就搞定了。

再来看看项目的目录结构。别的没啥好说的,看名字就知道是啥了,主要看src目录里的东西。

咱们最常打交道的目录是actions、components、containers和reducers。 先简单说一下,components和containers里面放的都是React组件,不同的是component是纯纯的组件, container是会跟外界(也就是状态)互动的组件,它把外界的躁动全都挡住,让里面纯纯的组件安心做自己专业的事情。 actions目录下放咱们的行为文件,行为就是指要发生点啥。 reducers里面的东西功能就是对行为进行响应,根据行为的类别和提供的数据对状态进行变更。

再看看src里面其它几个目录:store负责管理状态,也就是提供派发行为的方法,让reducer去监听,然后改变状态。 实际上在开发中我们基本不需要动这里的代码。styles和images就不用说了。

然后再装个chrome插件吧,ExtensionReact Developer Tools,可以通过React组件的视图看整个网页,包含属性和状态信息。

得,环境都搞好了,下一节我们就开始做实在的东西吧。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2017-11-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏分布式系统和大数据处理

Web标准中的常见问题

大概在2004年的时候,Web标准的概念藉由一本名为《网站重构》的书开始被国内人所了解。随后的几年中,其更少的代码量、更好的搜索引擎友好性、更好的浏览器兼容性使...

1025
来自专栏前沿技墅

漫谈前端性能本质 突破React应用瓶颈

侯策:硕士毕业于法国国立高等电信学校。曾任职于BePATIENT集团,负责互联网+医疗平台的研发。曾任职于法国能源和苏伊士集团,参与欧洲天然气运输和费用系统的研...

1761
来自专栏WeTest质量开放平台团队的专栏

Pluto - iOS 上一个高性能的排版渲染引擎

原文链接:http://wetest.qq.com/lab/view/369.html

5586
来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(三)

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

2966
来自专栏互联网数据官iCDO

利用“Google Tag Manager V2”实现滚动追踪

吕东昊,iCDO翻译志愿者 谷歌标签管家第二版本中的滚动追踪功能可谓是另一个搜集访客行为信息的利器,什么是滚动追踪?如何设置并实现追踪?本文将为你一一解答。 ...

3567
来自专栏iOS技术

iOS图片浏览器(功能强大/性能优越)

支持 cocopods,功能完善,性能不错,代码质量尚可,喜欢的朋友可以给个小星星?。

5107
来自专栏拂晓风起

HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

5335
来自专栏葬爱家族

Android高德之旅(6)

我们看惯了高德地图,似乎已经习惯了它的ui,认为河流就是蓝色的,土地就是灰色的,交通路网就是黄色的。其实这个ui也是可以改的。今天就来使用下自定义地图ui。

1302
来自专栏星流全栈

2016 JavaScript 技术栈展望

1624
来自专栏我有一个梦想

UE4新手编程之创建C++项目

 虚幻4中常用的按键和快捷键 虚幻4中有一些按键和快捷键很常用,牢记它们并运动到实际的项目开发中,将会大大地提高你的工作效率和使得工作更简便快捷。下面将列举它们...

2446

扫码关注云+社区

领取腾讯云代金券