react 对象克隆_使用React和ElasticSearch构建一个Airbnb克隆

react 对象克隆

Alright, alright, alright. I heard you like React, and Airbnb, but what is this Elasticsearch thing I'm talking about. Don't worry. This blog post will give you a kickstart in understanding the basics of Elasticsearch - What is it? Why should you care about it? and, how can you use it with React to build powerful apps painlessly.

好吧好吧好吧 我听说您喜欢React和Airbnb，但我所说的Elasticsearch是什么。 不用担心 这篇博客文章将为您提供一个了解Elasticsearch基础的起点-这是什么？ 你为什么要关心它？ 以及如何与React一起使用它来轻松构建强大的应用程序。

What is Elasticsearch and why should you care about it?

什么是Elasticsearch？为什么要关心它？

Elasticsearch is a super fast open-source full-text search engine. It allows you to store, search, and analyze big volumes of data quickly (we are talking milliseconds here). It is generally used as the underlying engine/technology that powers applications that have complex search features and requirements. You can read more about it here.

Elasticsearch是一个超快速的开源全文搜索引擎 。 它使您可以快速存储 ， 搜索和分析大量数据（此处我们以毫秒为单位）。 它通常用作支持具有复杂搜索功能和要求的应用程序的基础引擎/技术。 您可以在此处了解更多信息。

With Elasticsearch, you can build build a fast search utilizing its powerful query DSL. However, setting up elasticsearch correctly requires a lot of work. For instance, the data mapping, analyzers and tokenizers need to be set correctly or you may not receive accurate search results back. Besides, the more filters that get applied along with the search query, the more complex the resulting search query becomes.

借助Elasticsearch，您可以利用其强大的查询DSL构建快速搜索。 但是，正确设置弹性搜索需要大量工作。 例如，数据映射，分析器和标记器必须正确设置，否则您可能无法收到准确的搜索结果。 此外，与搜索查询一起应用的过滤器越多，结果搜索查询将变得越复杂。

We, at Appbase, have built some open-source tools to help you do all these things with the matter of some clicks.

我们在Appbase上建立了一些开源工具，可以帮助您完成一些点击操作。

• Tool to add data into Elasticsearch - Importer
  将数据添加到Elasticsearch的工具- 导入器
• Tool to view Elasticsearch data like an excel sheet - Data Browser
  像Excel工作表一样查看Elasticsearch数据的工具- 数据浏览器
• Tool to generate relevant Elasticsearch queries easily - Query Builder
  轻松生成相关Elasticsearch查询的工具- 查询生成器

In this blog post, with the help of some of these tooling, we will utilize the strengths of Elasticsearch with React to build powerful apps.

在此博客文章中，在其中一些工具的帮助下，我们将利用Elasticsearch和React的优势来构建功能强大的应用程序。

How to use Elasticsearch with React?

如何在React中使用Elasticsearch？

We will be using - ReactiveSearch, an open-source React UI components library for Elasticsearch that I am a contributor to. It offers a range of highly customizable rich UI components that can connect with any Elasticsearch server and provide you an appropriate default search query for all generic use-cases (like Ecommerce, Yelp, Meetups, etc) bundled into these components.

我们将使用- ReactiveSearch ，一个开源阵营的UI组件库Elasticsearch，我是一个贡献者。 它提供了一系列高度可定制的丰富UI组件，它们可以与任何Elasticsearch服务器连接，并为您绑定到这些组件中的所有通用用例（例如，电子商务，Yelp，Meetups等）提供适当的默认搜索查询。

Wait, why do I need ReactiveSearch now?

等等，为什么我现在需要ReactiveSearch？

ReactiveSearch simplifies the entire process of connecting to an elasticsearch index, making queries, fetching and rendering results in sleek UI, not just that, it also lets you make your components talk to each other, i.e. if Component-A gets updated, Component-B gets to know and it can update itself without needing any manual interaction.

ReactiveSearch简化了连接到Elasticsearch索引，在光滑的UI中进行查询，获取和呈现结果的整个过程，不仅如此，它还使您能够使组件彼此对话，即，如果Component-A得到更新，则Component-B知道了，它可以更新自己，而无需任何手动交互。

