使用 JavaScript 和 CSS 构建现代 web 应用程序有许多不同的方法，包括许多不同的工具选择，以及许多需要学习的新理论。这本书向您介绍了 ReactJS 和 Bootstrap，当您了解现代 web 应用程序开发时，可能会遇到它们。它们都用于构建快速、可扩展的用户界面。React 以 MVC 中的视图而闻名。当我们谈论定义M和C时，我们需要寻找其他地方，或者我们可以使用其他框架，如 Redux 和 Flux 来处理远程数据。
学习代码的最好方法是编写代码，所以我们现在就开始。为了向您展示使用 Bootstrap 和 ReactJS 启动和运行是多么容易，我们将介绍理论，并制作一个超级简单的应用程序，它将允许我们构建一个表单并将其实时显示在页面上。
您可以用自己喜欢的任何方式编写代码。尝试创建小组件/代码示例，这将使您对任何技术有更清晰的理解。现在，让我们看看这本书将如何使您的生活更容易，当谈到 Bootstrap 和 React。我们将介绍一些理论部分，并构建两个简单的实时示例：
- 你好，世界！用 ReactJS
- 带有 React 和 Bootstrap 的简单静态表单应用程序
随着 React 的引入，Facebook 确实改变了我们对前端 UI 开发的看法。这种基于组件的方法的主要优点之一是易于理解，因为视图只是属性和状态的函数。
我们将讨论以下主题：
- 建立环境
- ReactJS 设置
- Bootstrap 设置
- 为什么要 Bootstrap
- 带有 React 和 Bootstrap 的静态表单示例
React（有时称为 React.js 或 ReactJS）是一个开源 JavaScript 库，它为呈现为 HTML 的数据提供了一个视图。组件通常用于呈现包含指定为自定义 HTML 标记的附加组件的 React 视图。React 为您提供了一个简单的虚拟 DOM、没有模板的强大视图、单向数据流和显式变异。当数据发生变化时，更新 HTML 文档是非常有条理的；并在现代单页应用程序上提供了组件的清晰分离。
通过观察下面的示例，我们将清楚了解正常的 HTML 封装和定制 HTML 标记。
请注意以下 JavaScript 代码片段：
<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> 请注意以下代码片段：
var sectionStyle = {
color: 'red'
};
var AddTicket = React.createClass({
render: function() {
return (<section><h2 style={sectionStyle}>
Hello World!</h2></section>)}
})
ReactDOM.render(<AddTicket/>, mountNode); 随着应用程序的出现和进一步发展，确保以正确的方式使用组件是有利的。React 应用程序由可重用组件组成，这使得代码重用、测试和关注点分离变得容易。
React 不仅是 MVC 中的V，它还有状态组件（状态组件记住this.state中的所有内容）。它处理从输入到状态更改的映射，并呈现组件。从这个意义上说，它完成了 MVC 所做的一切。
让我们看看 React 的组件生命周期及其不同级别。我们将在接下来的章节中对此进行更多讨论。请遵循下图：
React 不是一个 MVC 框架；它是一个用于构建可组合用户界面和可重用组件的库。React 在 Facebook 的制作阶段使用，而instagram.com完全基于 React。
当我们开始用 ReactJS 制作应用程序时，我们需要做一些设置，只需要一个 HTML 页面和一些文件。首先，我们创建一个名为chapter1的目录（文件夹）。在任何代码编辑器中打开它。直接在其中创建一个名为index.html的新文件，并添加以下 HTML5 样板代码：
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>ReactJS Chapter 1</title>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an
<strong>outdated</strong> browser.
Please <a href="http://browsehappy.com/">
upgrade your browser</a> to improve your
experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
</body>
</html> 这是一个标准的 HTML 页面，我们可以在包含 React 和 Bootstrap 库后进行更新。
现在我们需要在名为images、css和js（JavaScript）的chapter1文件夹中创建几个文件夹，以使您的应用程序易于管理。完成文件夹结构后，它将如下所示：
创建完文件夹结构后，我们需要安装框架 ReactJS 和 Bootstrap。这就像在页面中包含 JavaScript 和 CSS 文件一样简单。我们可以通过内容交付网络（CDN）实现这一点，如谷歌或微软，但我们将在应用程序中手动获取文件，因此我们不必依赖互联网，也可以脱机工作。
首先，我们必须转到这个 URLhttps://facebook.github.io/react/ 点击下载 React v15.1.0按钮：
这将为您提供最新版本的 ReactJS 的 ZIP 文件，其中包括 ReactJS 库文件和 ReactJS 的一些示例代码。
目前，我们在应用程序中只需要两个文件：react.min.js和react-dom.min.js来自解压缩文件夹的build目录。
以下是我们需要遵循的几个步骤：
-
将
react.min.js和react-dom.min.js复制到您的项目目录chapter1/js文件夹中，并在编辑器中打开您的index.html文件。 -
现在您只需要在页面的
head标记部分添加以下脚本：<script type="text/js" src="js/react.min.js"></script> <script type="text/js" src="js/react-dom.min.js"></script>
-
现在我们需要在我们的项目中包含编译器来构建代码，因为现在我们正在使用诸如 npm 之类的工具。我们将从以下 CDN 路径下载该文件，https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js ，也可以直接给出 CDN 路径。
-
The
headtag section will look like this:<script type="text/js" src="js/react.min.js"></script> <script type="text/js" src="js/react-dom.min.js"></script> <script type="text/js" src="js/browser.min.js"></script>
以下是您的js文件夹的最终结构：
Bootstrap 是一个由 Twitter 维护的开源前端框架，用于开发响应性网站和 web 应用程序。它包括用于构建用户界面组件的 HTML、CSS 和 JavaScript 代码。这是一种快速而简单的方法来开发强大的移动第一用户界面。
Bootstrap 网格系统允许您创建响应性的 12 列网格、布局和组件。它包括用于轻松布局选项（固定宽度和全宽度）的预定义类。Bootstrap 有十几个预先设计好的可重用组件和自定义 jQuery 插件，例如按钮、警报、下拉列表、模式、工具提示选项卡、分页、carousal、徽章、图标等等。
现在，我们需要安装 Bootstrap 程序。访问http://getbootstrap.com/getting-started/#download 点击下载 Bootstrap按钮：
这包括我们应用程序的css和js的编译和缩小版本；我们只需要 CSSbootstrap.min.css和fonts文件夹。此样式表将为您提供所有组件的外观和感觉，并且是我们应用程序的响应性布局结构。以前版本的 Bootstrap 包括图标作为图像，但在版本 3 中，图标已替换为字体。我们还可以根据应用程序中使用的组件自定义 Bootstrap CSS 样式表：
-
解压缩 ZIP 文件夹并将 Bootstrap CSS 从
css文件夹复制到项目文件夹的 CSS。 -
现在将 Bootstrap 的
fonts文件夹复制到您的项目根目录中。 -
在编辑器中打开您的
index.html，并将此link标记添加到您的head部分：<link rel="stylesheet" href="css/bootstrap.min.css">.
就这样。现在我们可以再次打开index.html，但这次在您的浏览器中，查看我们正在使用的内容。以下是我们迄今为止编写的代码：
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>ReactJS Chapter 1</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/react.min.js">
</script>
<script type="text/javascript" src="js/react-dom.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an
<strong>outdated</strong> browser.
Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
</body>
</html> 现在我们有了 ReactJS 和 Bootstrap 样式表，从中我们初始化了我们的应用程序。现在，让我们开始使用ReactDOM.render()编写我们的第一个 Hello World 应用程序。
ReactDOM.render方法的第一个参数是我们想要呈现的组件，第二个参数是它应该挂载（附加）到的 DOM 节点。遵守以下代码：
ReactDOM.render( ReactElement element, DOMElement container,
[function callback] )为了将其转换为普通 JavaScript，我们在 React 代码中使用了 wrapps，<script type"text/babel">，标记实际上在浏览器中执行转换。
让我们先在body标签中添加一个div标签：
<div id="hello"></div>现在，添加带有 React 代码的script标记：
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('hello')
);
</script>JavaScript 的 XML 语法称为 JSX。我们将在后续章节中对此进行探讨。
让我们在浏览器中打开 HTML 页面。如果你看到**你好，世界！**在您的浏览器中，那么我们的工作进展顺利。观察以下屏幕截图：
在前面的截图中，您可以看到它显示**你好，世界！**在您的浏览器中。太好了。我们已经成功地完成了安装并构建了第一个 Hello World 应用程序。以下是我们迄今为止编写的完整代码：
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>ReactJS Chapter 1</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/react.min.js"></script>
<script type="text/javascript" src="js/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an
<strong>outdated</strong> browser.
Please <a href="http://browsehappy.com/">upgrade your
browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div id="hello"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('hello')
);
</script>
</body>
</html>我们用 React 和 Bootstrap 完成了我们的第一个 Hello World 应用程序，一切看起来都很好，正如预期的那样。现在是时候做更多的事情，创建一个静态登录表单，并对其应用 Bootstrap 外观。Bootstrap 是一种很好的方法，它可以使你的应用程序成为一个针对不同移动设备的响应网格系统，并在 HTML 元素上应用基本样式，包括一些类和 div。
响应网格系统是一种简单、灵活、快速的方法，可使您的 web 应用程序首先响应和移动，每个设备和视口大小可适当扩展到 12 列。
首先，让我们开始创建一个 HTML 结构，以遵循 Bootstrap 网格系统。
创建一个div并为（固定宽度）添加一个className .container，为（全宽度）添加一个.container-fluid。使用className属性代替class：
<div className="container-fluid"></div> 正如我们所知，class和for不推荐作为 XML 属性名。此外，这些是许多 JavaScript 库中的保留字，因此为了有明确的区别和相同的理解，我们可以使用className和htmlFor，而不是使用class和for。创建一个div并添加className="row"。row必须放置在.container-fluid内：
<div className="container-fluid">
<div className="row"></div>
</div>现在，创建必须是行的直接子级的列：
<div className="container-fluid">
<div className="row">
<div className="col-lg-6"></div>
</div>
</div>.row和.col-xs-4是预定义的类，可用于快速制作网格布局。
为页面标题添加h1标签：
<div className="container-fluid">
<div className="row">
<div className="col-sm-6">
<h1>Login Form</h1>
</div>
</div>
</div>网格列由 12 个可用列中指定数量的col-sm-*创建。例如，如果我们使用四列布局，我们需要指定col-sm-3引入相等列：
我们正在使用col-sm-*前缀调整小型设备列的大小。在列中，我们需要将表单元素label和input标记包装成一个div标记，其中包含form-group类：
<div className="form-group">
<label for="emailInput">Email address</label>
<input type="email" className="form-control" id="emailInput"
placeholder="Email"/>
</div>忘记 Bootstrap 的风格；我们需要在输入元素中添加form-control类。如果我们在label标记中需要额外的填充，那么我们可以在label上添加control-label类。
让我们快速添加其余的元素。我将添加一个password和submit按钮。
在 Bootstrap 的早期版本中，表单元素通常被包装在具有form-action类的元素中。但是，在 Bootstrap 3 中，我们只需要使用相同的form-group而不是form-action。我们将在第 2 章中更详细地讨论 Bootstrap 类和响应性，让我们用 React Bootstrap 和 React构建一个响应主题。
以下是我们完整的 HTML 代码：
<div className="container-fluid">
<div className="row">
<div className="col-lg-6">
<form>
<h1>Login Form</h1>
<hr/>
<div className="form-group">
<label for="emailInput">Email address</label>
<input type="email" className="form-control"
id="emailInput" placeholder="Email"/>
</div>
<div className="form-group">
<label for="passwordInput">Password</label>
<input type="password" className=
"form-control" id="passwordInput"
placeholder="Password"/>
</div>
<button type="submit" className="btn btn-default
col-xs-offset-9 col-xs-3">Submit</button>
</form>
</div>
</div>
</div>现在在var loginFormHTML脚本标记内创建一个对象并分配此 HTML：
Var loginFormHTML = <div className="container-fluid">
<div className="row">
<div className="col-lg-6">
<form>
<h1>Login Form</h1>
<hr/>
<div className="form-group">
<label for="emailInput">Email
address</label>
<input type="email" className="form-control"
id="emailInput" placeholder="Email"/>
</div>
<div className="form-group">
<label for="passwordInput">Password</label>
<input type="password" className="form-
control" id="passwordInput" placeholder="Password"/>
</div>
<button type="submit" className="btn btn-default col-xs-
offset-9 col-xs-3">Submit</button>
</form>
</div>
</div>我们将通过React.DOM()方法传递这个对象，而不是直接传递 HTML：
ReactDOM.render(LoginformHTML,document.getElementById('hello'));我们的表格准备好了。现在让我们看看它在浏览器中的外观：
编译器无法解析我们的 HTML，因为我们没有正确地附上一个div标记。您可以在我们的 HTML 中看到，我们没有在最后关闭包装器container-fluid。现在关闭末尾的包装器标记，并在浏览器中再次打开该文件。
每当你手写 HTML 代码时，请仔细检查开始标记和结束标记。它应该被正确地写入/关闭，否则它将破坏您的 UI/前端外观。
以下是关闭div标记后的 HTML：
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>ReactJS Chapter 1</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/react.min.js"></script>
<script type="text/javascript" src="js/react-dom.min.js">
</script>
<script src="js/browser.min.js"></script>
</head>
<body>
<!-- Add your site or application content here -->
<div id="loginForm"></div>
<script type="text/babel">
var LoginformHTML =
<div className="container-fluid">
<div className="row">
<div className="col-lg-6">
<form>
<h1>Login Form</h1>
<hr/>
<div className="form-group">
<label for="emailInput">Email address</label>
<input type="email" className="form-control" id=
"emailInput" placeholder="Email"/>
</div>
<div className="form-group">
<label for="passwordInput">Password</label>
<input type="password" className="form-control"
id="passwordInput" placeholder="Password"/>
</div>
<button type="submit" className="btn btn-default
col-xs-offset-9 col-xs-3">Submit</button>
</form>
</div>
</div>
</div>
ReactDOM.render(LoginformHTML,document.getElementById
('loginForm');
</script>
</body>
</html>现在，您可以在浏览器上查看页面，您将能够看到具有如下屏幕截图所示外观的表单：
现在它运转良好，看起来不错。Bootstrap 还提供了两个额外的类来使元素变得越来越小：input-lg和input-sm。您还可以通过调整浏览器的大小来检查响应行为。观察以下屏幕截图：
看起来不错。我们的小型静态登录表单应用程序已经准备好响应行为。
由于这是一个介绍性的章节，您可能会想到一个问题，即如何做出有帮助或有益的 React？
以下是你的答案：
- 渲染组件非常容易
- 在 JSX 的帮助下，读取组件的代码将非常容易
- JSX 还将帮助您检查布局，以及检查相互插入的组件
- 您可以轻松地测试代码，并且它还允许集成其他工具以进行增强
- React 是一个视图层，您还可以将其与其他 JavaScript 框架一起使用
前面的几点是非常高层次的，我们将在接下来的章节中看到更多的好处。
我们简单的静态登录表单应用程序和 Hello World 示例看起来很棒，并且工作正常，所以让我们回顾一下我们在本章学到的内容。
首先，我们看到通过包含 JavaScript 文件和样式表来安装 ReactJS 和 Bootstrap 是多么容易。我们还研究了 React 应用程序是如何初始化的，并开始构建我们的第一个表单应用程序。
我们创建的 Hello World 应用程序和表单应用程序演示了 React 和 Bootstrap 的一些基本功能，例如：
- React 域
- 提供
- 粗制滥造
- 独自创立
通过 Bootstrap，我们致力于为不同的移动设备提供一个响应性强的网格系统，并通过包含一些类和 div 应用 HTML 元素的基本样式。
我们还看到了框架新的 mobile first responsive 设计的实际应用，而没有将标记与不必要的类或元素混在一起。
在第 2 章中，让我们用 React Bootstrap 和 React构建一个响应主题，我们将深入探讨 Bootstrap 的特性以及如何使用网格。我们将探索更多的 Bootstrap 基础知识，并介绍我们将在本书中构建的项目。