Tutorials to React JS and Redux JS

To contribute to ClassTranscribe's Front-End, it is important to acquaint yourself with React JS and Redux JS. Here are some useful tutorials that can help you get started.

1. React JS
2. Redux JS

Getting Started With React JS

Core React Documentations

Before you start, please go through the main concepts of React.

Here is a list of noteworthy sections in the Docs:

• Components and Props
• State and Lifecycle
• Handling Events
• Typechecking With PropTypes
• Hooks
  • useState
  • useEffect

Simple Examples

After reading the docs, we can get started with some simple examples. Here is an official React tutorial that could give you some ideas on how React works. But this demo is using Class Component which is NOT recommended by principles of single responsibility in React. The Function Component is much easier to read and test.

YouTube Tutorials (Recommended)

There is a great React JS tutorial on YouTube, ReactJS Tutorial for Beginners. The first 43 videos in this playlist will give you a concept about the basic usage of React. Starting at the 44th video, it begins to talk about using React Hooks in Function Components (which has been used a lot in this front-end).

Codes in ClassTranscribe

If you want to have a glance at the React code of ClassTranscribe, please check out the following ones (these pages are relatively new, i.e. having a higher quality):

Simple Ones (Recommended)

• src/screens/History - Histories browsing page.
• src/screens/Search - Search courses page.
• src/screens/Course - The course detail page.

Complex Ones

• src/screens/MediaSettings - the page used for instructors/staffs to manage medias.
• src/screens/Watch - The video watch page.
• src/screens/Instructor - The page used for instructors to manage their courses.

Getting Started With Redux JS

Redux JS Tutorials

It is not necessary to read all the documentation of React-Redux. You can be quickly on board by going through this YouTube tutorial React Redux Tutorial. It will provide you a brief concept about what is Redux and how to use it in a React App.

Codes in ClassTranscribe

Also, to know how we are using Redux in ClassTranscribe, please check out this directory src/redux

Next Steps

Please choose one of the following wikis to set up the Front-End on your machine.

• Run ClassTranscribe Front-End (Front-End Only, No Docker)
• Run Full-Stack ClassTranscribe (With Docker)