react中使用构建缓存_如何使用React构建Chatbot

react中使用构建缓存

My philosophy is simple. To become good at something, you need to do it a lot.

我的哲学很简单。 要变得擅长某件事，您需要做很多事情。

It's not enough to do it once. You need to do it again, and again and again. It will never end. I used the same philosophy to get good at programming.

仅做一次是不够的。 您需要一次又一次地这样做。 它永远不会结束。 我使用相同的哲学来擅长编程。

One thing I've noticed on this journey is that it's a lot more fun to build things that are interesting, and that look good. Things you can show you friends and be proud of. Something that makes you excited to get started when you sit down in front of your keyboard.

我在此过程中注意到的一件事是，构建有趣且看起来不错的东西会更加有趣。 您可以向朋友展示并为之骄傲的事物。 当您坐在键盘前时，会让您兴奋的开始。

That's why I built a chatbot.

这就是为什么我建立了一个聊天机器人。

Which morphed into a npm package.

变成了npm包。

So let's build one together. If you want to take on this challenge on your own, you can go directly to the documentation (which is actually a chatbot). Or, if you are a visual learner, I created a tutorial on YouTube.

因此，让我们一起构建一个。 如果您想独自承担这个挑战，则可以直接转到文档(实际上是一个聊天机器人) 。 或者，如果您是视觉学习者，那么我在YouTube上创建了一个教程。

Otherwise, let's go. I'm going to assume that you have Node installed, and access to the npx command. If not, go get it here.

否则，我们走吧。 我将假定您已安装Node，并可以访问npx命令。 如果没有， 请在这里获取。

最初设定 (Initial setup)

// Run these commands from your command line
npx create-react-app chatbot
cd chatbot
yarn add react-chatbot-kit
yarn start

This should install the npm package and open the development server at localhost:3000.

这应该安装npm软件包并在localhost：3000处打开开发服务器。

Next head over to App.js and make these changes:

接下来转到App.js并进行以下更改：

import Chatbot from 'react-chatbot-kit'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Chatbot />
      </header>
    </div>
  );
}

Great job. We're getting there. You should see this in your development server now:

很好。 我们到了。 您现在应该在开发服务器中看到以下内容：

The chatbot takes three props that must be included for it to work. First, it needs a config which must include an initialMessages property with chatbot message objects.

聊天机器人需要包含三个道具才能正常工作。 首先，它需要一个配置，该配置必须包含带有chatbot消息对象的initialMessages属性。

Secondly, it needs a MessageParser class that must implement a parse method.

其次，它需要一个必须实现解析方法的MessageParser类。

Thirdly, it needs an ActionProvider class which will implement actions that we want to take based on parsing the message.

第三，它需要一个ActionProvider类，该类将基于解析消息来实现我们要执行的操作。

We'll go deeper into this later. For now, go here to get the boilerplate code to get started.

我们稍后将对此进行更深入的研究。 现在， 请转到此处获取样板代码以开始使用。

• Put the MessageParser code in a file called MessageParser.js

  将MessageParser代码放入一个名为MessageParser.js的文件中

• Put the ActionProvider code in a file called ActionProvider.js

  将ActionProvider代码放入名为ActionProvider.js的文件中

• Put the config code in a file called config.js

  将配置代码放入名为config.js的文件中

When that's done, go back to your App.js file and add this code:

完成后，返回您的App.js文件并添加以下代码：

import React from 'react';
import Chatbot from 'react-chatbot-kit'
import './App.css';

import ActionProvider from './ActionProvider';
import MessageParser from './MessageParser';
import config from './config';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Chatbot config={config} actionProvider={ActionProvider} 	    messageParser={MessageParser} />
      </header>
    </div>
  );
}

You should now see this on localhost:3000:

您现在应该在localhost：3000上看到以下内容：

Sweet. Now we have the chatbot rendered to the screen and we can write in the input field and submit it to se