使用 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
head
tag 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 基础知识,并介绍我们将在本书中构建的项目。