DOS> cd hello
DOS> npm install styled-components --save
+ styled-components@5.0.1
added 12 packages from 10 contributors and audited 921154 packages in 57.533s
DOS> npm i react-simple-chatbot --save
+ react-simple-chatbot@0.6.1
added 159 packages from 124 contributors and audited 2238 packages in 76.088s
DOS> notepad src/index.js
DOS> notepad public/index.html
DOS> npm start
DOS> npm run build
DOS> heroku login
DOS> git add .
DOS> git commit -m "react-create-app on Heroku" (เพียง 5 แฟ้ม เฉพาะที่ปรับ)
DOS> git push heroku master
DOS> heroku open
DOS> notepad public/index.html
<!DOCTYPE html><
html
><
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1, minimal-ui"
>
<
title
>React Simple ChatBot</
title
>
</
head
><
body
><
div
id
=
"root"
></
div
><
script
src
=
"bundle.js"
></
script
></
body
>
</
html
>
DOS> notepad src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import ChatBot from 'react-simple-chatbot';
const steps = [
{id: '1',message: 'Hello World! From Fulk CS-NTU Lampang. What is your name?', trigger: '2',},
{id: '2',user: true,trigger: '3',},
{id: '3',message: 'Hi {previousValue}, nice to meet you!',trigger: '4',},
{id: '4',message: 'Please type a number',trigger: '5',},
{id: '5',user: true,validator: (value) => {
if (isNaN(value)) {return 'value should be a number';}
return true;
},trigger: '4',},
];
ReactDOM.render(<
div
><
ChatBot
steps={steps} /></
div
>,document.getElementById('root'));