![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 76
Beijiyang999
这个作者很懒,什么都没留下…
展开
-
数据可视化:在 React 项目中使用 Vega 图表 (二)
上一篇讲了如何在 React 项目中用 Vega-Lite 绘制基本的 area chart 图表。本篇将介绍如何绘制多层图表,如何添加图例。多层图表通过上一篇文章,我们知道了可以通过 mark, encoding 等来描述我们想要的图表。要实现多层图表,只需要把多个包含上述属性的图表对象放进 layer 数组中就可以。就像栈一样, 从栈顶压入,后压入的(index 大的)图层在上层。我...原创 2019-10-29 22:47:11 · 978 阅读 · 0 评论 -
数据可视化:在 React 项目中使用 Vega 图表 (一)
相关包打开搜索引擎,一搜 Vega,发现相关的包有好几个,Vega, Vega-Lite, Vega-Embed,React-Vega 等等,不免让人头晕。别急,它们之间的关系三四句话就能说明白,以下是极简介绍:Vega:一套数据可视化的语法。它强大、灵活。用 JSON 描述配置,以 Canvas 或者 SVG 出图。Vega-Lite:一套描述 Vega 配置的语法。它简易、快速。同样...原创 2019-10-24 23:54:33 · 1822 阅读 · 0 评论 -
dlopen “no suitable image found ”问题之解决
做一个练手小项目,基于 react-transform-boilerplate 的demo。克隆 react-transform-boilerplate项目装包 package.json中的包style-loader,css-loader,autoprefixer-loader,sass-loader,node-sass配置webpack.config.dev.js 增加main....原创 2016-07-08 17:54:37 · 12973 阅读 · 0 评论 -
react-router 只变 link 不更新内容的问题的解决 记录
React + Redux + node.js 的项目之前遇到类似的问题,是这种情况:用 withRouter() 解决 Blocked Updates Generally, React Router and Redux work just fine together. Occasionally though, an app can have a component th...原创 2018-01-06 23:47:36 · 7493 阅读 · 0 评论 -
React项目:代码分片、按需加载(code splitting)/ 免webpack配置
为什么需要代码分片Facebook 的 create-react-app 是一款非常优秀的开发脚手架。它为我们生成了 React 开发环境,自带 webpack 默认配置。 它会通过 webpack 打包我们的应用,产生一个 bundle.js 文件。随着我们的项目越写越复杂,bundle.js 文件会随之增大。 由于该文件是唯一的,所以不管用户查看哪个页面、使用哪个功能,都必须先下载所有的功能代...原创 2017-11-21 13:12:08 · 5455 阅读 · 1 评论 -
React 实现井字棋游戏 (tic-tac-toe) 教程 (6) <译自官方文档>
你的井字棋已经实现了如下功能:你可以玩井字棋游戏;当有玩家获胜时,宣布结果;存储棋局的历史步骤记录;允许玩家穿越回之前,查看当时棋盘的格局。翻译 2017-11-06 16:46:23 · 1272 阅读 · 0 评论 -
React 实现井字棋游戏 (tic-tac-toe) 教程 (5) <译自官方文档>
存储历史步骤,并显示每一步棋。我们来实现这样的功能:通过重新访问board旧的状态,穿越回到之前的某一步。目前我们已经做到:每走一步棋,都随即创造一个新的`squares`数组。由此,我们可以同步地存储board的旧状态。翻译 2017-11-06 16:27:45 · 715 阅读 · 0 评论 -
React 实现井字棋游戏 (tic-tac-toe) 教程 (3) <译自官方文档>
状态提升至此,我们已经拥有了编写井字棋游戏的基本构件。但现在,状态(state)是被包裹在各个 Square 组件内的。为了完成这个游戏,我们还需要做这两件事:检查是否已经有玩家胜出;以及在小方格中轮流填入“X”和“O”翻译 2017-11-05 09:37:36 · 1074 阅读 · 0 评论 -
React 实现井字棋游戏 (tic-tac-toe) 教程 (2) <译自官方文档>
介绍什么是 React,如何开始编写,怎么通过 Props 传数据,什么是交互式组件,有什么好用的开发者工具。React 用于构建用户界面,它是一种声明式的,高效灵活的 JavaScript 库。翻译 2017-11-04 20:56:46 · 1346 阅读 · 0 评论 -
React 实现井字棋游戏 (tic-tac-toe) 教程 (4) <译自官方文档>
轮流下棋与宣布获胜者。目前,游戏中一个明显的问题是,只有“X”一个人能玩。现在就解决这个问题。我们默认,“X”执先手。在 Board 组件的构造函数中翻译 2017-11-05 13:40:22 · 1914 阅读 · 0 评论 -
React 实现井字棋游戏 (tic-tac-toe) 教程 (1) <译自官方文档>
翻译 react 官方指南 Tutorial: Intro To React用 react 一步步实现了井字棋游戏 tic-tac-toe翻译 2017-11-04 17:33:15 · 2057 阅读 · 0 评论 -
React : 展示组件 & 容器组件 附案例与视频
写React应用时,我发现了一种简单而有效的模式。如果你也写过一阵子React,或许你也已经发现它了。对于这种模式,这篇文章讲得不错,不过我还想再补充几点。如果把组件 分为以下两类,对组件的复用和理解会更容易一些。我这两类组件称为 展示组件 和 容器组件。也有叫“胖的&瘦的”、“聪明的&笨的”、“包含状态的的&纯的”、“Screens and Components”的等等说法,这些说法并不完全一致,但核心理念大概翻译 2017-11-04 11:35:15 · 912 阅读 · 0 评论 -
在阿里云 ECS 服务器部署 React + Express 项目
项目开发了一部分,准备先上线看看效果,就进行了部署。 以下是文档记录。0-选购阿里云 ECS 服务器操作系统: Ubuntu 14.04 64位1-创建普通用户登录方式 使用阿里云管理终端连接 ECS 实例实际操作过程中,发现这种方式速度慢,易卡死。本地通过 SSH 登录参考文档配置好秘钥后,用起来速度飞快。创建普通用户创建一个名为cat的普通用户。注:如果使用阿里云管理终端登录,跳过第原创 2017-11-17 21:49:49 · 2661 阅读 · 0 评论 -
React: 傻瓜/展示性组件的简化 (函数型组件及其传参)
React的组件可以分为“聪明组件&傻瓜组件”或“容器组件&展示组件”。这里展示对后者进行简化的案例。原创 2017-09-07 17:29:34 · 2779 阅读 · 0 评论 -
做省市区联动时,用node.js将数据调整到合适结构的两种常用方法
起因省市区联动,或者城市名称匹配,是很常用的功能。在实现他们的时候,经常会出现这样的情况:拿到的行政区划数据 和 渲染所需要的结构 不相符。通常我会用JS把它们处理成合适的结构。核心思路遍历其子元素或属性,在遍历的回调函数中,通过临时对象,将数据重新组织成需要的结构,再将其push进一个新构建的数组中。遍历完成后,该数组就是想要的最后结果。两种套路:数组 VS 对象。对于数组和对象,有不同的遍历方式。原创 2017-06-18 19:27:27 · 2917 阅读 · 0 评论