React教程-2 版本v16.2.0

进阶

现在,每个状态都封装到了每个方格组件里。要完成整个游戏,我们要检查一个玩家是否赢得比赛,还有除了X还有O放到方格。为了检查是否赢,我们需要在一个地方获取9个方格信息,而不是每一个方格组件。

You might think that Board should just inquire what the current state of each Square is. Although it is technically possible to do this in React, it is discouraged because it tends to make code difficult to understand, more brittle, and harder to refactor.

 

Instead, the best solution here is to store this state in the Board component instead of in each Square – and the Board component can tell each Square what to display, like how we made each square display its index earlier.

When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent.

Pulling state upwards like this is common when refactoring React components, so let’s take this opportunity to try it out. Add a constructor to the Board and set its initial state to contain an array with 9 nulls, corresponding to the 9 squares:

React教程-1 版本v16.2.0

在开始之前

我们在创建什么

我们先来开发一个交互的井字棋游戏.

如果你喜欢,你可以直接查看最终项目代码Final Resul.无需担心你现在是否明白理解里面的代码,或者是一些你不熟悉的语法。我们将一步步学习如何制作这个游戏。

玩一下这个游戏,还可以使用悔棋.

好了让我们开始教程.

继续阅读“React教程-1 版本v16.2.0”

Gulp新人指南-2 watch 预处理 scss

补充一下Index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1>测试页面</h1>
    <svg></svg>
</body>
</html>

Globbing in Node/Node通配符

Globs 匹配模式或者文件类型从而添加更多文件到gulp.src,类似正则表达式,但是主要用于文件路径.

当使用通配符,计算机检查

多数Gulp只需要4种不同的通配符:

  1. *.scss:  *匹配当前目录所有类型(当前项目或者目录).
  2. **/*.scss: 这个匹配所有根目录以及子目录的文件.
  3. !not-me.scss:  !符号会排除一个文件,这个例子里not-me.scss会被排除.
  4. *.+(scss|sass):+和()括号会增加匹配类型,使用|分号分开,这个例子会包括.scss和.sass.

现在我们可以用scss/**/*.scss替换app/scss/styles.scss.

继续阅读“Gulp新人指南-2 watch 预处理 scss”

Gulp新人指南-1 基础介绍

原文:https://css-tricks.com/gulp-for-beginners/

翻译

Gulp是一个工具,帮你解决许多web开发的task,经常用于以下情况:

  • 启动一个web服务
  • 自动重新加载页面,当文件保存的时候
  • 支持预处理Sass Less
  • 优化CSS,JS,图片

可以做的事情还有很多,甚至构建一个静态页面生成器。

Gulp很棒棒~学习怎么使用它吧。

 

这是此文章目的所在。

Gulp与Grunt相比,更简洁,更快。

继续阅读“Gulp新人指南-1 基础介绍”