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组件的视图看整个网页,包含属性和状态信息。

react redux 相关技术的更多相关文章

  1. 使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用

    先看效果图 github地址 github仓库 在线访问 初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话,先安装 npm ...

  2. react第十六单元(redux的认识,redux相关api的掌握)

    第十六单元(redux的认识,redux相关api的掌握) #课程目标 掌握组件化框架实现组件之间传参的几种方式,并了解两个没有任何关系组件之间通信的通点 了解为了解决上述通点诞生的flux架构 了解 ...

  3. 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...

  4. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

  5. react redux 二次开发流程

    在一个大项目中如何引入redux及其相关技术栈(react-redux redux-thunk redux-immutable ),已经成为react前端工程师不可或缺的技能,下面通过实现一个简单的t ...

  6. react 后台(一) react + redux + react-route + webpack+ axios + antd + less

    create-react-app 项目名称(项目失败,ant 的样式出不来) 项目技术栈 react + redux + react-route + webpack+ axios + less + a ...

  7. react 前端项目技术选型、开发工具、周边生态

    react 前端项目技术选型.开发工具.周边生态 声明:这不是一篇介绍 React 基础知识的文章,需要熟悉 React 相关知识 主架构:react, react-router, redux, re ...

  8. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  9. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

随机推荐

  1. (3)选择元素——(6)属性选择器(Attribute selectors)

    Attribute selectors are a particularly helpful subset of CSS selectors. They allow us to specify an ...

  2. 文件系统 busybox and initramfs

    1.busybox制作根文件系统 http://wenku.baidu.com/link?url=h2m_xrj6OsLiHVVhMY2e0C7WKikw_H3dZY_b4mUiW1E7AEf_q34 ...

  3. VS2008快捷键_大全

    Ctrl+B,C: 清除全部标签 Ctrl+I: 渐进式搜索 Ctrl+Shift+I: 反向渐进式搜索 Ctrl+F: 查找 Ctrl+Shift+F: 在文件中查找 F3: 查找下一个 Shift ...

  4. UIProgressView-初识IOS

    好几天没更新了,学的时候太紧,没时间复习了都.今天刚好有时间,多更几个. 今天复习的是UIProgressView,我们常见使用在修改某些属性的时候经常用到,比如透明度,今天我们介绍一个简单的使用例子 ...

  5. [CSAPP笔记][第一章计算机系统漫游]

    计算机系统漫游 我们通过追踪hello程序的生命周期来开始对系统的学习—–从它被程序员创建,到系统上运行,输出简单的消息,然后终止.我们沿着这个程序的生命周期,简要介绍一些逐步出现的概念,专业术语和组 ...

  6. plsql连接oracal数据库

    一般只是作为客户端访问Oracle,并不需要安装庞大的Oracle 免安装客户端使用plsql连接oracal数据库 在本机没有安装oracle和oracle客户端的情况下,可以安装oracle提供的 ...

  7. easyui-combobox绑定json数据

    用的C#语言 后台取数据,就不用废话了,先看看序列化json数据 /// <summary> /// 对象转JSON /// </summary> /// <param ...

  8. Android 使用开源xUtils来实现多线程下载(非原创)

    1.程序员自己也是可以实现多线程下载的,只是代码量比较大,而且,其中有许多细节需要考虑到,在GitHub上有人写好的代码,我们可以拿过来使用下,节省了我们开发程序的时间 2.导包:xUtils-2.6 ...

  9. ORA-01152错误解决方法(转)

    具体步骤如下: startup force; alter system set "_allow_resetlogs_corruption"=true scope=spfile; r ...

  10. $.getJson()和$.ajax()同步处理

    一.前言 为什么需要用到同步,因为有时候我们给一个提交按钮注册提交表单数据的时候,在提交动作之前会进行一系列的异步ajax请求操作,但是页面js代码会按顺序从上往下面执行,如果你在这过程中进行了异步操 ...