帮酷LOGO
  • 显示原文与译文双语对照的内容
Demo of a Leaflet.JS map created using React, Gulp, and Browserify. No jQuery.

  • 源代码名称:React-Leaflet-demo
  • 源代码网址:http://www.github.com/clhenrick/React-Leaflet-demo
  • React-Leaflet-demo源代码文档
  • React-Leaflet-demo源代码下载
  • Git URL:
    git://www.github.com/clhenrick/React-Leaflet-demo.git
  • Git Clone代码到本地:
    git clone http://www.github.com/clhenrick/React-Leaflet-demo
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/clhenrick/React-Leaflet-demo
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • React网页地图演示

    使用创建的bareLeaflet.JS 映射和创建 React App 插件作为应用框架的起点。

    查看现场演示。

    这个演示用一个瓦片层来实例化一张小叶地图,然后加载一个GeoJSON图层。 它实现了响应组件来过滤数据和更新地图。

    若要查看没有ES6语法的代码,请查看 es5-version 分支。

    要查看不做任何GeoJSON相关的裸骨骼示例,请查看 bare-bones 分支。

    阅读 src/ 中的评论看看发生了什么。

    安装:

    确保全局安装了 node.js @5.9.1 或者 GREATER 。

    然后执行:npm install

    运行

    在这里 repo的root 中执行 npm run start,在 http://localhost:3000 中打开浏览器以查看实时应用程序。

    below的信息来自创建 React App 入门指南。

    下面你会找到一些关于如何执行常见任务的信息。
    你可以在这里找到本指南的最新版本( ) 。

    发送反馈

    我们始终开放你的反馈。

    文件夹结构

    创建后,你的项目应该如下所示:

    my-app/
     README.md
     index.html
     favicon.ico
     node_modules/
     package.json
     src/
     App.css
     App.js
     index.css
     index.js
     logo.svg

    要生成项目,这些文件的必须存在,文件名精确为:

    • index.html 是页面模板;
    • favicon.ico 是你在浏览器选项卡中看到的icon ;
    • src/index.js 是JavaScript入口点。

    你可以 delete 或者重命名其他文件。

    你可以创建子目录 inside src 。 为了更快地重建,web service只处理文件 inside src
    你需要花费英镑任何JS和CSS文件 inside src,或者 web service不会看到它们。

    但是,你可以创建更高级别的目录。
    它们不会包含在生产构建中,这样你就可以使用它们来像文档一样。

    已知的问题:

    在更改文件 inside src 时,可能会遇到以下问题:不触发重新编译。 很可能发生这种情况,因为 文件系统 中的路径与你输入的路径中的路径不同。 例如如果文件被称为 App.js,但你正在导入 App.js,则观察者可能无法识别对它的更改。 我们是考虑执行一些检查来防止这个问题。 如果这没有帮助,请查看页面上的故障排除页面。

    可用脚本

    在项目目录中,可以运行:

    npm start

    在开发模式下运行应用程序。
    打开 http://localhost:3000 插件以在浏览器中查看它。

    如果你进行编辑,页面将重新加载。
    你还将在控制台中看到任何lint错误。

    npm run build

    生成用于 build 文件夹的应用程序。
    在生产模式下正确地进行反应,并为最佳性能优化构建。

    构建被缩小,文件名包含哈希值。
    你的应用程序已经准备好部署 !

    npm run eject

    注意:这是一种单向操作。 一旦你 eject 了,你就不能回去了 !

    如果你对构建工具和配置选项不满意,可以在任何时候进行 eject 。 这里命令将从你的项目中删除单个生成依赖项。

    相反,它将把所有配置文件和传递依赖项( web pack 。Babel 。ESLint等) 直接复制到项目中,这样你就可以完全控制它们。 除了 eject 之外,所有命令都将工作,但是它们将指向复制的脚本,以便你可以调整它们。 在这一点上,你是自己的。

    你不需要使用 eject 。 规划的特性集适合于小型部署和中间部署,你不应该感到有必要使用这个特性。 然而,我们理解这个工具是不会有用的,如果你不能自定义它,当你准备好它。

    如何。

    安装依赖项

    生成的项目包含响应和ReactDOM作为依赖项。 它还包括一组创建 React App 作为开发依赖项使用的脚本。 你可以使用 npm 安装其他依赖项( 例如响应路由器):

    npm install --save <library-name>

    导入组件

    这里项目设置支持ES6模块,感谢 Babel 。
    尽管你仍然可以使用 require()module.exports,但我们鼓励你使用 importexport

    例如:

    Button.js

    importReact, { Component } from'react';classButtonextendsComponent {
     render() {
     //.. . }
    }exportdefaultButton; // Don't forget to use export default!

    DangerButton.js

    importReact, { Component } from'react';importButtonfrom'./Button'; // Import a component from another fileclassDangerButtonextendsComponent {
     render() {
     return<Button color="red"/>;
     }
    }exportdefaultDangerButton;

    请注意缺省和命名导出类型之间的差异。 这是一个常见的错误来源。

    建议你仅在 MODULE 仅导出单个内容时使用默认导入和导出。 这就是使用 export default Button 时得到的结果 import Button from './Button'

    命名导出对于导出多个函数的实用模块非常有用。 MODULE 最多可以有一个默认导出和多个名为导出的导出。

    了解有关ES6模块的更多信息:

    添加样式表

    这里项目设置使用 web pack 来处理所有资产。 webdav提供了一个定制的方法,它可以超越JavaScript的概念。 要表示JavaScript文件依赖于CSS文件,你需要从JavaScript文件中收取

    Button.css
    .Button {
     padding: 20px;
    }
    Button.js
    importReact, { Component } from'react';import'./Button.css'; // Tell Webpack that Button.js uses these stylesclassButtonextendsComponent {
     render() {
     // You can use them as regular CSS stylesreturn<div className="Button"/>;
     }
    }

    这是不需要的,但许多人发现这个特性很方便。 你可以在这里阅读这种方法的好处( ) 。 但是,你应该注意到,这使得代码的LESS 可以移植到其他构建工具和环境,。

    在开发过程中,这样表达依赖性可以以使你的样式在编辑时被重新加载。 在生产中,所有CSS文件将被连接到构建输出中的一个简单的.css 文件中。

    如果你关心使用 web pack特定语义,你可以将所有的CSS直接放到 src/index.css 中。 它仍然可以以从 src/index.js 导入,但如果你稍后迁移到它的他构建工具,则可以以移除该导入。

    发布过程 CSS

    这个项目设置缩小你的CSS,并通过 Autoprefixer自动添加供应商前缀,这样你就不必担心它。

    例如:

    .App {
     display: flex;
     flex-direction: row;
     align-items: center;
    }

    变成:

    .App {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
    }

    目前不支持 preprocessors,比如 LESS,也不支持跨CSS文件共享变量。

    添加图像和字体

    使用 web pack,使用像图像和字体这样的static 资产类似于 CSS 。

    你可以在一个JavaScript模块中对图像进行英镑的。 这告诉 web pack在包中包含该图像。 导入图像或者字体与CSS导入不同,你可以输入字符串值。 此值是你可以在代码中引用的final 图像路径。

    以下是一个示例:

    importReactfrom'react';importlogofrom'./logo.png'; // Tell Webpack this JS file uses this imageconsole.log(logo); ///logo.84287d09.pngfunctionHeader() {
     // Import result is the URL of your imagereturn<img src={logo} alt="Logo"/>;
    }exportdefaultfunction Header;

    在CSS中也适用:

    .Logo {
     background-image: url(./logo.png);
    }

    webdav在 CSS ( 他们从 ./ 开始) 中查找所有 relative MODULE 引用,并用已经编译包的final 路径替换它们。 如果输入错误或者意外的delete 文件,就会看到编译错误,就像导入不存在的JavaScript MODULE 一样。 编译包中的final 文件名由 web pack从内容散列生成。 如果将来的文件内容发生变化,web of将在生产中提供不同的NAME,因这里不需要担心长期缓存。

    请注意,这也是 web service的一个自定义特性。

    React,但许多人喜欢它,。 但是,它可能无法移植到其他环境,如 node.js 和 Browserify 。 如果你希望以更加传统的方式引用 static 资产,请让我们知道这个问题中的,我们将考虑对这个问题进行支持。

    安装反应 Bootstrap

    你不必使用反应 Bootstrap 和反应,但是它是一个流行的库,用于集成 Bootstrap 反应应用程序。 如果需要,可以按照以下步骤将它的与创建 React App 集成:

    步骤 1安装响应和 Bootstrap 。 响应 Bootstrap 不包括 Bootstrap CSS,所以需要安装它。

    npm install react-bootstrap --save
    npm install bootstrap@3 --save

    步骤 2导入CSS和可选的Bootstrap 主题CSS在 index.js 文件中。

    import './index.css';
    import 'bootstrap/dist/css/bootstrap.css';
    import 'bootstrap/dist/css/bootstrap-theme.css';

    步骤 3导入需要在文件或者自定义组件文件中响应 Bootstrap 组件。

    import React, { Component } from 'react';
    import { Navbar, Jumbotron, Button } from 'react-bootstrap';

    现在可以使用在render方法中定义的组件层次结构中导入的响应 Bootstrap 组件了。 下面是一个示例 App.js 使用响应 Bootstrap 进行重做。

    ### 在编辑器中显示Lint输出

    注意:这里功能可以用于 react-scripts@0.2.0 和更高版本。

    一些编辑器,包括 sublime text 。Atom 和 Visual Studio 代码,为ESLint提供插件。

    它们不是linting所必需的。 你应该在终端和浏览器控制台中看到linter输出。 但是,如果你喜欢lint结果显示在编辑器中,那么你可以执行一些额外的步骤。

    你需要首先为你的编辑器安装一个ESLint插件。
    然后确保项目的package.json 以以下块结束:

    {
     //.. ."eslintConfig": {
     "extends":"./node_modules/react-scripts/config/eslint.js" }
    }

    react-scripts@0.2.0 和更高版本生成的项目应该已经有了。
    如果不需要与编辑器集成,可以安全地将这三行代码从你的package.json 中提取。

    最后,你将需要安装一些软件包全局:

    npm install -g eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype

    我们认为这是非常优先的,但是当我们隐藏ESLint依赖关系时,它当前是必需的。 ESLint团队已经在处理这个问题的解决方案,因此在几个月内可能会不必要。

    添加流

    流类型当前不支持box使用流生成默认 .flowconfig 。 如果运行它,可能会出现如下错误:

    node_modules/fbjs/lib/Deferred.js.flow:60
     60: Promise.prototype.done.apply(this._promise, arguments);
     ^^^^ property `done`. Property not found in
    495: declare class Promise<+R> {
     ^ Promise. See lib:/private/tmp/flow/flowlib_34952d31/core.js:495
    node_modules/fbjs/lib/shallowEqual.js.flow:29
     29: return x!== 0 || 1/(x: $FlowIssue) === 1/(y: $FlowIssue);
     ^^^^^^^^^^ identifier `$FlowIssue`. Could not resolve name
    src/App.js:3
     3: import logo from './logo.svg';
     ^^^^^^^^^^^^./logo.svg. Required module not found
    src/App.js:4
     4: import './App.css';
     ^^^^^^^^^^^./App.css. Required module not found
    src/index.js:5
     5: import './index.css';
     ^^^^^^^^^^^^^./index.css. Required module not found

    若要修复这里问题,请更改 .flowconfig 以如下所示:

    [libs]
    ./node_modules/fbjs/flow/lib
    [options]
    esproposal.class_static_fields=enable
    esproposal.class_instance_fields=enable
    module.name_mapper='^(.*).css$' -> 'react-scripts/config/flow/css'
    module.name_mapper='^(.*).(jpg|png|gif|eot|svg|ttf|woff|woff2|mp4|webm)$' -> 'react-scripts/config/flow/file'
    suppress_type=$FlowIssue
    suppress_type=$FlowFixMe

    运行流,你不应该得到任何额外的问题。

    在以后的eject 中,你需要用 <PROJECT_ROOT> 占位符替换 react-scripts 引用,例如:

    module.name_mapper='^(.*).css$' -> '<PROJECT_ROOT>/config/flow/css'
    module.name_mapper='^(.*).(jpg|png|gif|eot|svg|ttf|woff|woff2|mp4|webm)$' -> '<PROJECT_ROOT>/config/flow/file'

    我们将考虑将来更紧密地与流程集成,这样你就不必这样做了。

    部署

    页面

    注意:这里功能可以用于 react-scripts@0.2.0 和更高版本。

    首先,打开 package.json 并添加 homepage 字段。 它可能是这样的:

    {
     "name":"my-app",
     "homepage":"http://myusername.github.io/my-app",
     //.. .}

    现在,每当运行 npm run build 时,都会看到一个备忘单,用于部署到GitHub页面的命令序列:

    git checkout -B gh-pages
    git add -f build
    git commit -am "Rebuild website"git push origin :gh-pages
    git subtree push --prefix build origin gh-pages
    git checkout -

    你可以复制并粘贴它们,或者将它们放入定制的shell script 。 你还可以为其他宿主提供程序自定义它们。

    注意,GitHub页面不支持在幕后使用HTML5历史记录API的路由器。 这是因为当有一个新的网页加载的url时, http://user.github.io/todomvc/todos/42/todos/42 是前端路由器,因为它不知道 /todos/42,所以GitHub页面服务器返回 404. 如果要将路由器添加到GitHub页上托管的项目中,下面是一些解决方案:

    • 你可以使用 switch 历史API来传送散列。 在这个效果中,你可以使用响应路由器来实现这个效果,但是URL会更长更详细( 比如, http://user.github.io/todomvc/#/todos/42?_k=yknaj ) 阅读有关响应路由器中不同历史实现的更多信息。
    • 或者者,你可以以使用一个技巧来使用一个特殊的重定向参数来教程 index.html 页面处理 404. 将项目部署到 build 文件夹之前,需要添加带有重定向代码的404.html 文件,并且需要添加代码处理重定向参数到 index.html 。 你可以在本指南中找到这个技术的详细说明。
    Heroku

    使用 Heroku Buildpack进行create-react-app操作。

    丢失了?

    如果你想了解更多关于这个页面的"如何"食谱,请让我们知道或者贡献一些




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语