beyond__devil的博客

自己是搞php的，但是看到现在前端这么火，各种炫酷的效果，自己想写又写不出来。只是会html、css、js，看得懂代码，但是专门写页面，真心不行。所以打算，有时间能不能从头搞搞前端，用一些新的技术： nodejs、nmp、glup.js、grunt、Sass、React等 看了点别人的博客，尤其是：“阮一峰” 大神，觉得人家写的真好！就看了点React，但看别人总结的经验，实在不知道个所以然，

Conditional Rendering - 有条件的渲染 在React中，你可以创建唯一的组件，来封装你需要的行为。之后，你可以仅仅渲染它们中的一些，这取决于你应用的状态。 React中的有条件的渲染，同JS中有条件的渲染的工作方式相同。使用JS操作符，例如：if 或者 'conditional operator-三元运算符' 来创建代表当前状态的元素，然后让React更新对应的UI。

Lists and Keys 首先，让我们回顾一下，在js中如何变换列表。 下面给出的代码，我们使用 'map()' 函数作用一个 'numbers' 数组，并且使数组中的元素值＊2.我们分配由 'map()' 返回的新数组给变量 'doubled'，并且在console中输出： const numbers = [1, 2, 3, 4, 5]; const doubled = num

Forms - 表单 在React中，HTML表单元素同其他DOM元素，有点不同。因为表单元素天生具备一些内部的state状态。例如：下面的HTML表单接收一个名字： Name: 这个表单具有默认HTML表单的行为，当用户提交表单，跳转到新页面。在React中，如果你想要这种行为，它默认就起作用。但是大多数情况，使用js函数来处理表单的提交，以及对用户输入的

Lifting State Up - 提升状态 经常的，几个组件需要映射相同的数据改变。我们推荐提升共享的state状态到它们最近的公共祖先元素。让我们看看这是如何实现的。 在这个章节，我们将创建一个温度计算器，计算在一个给定的温度，水是否会沸腾。 我们以一个叫做 'BoilingVerdict' 的组件开始。它接收 'celsius' 温度作为一个prop，并且打印是否足够使水非常。

Composition vs Inheritance － 组合对比继承 React有一个强大的组合模型，并且我们推荐使用组合来代替继承，在组件间重复使用代码。 在这一章节，我们将考虑React新手开发者经常碰到的几个关于继承的问题，并展示我们如何使用组合来解决这些问题。 containment - 控制 有些组件提前不知道它们的子组件。这对于像 'Sidebar' 或 'Dialo

Thinking in React - 思考React 在我们看来，React是使用js来创建大的、速度快的web应用的首选方式。它已经在Facebook和Instagram表现的非常好。 React众多伟大部分之一是：创建应用时，它是如何让你思考的。在这个文档中，我们将带领你穿越，使用React来构建搜索产品数据表的整个思维过程 Start With A Mock - 以一个模拟开

hello world 开始React的最简单的方式是使用 '在 CodePen 的 hello world 实例代码'。你不需要安装任何东西；你仅仅需要在另一个页签打开它，并跟随我们的示例。如果你更想使用一个本地的开发环境，查看安装小节。 最小的React例子： ReactDOM.rend( Hello World! document.getElementById('root');

introducing JSX 思考下面的变量声明： const element = Hello world!; 这个有趣的标签解析，既不是字符串，也不是HTMl。 它叫做 'JSX'，它是对js的一个解析扩展。在React中，我们推荐使用它来描述UI应该是什么样子。JSX可能看着像一个模板语言，但是它具有js的所有能力。 JSX产生 React元素。在下一章节，我们将探讨将它们渲染为D

Rendering Elements - 渲染元素 元素是React应用的最小构建块 一个元素描述了你想要在屏幕上看到的内容： const element = Hello, world; 不同于浏览器的DOM元素，React元素是普通对象，而且易于创建。React DOM很小心将React元素更新为匹配的DOM对象。 注意： 人们可能将元素与一个广为人知的概念"组件"混淆。在下一节我们

Components and Props - 组件和属性 组件允许你分隔UI为独立的、可重用的零件，每个零件是隔离的。 概念上，组件就像js的函数。它们接收任意的输入(被称为 'props')，并返回React元素，用以描述应该在屏幕上显示的内容。 Functional and Class Components - 函数式组件和类组件 定义一个组件的最简单方式是写一个js函数：

state 和 生命周期 到目前为止，我们仅仅学习了一种方式来更新UI。 我们调用 'ReactDOM.render()' 来改变输出渲染： function tick() { const element = ( Hello, world!       It is {new Date().toLocaleTimeString()}. ); ReactDOM.render(

Handling Events - 事件处理 React元素的事件处理同DOM元素的事件处理非常相似。 有一些语法不同： 1.React事件使用 'camelCase-驼峰式' 命名，而不是 'lowercase-小写字母' 2.使用JSX，传递一个函数作为事件处理，而不是字符串 例如： HTML代码： Activate Lasers 略微不同于React： Acti