react 一、React 和 Bootstrap 入门

一、React 和 Bootstrap 入门

使用 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（有时称为 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 的组件生命周期及其不同级别。我们将在接下来的章节中对此进行更多讨论。请遵循下图：

ReactJS

注

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文件夹中创建几个文件夹，以使您的应用程序易于管理。完成文件夹结构后，它将如下所示：

Setting up the environment

安装 ReactJS 和 Bootstrap

创建完文件夹结构后，我们需要安装框架 ReactJS 和 Bootstrap。这就像在页面中包含 JavaScript 和 CSS 文件一样简单。我们可以通过内容交付网络（CDN）实现这一点，如谷歌或微软，但我们将在应用程序中手动获取文件，因此我们不必依赖互联网，也可以脱机工作。

安装 React

首先，我们必须转到这个 URLhttps://facebook.github.io/react/ 点击下载 React v15.1.0按钮：

Installing React

这将为您提供最新版本的 ReactJS 的 ZIP 文件，其中包括 ReactJS 库文件和 ReactJS 的一些示例代码。

目前，我们在应用程序中只需要两个文件：react.min.js和react-dom.min.js来自解压缩文件夹的build目录。

以下是我们需要遵循的几个步骤：

将react.min.js和react-dom.min.js复制到您的项目目录chapter1/js文件夹中，并在编辑器中打开您的index.html文件。
现在您只需要在页面的head标记部分添加以下脚本：

jsx <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:

jsx <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文件夹的最终结构：

Installing React

Bootstrap

Bootstrap 是一个由 Twitter 维护的开源前端框架，用于开发响应性网站和 web 应用程序。它包括用于构建用户界面组件的 HTML、CSS 和 JavaScript 代码。这是一种快速而简单的方法来开发强大的移动第一用户界面。

Bootstrap 网格系统允许您创建响应性的 12 列网格、布局和组件。它包括用于轻松布局选项（固定宽度和全宽度）的预定义类。Bootstrap 有十几个预先设计好的可重用组件和自定义 jQuery 插件，例如按钮、警报、下拉列表、模式、工具提示选项卡、分页、carousal、徽章、图标等等。

安装 Bootstrap 程序

现在，我们需要安装 Bootstrap 程序。访问http://getbootstrap.com/getting-started/#download 点击下载 Bootstrap按钮：

Installing Bootstrap

这包括我们应用程序的css和js的编译和缩小版本；我们只需要 CSSbootstrap.min.css和fonts文件夹。此样式表将为您提供所有组件的外观和感觉，并且是我们应用程序的响应性布局结构。以前版本的 Bootstrap 包括图标作为图像，但在版本 3 中，图标已替换为字体。我们还可以根据应用程序中使用的组件自定义 Bootstrap CSS 样式表：

解压缩 ZIP 文件夹并将 Bootstrap CSS 从css文件夹复制到项目文件夹的 CSS。
现在将 Bootstrap 的fonts文件夹复制到您的项目根目录中。
在编辑器中打开您的index.html，并将此link标记添加到您的head部分：

jsx <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>

使用 React

现在我们有了 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 页面。如果你看到你好，世界！在您的浏览器中，那么我们的工作进展顺利。观察以下屏幕截图：

Using React

在前面的截图中，您可以看到它显示你好，世界！在您的浏览器中。太好了。我们已经成功地完成了安装并构建了第一个 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 的静态表单

我们用 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'));

我们的表格准备好了。现在让我们看看它在浏览器中的外观：

Static form with React and Bootstrap

编译器无法解析我们的 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>

现在，您可以在浏览器上查看页面，您将能够看到具有如下屏幕截图所示外观的表单：

Static form with React and Bootstrap

现在它运转良好，看起来不错。Bootstrap 还提供了两个额外的类来使元素变得越来越小：input-lg和input-sm。您还可以通过调整浏览器的大小来检查响应行为。观察以下屏幕截图：

Static form with React and Bootstrap

看起来不错。我们的小型静态登录表单应用程序已经准备好响应行为。

由于这是一个介绍性的章节，您可能会想到一个问题，即如何做出有帮助或有益的 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 基础知识，并介绍我们将在本书中构建的项目。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/9301.html

react 查看更多书籍

《React 和 Bootstrap Web 开发学习手册》

分类

最近更新

react 一、React 和 Bootstrap 入门

一、React 和 Bootstrap 入门

React

注

营造环境

安装 ReactJS 和 Bootstrap

安装 React

Bootstrap

安装 Bootstrap 程序

使用 React

带 React 和 Bootstrap 的静态表单

注

提示

总结

留言

联系客服

数据知识

系统公告

开发文档

react查看更多书籍

《React 和 Bootstrap Web 开发学习手册》

react 一、React 和 Bootstrap 入门

一、React 和 Bootstrap 入门

React

注

营造环境

安装 ReactJS 和 Bootstrap

安装 React

Bootstrap

安装 Bootstrap 程序

使用 React

带 React 和 Bootstrap 的静态表单

注

提示

总结

留言

联系客服

react 查看更多书籍