DEV Community

Chris Achinga
Chris Achinga

Posted on

Beginner React/Messenger Tutorials: 2020 Developer Circles Community Challenge

Beginner React/Messenger Tutorials: 2020 Developer Circles Community Challenge

On September 10th, 2020, Facebook Developers announced the 2020 Developer Circles Community Challenge.

The challenge was on creating tutorials for using any of Facebook's open-source products.

Submissions were really great and once again appreciating and stressing on the importance of developer communities.

I have gone through the regional and global submission winners and I'd love to highlight all React-based tutorials for beginners.

Here is the list:
(No particular order was followed here :-) )

HayWord | Case Study for Making Real Word Chatbot Messenger

The tutorial guides on creating a Messenger chatbot using Wit.AI with a web interface (using React). A good one for learning integration of the various products by Facebook.

Read Tutorial

Source Code

%[https://www.youtube.com/watch?v=MiOWs0DdRvc&feature=youtu.be]

Calendar buddy

The tutorial is about an application that allows a user to ask questions about his/her calendar items. The application will provide suggestions, even when the user hasn't finished typing a full question. This way, the application proactively proposes the answer to the user's question.

Read Tutorial

Source Code

Live Demo

React Custom Animation Hooks Tutorial

This tutorial gives a guide on how to use react hooks to animate components of a page.

Read Tutorial

Source Code

live preview

%[https://codesandbox.io/s/simple-animation-hook-ltzb7?file=/src/animation.js]

Documenting with Docusaurus Version 2 for beginners

Docusaurus is an open-source static site generator for documentation of projects that runs on React.

This repository will show you a step by step tutorial on how to work with Docusaurus version 2 to display your information in a more orderly way using the markdown language.

Read Tutorial

Source Code

live demo

%[https://www.youtube.com/watch?v=OkMr8jmLyKU]

Chatbot For Class

This tutorial guides you in creating a Messenger chatbot using Wit.ai that

Creating a COVID-19 info Chatbot for Facebook Messenger with Wit.ai
You are going to create a Facebook Messenger Chatbot in this tutorial, which will inform users whether it's safe to perform a certain activity during the COVID-19 pandemic.

Read Tutorial

Source Code

%[https://www.youtube.com/watch?v=TF0dnHiiUzg&feature=youtu.be]

Getting Started with React Hooks: useState and useEffect

The tutorial has a number of practical examples on how to get started with React Hooks

Read Tutorial

Source Code

demo

Live Chess

Learn JavaScript, React, Node.js, and Socket.io by creating an online multiplayer chess game.

Read Tutorial

Source Code

demo

Well, that's pretty much it. You can find the official announcement on submissions

Top comments (0)