此文章是翻译How to develop apps bootstrapped with Create React App 官方文档

由于原文太长了，因此将此翻译文章将分成四个部分：

1. 如何开发由Create-React-App 引导的应用（一）
2. 如何开发由Create-React-App 引导的应用（二）
3. 如何开发由Create-React-App 引导的应用（三）
4. 如何开发由Create-React-App 引导的应用（四）

上述每个部分最多包含10 个目录，其中包含的相关目录如下所示：

简介

Storybook 是React 组件UI 开发环境，其作用在于让前端工程师专注在样式、组件功能的开发过程
中，不必担心应用程序特定的依赖关系和环境准备。

快速上手

1
2
3

npm i -g getstorybook
cd my-react-app
getstorybook

简介

A-Frame 是构建虚拟现实体验的web 框架。此框架由Mozilla VR 发起，目的是使WebVR 内容的创建更容易、更快速、更易于访问。A-Frame 是自由开源的同时拥有一个深受欢迎的社区以及蓬勃发展的工具和组件生态系统。

此雪碧图组件（源码）就是A-Frame 生态中实现的一个组件，雪碧图是制作预渲染动画的常用方法，而该组件可以将雪碧图加载到<a-frame> 元素，从而在A-Frame 中来进行动画控制。

首先我们了解一下雪碧图组件在A-Frame 中的安装以及使用，最后就再根据源码来对此流程图进行分析

在线GitBook 地址：https://jobbym.gitbooks.io/react-docs-zh-cn/

英文原版：https://facebook.github.io/react/docs/installation.html

React 中文文档主要是JobbyM 根据React 官网进行翻译，其官网版本为v15.4.0。

如果你想参与这本书的共同创作，修改或添加内容，可以先Fork 这本书的仓库，然后将修改的内容提交Pull requests；或者创建Issues。

更多详细信息请参考React 中文文档

Setup and Installation of Gitbook

GitBook 安装完毕只需要几分钟就可以了。

此文章是翻译Setup and Installation of Gitbook这篇GitBook官方文档。

GitBook.com

GitBook.com 是一个易于书写、出版和托管数据的解决方案。它是发布内容和协作的最简单的解决方案。

它很好的结合GiBoook Editor

主要是介绍一些使用js 来获取元素的CSS 样式的方法

一、style

我们可以使用element.style 获取元素的CSS 样式声明对象，以及设置元素的CSS 样式声明对象。

注意：element.style 只能获取元素style 属性中的CSS 样式。

1
2
3
4
5
6
7
8
9
10
11
12

<style>
.bg {
  height: 30px;
}
</style>
<div class="bg" style="width: 200px;">
使用element.style 获取CSS 属性值
</div>
<script>
console.log(document.querySelector('.bg').style.width) // 200px
console.log(document.querySelector('.bg').style.height) // ''
</script>

什么是双飞翼布局

双飞翼布局是上一篇文章CSS布局之圣杯布局的改进，圣杯布局中用到了浮动（float）、负边距（margin）和相对定位（position：relative），不添加额外的标签。而双飞布局需要用到（float）、负边距（margin）、添加额外的标签，没有用到相对定位（position：relative）。

什么是圣杯布局

圣杯布局是一种包括页眉、页脚和一个包含两个左右边栏的主内容区的网页布局。其布局遵循以下规则：

• 有固定宽度侧边栏和自适应内容区域
• 中间一列应该是最先出现，早于两个侧边栏
• 不管三列中包含的是什么，都应该具有相同的高度

Rythm.js源文文档

1. https://github.com/Okazari/Rythm.js

思路

1. 是什么，解决什么问题
2. 什么样子，预览
3. 如何使用
4. 如果工作的（源码分析，基本流程）
5. 总结，收获

What

一个可以使也页面跳动的js库。

demo：https://okazari.github.io/Rythm.js/

此文章是翻译Higher-Order Components这篇React（版本v15.4.0）官方文档。

Higer-Order Components

高阶component（HOC）在React 中是一个复用component 逻辑的高级技术。HOC 自身不是React API 的一部分。它们是从React 组合性质中出现的模式。

从概念上来说，高阶component 是一个接受一个component 并返回一个新component的函数。

1

const EnhancedComponent = higerOrderComponent(WrappedComponent);

鉴于component 转换props 为UI，高阶component 转化一个component 为另一个component。

HOC 在React 第三方库中是常见的，就像Redux 的connect 和Relay 的createContainer。

在文档中，我们将讨论高阶component 为什么有用，以及你自己如何去写。