Skip to content

Latest commit

 

History

History
151 lines (96 loc) · 10.5 KB

00.md

File metadata and controls

151 lines (96 loc) · 10.5 KB
Raw

零、序言

我们都知道 JavaScript 应用程序是 web 开发的未来，有许多不同的框架可用于构建同构 JavaScript web 应用程序。然而，随着 web 开发世界的变化，我们都需要作为开发人员使自己现代化，以学习新的框架和构建新的工具。重要的是分析框架的代码方法并采用相同的方法，而不是在框架市场中迷失方向。ReactJS 是一个开源 JavaScript 库，类似于 Bootstrap，用于构建用户界面，在MVC中被称为V（视图）。当我们谈到定义M和*C 时，*我们可以使用其他框架，例如 Redux 和 Flux 来处理远程数据。

Bootstrap 是一个开源前端框架，用于开发响应性网站和 web 应用程序。它包括用于构建用户界面组件的 HTML、CSS 和 JavaScript 代码。这是一种更快更简单的方法来开发强大的移动优先响应设计。Bootstrap 库包括响应性强的 12 列网格和预定义的类，以方便布局选项（固定宽度和全宽度）。Bootstrap 有几十个预先设计好的可重用组件和自定义 jQuery 插件，如按钮、警报、下拉列表、模式、工具提示选项卡、分页、carousal、徽章和图标。

本书首先详细研究了 ReactJS 和 Bootstrap。本书进一步介绍了如何使用 Twitter Bootstrap、React Bootstrap 等创建 ReactJS 的小组件。它还让我们了解了 JSX、Redux 和 Node.js 集成的高级概念，如还原器、操作、存储、实时重新加载和 webpack。目标是帮助读者使用 ReactJS 和 Bootstrap 构建响应迅速、可扩展的 web 应用程序。

这本书涵盖的内容

第一章介绍了 React 和 Bootstrap入门，介绍了 ReactJS 及其生命周期，以及带有小型组件的 Bootstrap。

第 2 章让我们用 React Bootstrap 和 React构建一个响应主题，介绍 React Bootstrap 集成及其优点，以及 Bootstrap 响应网格系统。

第三章、ReactJS JSX是关于 JSX 的，它的优点，以及它在 React 中的工作原理，并举例说明。

第 4 章，DOM 与 ReactJS的交互，深入解释道具和状态，以及 React 如何与 DOM 交互，并举例说明。

第 5 章中，jQuery Bootstrap 组件与 React一起，探讨如何将 Bootstrap 组件集成到 React 中，并举例说明。

第 6 章Redux 架构以实例介绍了 ReactJS 和 Node.js 的 Redux 架构及其优势和集成。

第 7 章与 React的路由，以实例展示了 React 路由与 React JS 以及 Bootstrap 的导航组件，其优势和集成。

第 8 章、ReactJS API探讨了我们如何整合 Facebook 等第三方 API，在 ReactJS 中获取个人资料信息。

第 9 章中，React 与 Node.js一起，介绍了为服务器端 React 应用程序设置的 Node.js，还介绍了使用 Bootstrap 和 ReactJS npm 模块创建小型应用程序。

第 10 章、*最佳实践，*列出了创建 React 应用程序的最佳实践，并帮助我们了解 Redux 和 Flux 之间的差异、Bootstrap 定制以及要遵循的项目列表。

这本书你需要什么

要运行本书中的示例，需要以下工具：

