随笔分类 -  React.js学习笔记

ES5下的React
摘要：按照官方推荐的思路，React使用标准的ES6标准的语法。比如说创建一个类： 但是ES5依然深入人心。用的是 方法。 二者是如此的相似，但是还是有若干差别。现将官网内容翻译如下，相信无论是ES5或是ES6的使用者，都会有所裨益。 和`defaultProps`的声明方式 在ES6的语法下， 和`de 阅读全文
posted @ 2017-01-29 13:14 葡萄美酒夜光杯 阅读(574) 评论(0) 推荐(0)
React项目（二）：生命游戏
摘要：引子 这是16年最后的一个练手项目，一贯的感觉就是，做项目容易，写说明文档难。更何况是一个唤起抑郁感觉的项目，码下的每个字，心就如加了一个千斤的砝码。 2016年，有些事我都已忘记，但我现在还记得。2.14那天我见到了六年没见面高中同桌浩哥。为了缓解闰土式的尴尬，我提议到车站附近公园走走。 浩哥被北 阅读全文
posted @ 2017-01-02 20:27 葡萄美酒夜光杯 阅读(1079) 评论(0) 推荐(0)
React项目（一）：markdown编辑器
摘要：在之前的React官网教程中，提到了用Remarkable为插件的markdown评论框。现在就来正儿八经地用另外一个插件 做一个markdown编辑器吧！ 准备工作 或许在做之前，应该布个局。 大概这样就OK了。 本demo使用的是以下环境（marked.js，highlight.js及其样式库） 阅读全文
posted @ 2016-12-27 19:05 葡萄美酒夜光杯 阅读(2830) 评论(0) 推荐(0)
React的井字过三关（3）
摘要：这是React井字棋项目的最后一篇笔记，记述AI实现。 一. 是开头都会说的原理 但凡懂一点围棋的人都知道“大场”这个概念，可以浅显地把它理解为布局时棋盘上各处的要点。棋谚“金角银边草肚皮”，就很好地说明了大场具有的特征：价值高。 比如没其他子的情况下，先手占星角位，这手棋价值大约是20目。第一手下 阅读全文
posted @ 2016-12-24 04:02 葡萄美酒夜光杯 阅读(926) 评论(0) 推荐(0)
React的井字过三关（2）
摘要：这篇笔记是官方教程的延续笔记，所有代码基于第一篇笔记的结尾代码。旨在解决教程后面提出的五个问题。 一 . 用(X,Y)来取代原有的数字坐标 原来的数字坐标是这样的： 现在的要求是把原来的代码坐标改为二维坐标系的表达形式，并且在历史记录面板中打出转换后的坐标。 如果只是为了输出好看。只需要写一个转换方 阅读全文
posted @ 2016-12-23 06:05 葡萄美酒夜光杯 阅读(869) 评论(0) 推荐(0)
React的井字过三关（1）
摘要：React的井字过三关（1） 本文系React官方教程的Tutorial: Intro To React的笔记。由笔者用ES5语法改写。 在本篇笔记中，尝试用React构建一个 可交互的 井字棋游戏。 开始 先布局： status反映游戏信息。九宫格采用flex布局。右侧有一处游戏信息。 再把css 阅读全文
posted @ 2016-12-22 04:11 葡萄美酒夜光杯 阅读(2032) 评论(0) 推荐(0)
React视角下的轮播图
摘要：天猫购物网站最显眼的就是轮播图了。我在学习一样新js库，一个新框架或新的编程思想的时候，总是感叹“入门必做选项卡，进阶须撸轮播图。”作为一个React组件，它是状态操控行为的典型，拿来练手是个不错的选择。 为了复习，这次就尝试用原生的javascript+React来完成。 轮播图原生实现 所谓轮播 阅读全文
posted @ 2016-12-20 22:36 葡萄美酒夜光杯 阅读(5802) 评论(14) 推荐(0)
深入理解JSX
摘要：本文由笔者翻译自官方文档的JSX In Depth，若干案例经过了改写。其实说白了也好像不算太深入，但还是提示了一些可能的盲区。 JSX是为构造React元素方法 设计的语法糖。 比方说JSX代码： 用标准的React语法写出来应该是： 当没有内容时，根据xml的语法特性，可以加上自闭合标签： 那么 阅读全文
posted @ 2016-12-19 22:29 葡萄美酒夜光杯 阅读(1472) 评论(0) 推荐(0)
React.js入门笔记(再续)：评论框的实现
摘要：本案例来自React.js中文官网对应内容。 一. 运行环境 二. 组件架构 App下有两个子组件 （评论列表）和 （评论区），其中 下又有一个子组件 （评论） Comment包括一个h2的评论人名称，一个span的评论内容，获取数据之后，Comment组件以数组的形式传入CommentList。 阅读全文
posted @ 2016-12-18 18:16 葡萄美酒夜光杯 阅读(896) 评论(0) 推荐(0)
React.js入门笔记(续)：用React的方式来思考
摘要：本文主要内容来自React官方文档中的“Thinking React”部分，总结算是又一篇笔记。主要介绍使用React开发组件的官方思路。代码内容经笔者改写为较熟悉的ES5语法。 React——在我们看来，是用javascript快速开发大型web应用的捷径。这在Facebook和Instagram 阅读全文
posted @ 2016-12-15 05:16 葡萄美酒夜光杯 阅读(1028) 评论(4) 推荐(1)
React.js入门笔记
摘要：React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记，估计也会是该系列涵盖内容最多的笔记，主要内容来自英文官方文档的快速上手部分和阮一峰博客教程。当然，还有我自己尝试的实例。日后还将对官方文档进阶和高级部分分专题进行学习并记录。 尽管前端学习面临着各种各样的焦虑，尽管越来 阅读全文
posted @ 2016-12-12 15:18 葡萄美酒夜光杯 阅读(1598) 评论(0) 推荐(1)