Logo Awesome React

Awesome React

Chat Bots, React, and a Cucumber

  • Details
During this session, I will live code a fully working chatbot from scratch using React, Redux, and real-world best practices. All that while eating a giant cucumber.

CONTENTS

0:04 - Intro
0:14 - Agenda

== PREPARATIONS ==
0:49 - create-react-app
2:21 - Cleaning up project
3:36 - Adding dependencies
4:20 - Adding milligram.io

== DIAGFLOW ==
5:04 - Exploring Diagflow
5:41 - Creating a new agent
6:57 - Small Talk
8:15 - Creating a Text Intent
10:07 - Integration into app, auth token

== REDUX ==
10:30 - Note About Redux
10:54 - Starting with Redux
12:16 - Adding Action creator
14:14 - Redux workflow note
13:33 - Adding Reducer
14:13 - Note about Actions
16:48 - Adding Middleware
17:29 - Importing API AI SDK
22:11 - Question: dispatch vs next
23:04 - Redux summary
23:57 - Adding Store
24:56 - Hooking up react-redux
28:14 - Question: Mapping dispatch
29:30 - Markup
30:48 - Init state
31:25 - Question: Iterating list items without key
33:30 - Adding Milligram styles
34:13 - Try the app in action
34:59 - Summary

== FIREBASE ==
34:43 - Firebase overview
36:37 - Create a project
37:30 - Storage service
37:57 - App hosting
39:11 - Firebase deploy
40:06 - Firebase JSON

40:14 - Talk summary

RESOURCES

Redux
https://redux.js.org/

Diagflow
https://dialogflow.com/


A minimalist CSS framework
https://milligram.io/

Firebase
https://firebase.google.com/