beyond__devil的博客

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

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

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

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

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

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

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

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

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

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

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

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

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