Beginner React/Messenger Tutorials: 2020 Developer Circles Community Challenge
Published: 2021-03-16 09:13:22

---
title: Beginner React/Messenger Tutorials: 2020 Developer Circles Community Challenge
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
## Beginner React/Messenger Tutorials: 2020 Developer Circles Community Challenge

On September 10th, 2020,   [Facebook Developers announced the 2020 Developer Circles Community Challenge](https://developers.facebook.com/blog/post/2020/09/10/welcome-our-2020-developer-circles-community-challenge/).

The challenge was on creating tutorials for using any of  [Facebook's open-source](https://opensource.facebook.com/)  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](https://dimasna.github.io/Tutorial-HayWord-Messenger-Wit.ai-ReactJS/)

[Source Code](https://github.com/dimasna/Tutorial-HayWord-Messenger-Wit.ai-ReactJS)

%[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](https://github.com/WardMaes/fb-community-challenge-2020/blob/master/README.md)

[Source Code](https://github.com/WardMaes/fb-community-challenge-2020)

[Live Demo](https://fb-community-challenge-2020.vercel.app/)

## React Custom Animation Hooks Tutorial

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

[Read Tutorial](https://github.com/AleenaCodes/CustomReactHooksTutorial/blob/main/README.md)

[Source Code](https://github.com/AleenaCodes/CustomReactHooksTutorial)

[live preview](https://codesandbox.io/s/simple-animation-hook-ltzb7?file=/src/animation.js)


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

## Documenting with Docusaurus Version 2 for beginners

[Docusaurus](https://v2.docusaurus.io/) 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](https://github.com/dochavez/Documenting-with-Docusaurus-V2.-/blob/gh-pages/README.md)

[Source Code](https://github.com/dochavez/Documenting-with-Docusaurus-V2.-)

[live demo](https://dochavez.github.io/Documenting-with-Docusaurus-V2.-/)

%[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](https://chatbot-for-class.com/)

[Source Code](https://github.com/romanenko/covid19-safety-information)


%[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](https://hulyak.github.io/react-tutorial/)

[Source Code](https://github.com/hulyak/react-tutorial-beginner)

[demo](https://react-tut-beginner.netlify.app/)

## Live Chess

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

[Read Tutorial](https://stack-chess-tutorial.netlify.app/)

[Source Code](https://github.com/franknmungai/live-chess)

[demo](https://stack-chess.netlify.app/)


[Well, that's pretty much it. You can find the official announcement on submissions](https://developers.facebook.com/blog/post/2020/11/18/2020-developer-circles-community-challenge-regional-winners-announced/)