This whole component-to-component subscription comes in handy when you have dynamic filters present on your screen, such as in case of E-commerce apps where Selecting a category of Appliances, also changes the sub-categories available, their prices and what not.

当您在屏幕上显示动态过滤器时，例如在“电子商务”应用程序中选择“设备类别”也会更改可用的子类别，其价格以及不更改哪些子类别时，整个组件到组件的订阅将非常有用。 。

ReactiveSearch helps you create significantly smarter apps easily and in a declarative fashion.

ReactiveSearch可帮助您以声明性方式轻松创建智能得多的应用程序。

Even if you’ve never used Elasticsearch before you should be able to follow along with this blog post and build your very own Elasticsearch powered search UI using ReactiveSearch.

即使您从未使用过Elasticsearch，也应该能够继续阅读本博文，并使用ReactiveSearch构建自己的Elasticsearch驱动的搜索UI。

Here is an example that generates a searchbox UI with some suggestions as you type.

这是一个示例，该示例会在您键入时生成带有一些建议的搜索框用户界面。

<DataSearch
    componentId="search"
    dataField="name"
    placeholder="Search housings..."
    iconPosition="left"
/>

我们需要的东西 ( Things we will need )

In order to build an Airbnb-like search application, we will need a set of things before we get started with writing actual code:

为了构建类似于Airbnb的搜索应用程序，在开始编写实际代码之前，我们需要做一些准备工作：

• Dataset for Airbnb housing properties - We found an amazing dataset for Airbnb Seattle at https://www.kaggle.com/airbnb/seattle which we will be using for our app in this tutorial.

  Airbnb房屋属性的数据集 -我们在https://www.kaggle.com/airbnb/seattle上找到了一个很棒的Airbnb Seattle数据集，我们将在本教程中将其用于我们的应用程序。

• Elasticsearch hosting - You can set up and install an Elasticsearch server by following the official installation guide, or you can create a free account at appbase.io which provides Elasticsearch hosting as a service and is easy to use. For simplicity, we will be using appbase.io service to get started with.

  Elasticsearch托管 -您可以按照官方安装指南来设置和安装Elasticsearch服务器，也可以在appbase.io上创建一个免费帐户，该帐户将Elasticsearch托管作为服务提供并且易于使用。 为简单起见，我们将使用appbase.io服务开始使用。

I've already created an appbase app with airbnb data-set. You can check out the cleaned up dataset over here in the data browser tool:

我已经使用airbnb数据集创建了一个appbase应用程序。 您可以在此处使用数据浏览器工具检出清理后的数据集：

The credentials of the above app are:

上面的应用程序的凭据是：

app="housing"
credentials="0aL1X5Vts:1ee67be1-9195-4f4b-bd4f-a91cd1b5e4b5"
type="listing"

You can clone this dataset and generate credentials for your very own app by clicking on the Clone this app button on the bottom left.

您可以通过单击左下方的“ 克隆此应用程序”按钮来克隆此数据集并为您自己的应用程序生成凭据。

建立 ( Setup )

If you have tried out the Create React App before, you will feel right at home as we build this app.

如果您以前尝试过Create React App ，那么在我们构建此应用程序时，您会感到宾至如归。

Create React App

创建React应用

Initialize the CRA setup. We will use yarn as the package manager, you can also use npm instead.

初始化CRA设置。 我们将使用yarn作为包管理器，也可以使用npm代替。

yarn global add create-react-app
create-react-app airbedscd airbeds
yarn start

One of the great benefits of using CRA is that it works without requiring to set up a build configuration.

使用CRA的一大好处是，它无需设置构建配置即可工作。

At this point, you should have a directory structure similar to this:

此时，您应该具有类似于以下的目录结构：

airbeds
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── yarn.lock
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Install reactivesearch

安装reactsearch

Next, we will install ReactiveSearch.

接下来，我们将安装ReactiveSearch。

yarn add @appbaseio/reactivesearch@2.16.1

(Note: This post is compatible with ReactiveSearch v2, hence the use of 2.16.1 version. v3 has a very different syntax structure, I will update this post at a later point to work