react快速上手开发完整版

c#小王子 2021-08-17 1049 react

react快速上手开发完整版

内容提要

本书是 React 入门书。前 3章介绍如何从空白的 HTML页面开始构建应用。第4章介绍 JSX语法。从第5章开始，你会学习到在实际开发中可能用到的一些附加工具。本书介绍的例子包括 JavaScript 打包工具、单元测试、语法检查、类型、在应用中组织数据流以及不可变数据。

本书适合有 JavaScript 基础的前端开发人员。

第一章 hello word

让我们踏上使用 React 开发应用的旅程吧。在这一章里，你将学习如何设置 React 并编写你的第一个 Hello World 应用。

1.1 设置

首先需要获取一份 React 库的源代码。所幸的是，这个过程非常简单。

访问 http//reactjs.com（这个网站会重定向到React 的官方 GitHub 页面），然后点击 Download按钮，再点击 Download Starter Kit，即可获得一份 ZIP 文件。解压该文件，并把压缩包中的目录复制到一个方便找到的地方。例如∶

nkdir ~/ reactbook
v ～/DownLoads/react-0.14.7/～/reactbook/reactz

现在你的工作目录（reactbook）应该如图 1-1 所示。

现在，我们只使用其中的~/reactbook/react/build/react.js 文件。我们会在后续的学习中逐步介绍其他文件的使用。

需要注意的是，React 并没有强制规定任何目录结构。因此，你可以根据具体情况把 React移动到其他目录，或者对 react.js 文件进行重命名操作。

1.2 Hello React World

我们首先在工作目录中编写一个简单的页面（~/reactbook/O1.01.hello.html）

<!DOCTYPE htmL> 
<htmL> 
   <head>
     <title>Hello React<title>
     <meta charset="utf-8">
  </head> 
  <body>
    <div id="app">
      <!--应用渲染的位置 -->
    </div>
    <script src="react/build/react.js"></script>
    <script src="react/build/react-dom.js"></script>
    <script>
      // 应用的JavaScript代码
    <script>
  <body>
<htmL>

该文件仅有两个值得我们注意的地方∶

· 引入了React库及其 DOM插件库（通过<script src>标签）;

定义了这个应用应该出现在页面上的位置（（<div id="app">））。

既可以在 React 应用中混用常规 HTML内容以及其他 JavaScript 库，也可以在一个页面内使用多个 React 应用。只需要在 DOM结构中给 React指定渲染内容的位置即可。

现在我们添加一段输出 Hello world!的代码。修改 01.01.hello.html文件，把 JavaScript注释替换为如下代码∶

ReactDOM. render(
    React.DOM.h1(null, "Hello world!"), 
    document.getElementById("app")
);

在浏览器中打开 01.01.hello.html后，可以看到新的代码在应用中生效了（如图1-2 所示）。

恭喜，现在你完成了第一个 React 应用!

图 1-2 中的 Chrome 开发者工具显示了React 生成的代码结构。从中可以看到，<div id="app">中的占位符被 React 应用生成的新内容所代替。

1.3 刚才发生了什么

你的第一个应用之所以成功运行，是因为在代码内部发生了一些有趣的事情。

首先，我们使用了React 对象，所有可用的 API都可通过该对象进行调用。实际上，React在设计 API时注重简化，所以需要记忆的方法名称并不多。

然后，我们使用了ReactDOM对象。这个对象只包含几个方法，其中 render（）方法是最有用的。在旧版本中，这些方法曾经属于 React 对象;但从 0.14 版本开始，它们被分离出来，目的是强调应用渲染实际上属于单独的概念。这是因为，你创建的 React 应用还可以渲染到不同的环境中，比如 HTML（浏览器 DOM）、canvas、原生的 Android 或 iOS 应用。

接下来，我们需要关注组件的概念。组件可以用于构建用户界面，并通过任何适当的方式进行组合。在实际应用中，你需要创建自定义组件，但在起步阶段，我们先学习使用 React提供的一个包裹层，它用于包裹 HTML DOM元素。该包裹层可通过 React.DOM对象进行调用。在第一个例子中，我们使用了h1组件。它对应于HTML的<h1>元素，可以使用 React.DOM.h1（）方法进行调用。

最后，我们调用了熟悉的 docunent.getELementById（"app"）方法访问 DOM节点。函数调用通过该参数告诉 React 需要把应用渲染在页面的哪个部分。因此，这是连接你所熟知的 DOM 操作到 React 新大陆的一座桥梁。

一旦跨过了从 DOM到 React 的桥梁，你就不需要再进行 DOM 操作了，因为 React 实现了从组件到基础平台（浏览器 DOM、canvas、原生应用）的转化。你无需再关心DOM，但这并不意味着不能操作 DOM。React为开发者提供了选择的自由，你可以根据具体情况，随时回到 DOM 操作的怀抱当中。

理解了每行代码的作用之后，让我们回顾整段代码。刚才发生的事情是∶在你选择的 DOM节点中渲染了一个React 组件。渲染过程从一个顶层组件开始，而顶层组件可以按需包含许多子元素（子元素中还可以嵌套子元素）。实际上，尽管这是一个简单的例子，但 h1组件中仍然包含一个子元素，即文本 Hello world!。

1.4 React.DOM.*

现在，你知道可以通过 React.DOM 对象把各种各样的 HTML 元素当作 React 组件使用。（图 1-3 展示了如何通过浏览器控制台获取 React.DOM 对象的完整属性列表。）接下来我们将深入了解这个 API。

【下载地址】

链接：https://pan.baidu.com/s/1tBUDfN0fpSrM1chhi1DdGA

提取码：rmak

深入浅出React和Redux

希望读者把阅读这本书的过程当做一个旅程，由浅入深地了解 React 和 Redux，如果你对 React 和 Redux 技术已经有一些了解

深入React技术栈

本书从几个维度介绍了React。一是作为 View 库，它怎么实现组件化，以及它背后的实现原理。二是扩展到 Flux 应用架构及重要的衍生品

快速上手React编程

本书旨在解决前端开发者的烦恼，使他们的生活更有意义、更加快乐，并通过介绍 React帮助他们赚到更多的钱——这些会以一种快速的方式进行。本书

从零开始学ReactJS