react redux 相关技术

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

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

首先安装那个贴心的代码环境。前提是自己电脑上已经装过了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组件的视图看整个网页，包含属性和状态信息。

转载于:https://www.cnblogs.com/axl234/p/5757525.html

react redux 相关技术相关推荐

React+Redux技术栈核心要点解析（上篇）
感谢作者郭永峰的授权发布. 作者:郭永峰,前端架构师,现用友网络 FED团队负责人,目前主要负责企业级应用前端技术平台建设工作,在前端工程化实现.Node 应用开发.React技术.移动开发等方向有丰 ...
React+Redux技术栈核心要点解析（中篇）
感谢作者郭永峰的授权发布. 作者:郭永峰,前端架构师,现用友网络 FED团队负责人,目前主要负责企业级应用前端技术平台建设工作,在前端工程化实现.Node 应用开发.React技术.移动开发等方向有丰 ...
React+Redux技术栈核心要点解析（下篇）
感谢作者郭永峰的授权发布. 作者:郭永峰,前端架构师,现用友网络 FED团队负责人,目前主要负责企业级应用前端技术平台建设工作,在前端工程化实现.Node 应用开发.React技术.移动开发等方向有丰 ...
React+Redux打造“NEWS EARLY”单页应用一步步让你理解最前沿技术栈的真谛
之前写过一篇文章,分享了我利用闲暇时间,使用React+Redux技术栈重构的百度某产品个人中心页面.您可以参考这里,或者参考Github代码仓库地址. 这个工程实例中,我采用了厂内的工程构建工具-F ...
使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用
先看效果图 github地址 github仓库在线访问初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话,先安装 npm ...
React全家桶(技术栈) redux 代码
React全家桶(技术栈) redux 代码压缩包下载 https://download.csdn.net/download/qq_42740465/87629665 README.md ## 1. ...
React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录(一)搭建工程脚手架 React+Redux开发实录(二)React技术栈一览搭建工程脚手架准备工作安装node 安装git 安装一款前端IDE 推荐VSCode, ...
一个 react+redux 工程实例
在前几天的一篇文章中总结部分提到了学习过程中基础的重要性.当然,并不是不支持大家学习新的框架,这篇文章就分享一下react+redux工程实例. 一直在学习研究react.js,前前后后做了几次分享. ...
实例讲解基于 React+Redux 的前端开发流程
前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的an ...

react redux 相关技术

react redux 相关技术相关推荐

最新文章

热门文章