| **React JS** | **15.1 及以上** | [https://facebook.github.io/react/](https://facebook.github.io/react/) | | reactjsdom | 15.1 及以上 | [https://facebook.github.io/react/](https://facebook.github.io/react/) | | 巴别塔 | 5.8.23 | [https://cdnjs.com/libraries/babel-core/5.8.23](https://cdnjs.com/libraries/babel-core/5.8.23) | | 独自创立 | 3.3.5 | [getbootstrap.com/](http://getbootstrap.com/) | | jQuery | 1.10.2 | [http://jquery.com/download/](http://jquery.com/download/) | | ReactBootstrap | 1.0.0 | [https://react-bootstrap.github.io/](https://react-bootstrap.github.io/) | | JSX 变压器 | 0.13.3 | [https://cdnjs.com/libraries/react/0.13.0](https://cdnjs.com/libraries/react/0.13.0) | | React 路由库 | 3.0.0 | [https://unpkg.com/[email protected]/umd/ReactRouter.min.js](https://unpkg.com/[email protected]/umd/ReactRouter.min.js) | | Node.js | 0.12.7 | [https://nodejs.org/en/blog/release/v0.12.7/](https://nodejs.org/en/blog/release/v0.12.7/) | | 蒙哥达 | 3.2 | [https://www.mongodb.org/downloads#production](https://www.mongodb.org/downloads#production) |

这本书是给谁的

如果您具有 HTML、CSS 和 JavaScript 的中级知识，并且希望了解 ReactJS 和 Bootstrap 是开发人员创建应用程序的快速、响应性和可伸缩用户界面的第一种方法，那么本书适合您。如果您的模型、视图、控制器（MVC）概念清晰，那么理解 React 的体系结构就增加了一个优势。

公约

在本书中，您将发现许多文本样式可以区分不同类型的信息。下面是这些风格的一些例子及其解释。

文本中的代码词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄如下所示：“现在我们需要在名为images、css和js（JavaScript）的chapter1文件夹中创建几个文件夹，以使您的应用程序易于管理。”

代码块设置如下：

<section> 
    <h2>Add your Ticket</h2> 
</section> 
<script> 
    var root = document.querySelector
    ('section').createShadowRoot(); 
    root.innerHTML = '<style>h2{ color: red; }</style>' + 
    '<h2>Hello World!</h2>'; 
</script>

当我们希望提请您注意代码块的特定部分时，相关行或项目以粗体显示：

<div className="container"> 
    <h1>Welcome to EIS</h1> 
    <hr/> 
        <div className="row"> 
            <div className="col-md-12 col-lg-12"> 
{this.props.children} 
            </div> 
        </div> 
</div>

任何命令行输入或输出的编写方式如下：

npm install <package name> --save

新术语和重要词语以粗体显示。您在屏幕上看到的文字（例如，在菜单或对话框中）显示如下：“在仪表板页面中，您的左侧导航显示设置链接。请单击该链接为您的应用程序设置基本和高级设置。”

注

警告或重要注释显示在这样的框中。

提示

提示和技巧如下所示。

读者反馈

我们欢迎读者的反馈。让我们知道你对这本书的看法你喜欢还是不喜欢。读者反馈对我们来说很重要，因为它可以帮助我们开发出您将真正从中获得最大收益的标题。要向我们发送一般反馈，只需发送电子邮件 [email protected]，并在邮件主题中提及该书的标题。如果您对某个主题有专业知识，并且您有兴趣撰写或贡献一本书，请参阅我们的作者指南www.packtpub.com/authors。

客户支持

既然您是一本 Packt 图书的骄傲拥有者，我们有很多东西可以帮助您从购买中获得最大收益。

下载示例代码

您可以从您的帐户下载本书的示例代码文件 http://www.packtpub.com 。如果您在其他地方购买了本书，您可以访问http://www.packtpub.com/support 并注册，将文件直接通过电子邮件发送给您。

您可以通过以下步骤下载代码文件：

  1. 使用您的电子邮件地址和密码登录或注册我们的网站。
  2. 将鼠标指针悬停在顶部的支架选项卡上。
  3. 点击代码下载&勘误表。
  4. 在搜索框中输入图书名称。
  5. 选择要下载代码文件的书籍。
  6. 从您购买本书的下拉菜单中选择。
  7. 点击代码下载。

下载文件后，请确保使用以下最新版本解压或解压缩文件夹：

  • WinRAR/7-Zip for Windows
  • 适用于 Mac 的 Zipeg/iZip/UnRarX
  • 适用于 Linux 的 7-Zip/PeaZip

该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/Learning-Web-Development-with-React-and-Bootstrap 。我们在上还提供了丰富的书籍和视频目录中的其他代码包 https://github.com/PacktPublishing/ 。看看他们！

下载本书彩色图片

我们还为您提供了一个 PDF 文件，其中包含本书中使用的屏幕截图/图表的彩色图像。彩色图像将帮助您更好地了解输出中的更改。您可以从下载此文件 https://www.packtpub.com/sites/default/files/downloads/LearningWebDevelopmentwithReactandBootstrap_ColorImages.pdf 。

勘误表

虽然我们已尽一切努力确保内容的准确性，但错误确实会发生。如果您在我们的一本书中发现错误，可能是文本或代码中的错误，如果您能向我们报告，我们将不胜感激。通过这样做，您可以使其他读者免于沮丧，并帮助我们改进本书的后续版本。如果您发现任何错误，请访问进行报告 http://www.packtpub.com/submit-errata ，选择您的书籍，点击勘误表提交表链接，输入您勘误表的详细信息。一旦您的勘误表得到验证，您的提交将被接受，勘误表将上载到我们的网站或添加到该标题勘误表部分下的任何现有勘误表列表中。

要查看之前提交的勘误表，请转至https://www.packtpub.com/books/content/support 并在搜索字段中输入图书名称。所需信息将出现在勘误表部分下。

盗版

在互联网上盗版版权材料是所有媒体都面临的一个持续问题。在 Packt，我们非常重视版权和许可证的保护。如果您在互联网上发现任何形式的非法复制品，请立即向我们提供地址或网站名称，以便我们采取补救措施。

请联系我们 [email protected] 与怀疑盗版材料的链接。

我们感谢您在保护我们的作者方面提供的帮助以及我们为您带来有价值内容的能力。

问题

如果您对本书的任何方面有疑问，请联系我们 [email protected]，我们会尽力解决这个问题。