Learn Frontend Development with React.js
Tags: react, frontend, raftlabs, software
Published: 2022-03-01 08:07:20

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3r6psg0j0quyime5kgy.png)
React (also known as React.js or ReactJS) is a free and open-source frontend JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

The best resources to learn React.js are as follows:‍

#### **1\. React Tutorial for Beginners**

YouTube video for React Beginners. It is a 2+ hour-long video covering all the basics of react.js starting from scratch. All critical aspects like react components, react hooks, dynamic rendering using maps, event handling, props passing, etc., are covered --- overall, an excellent tutorial and a reference video for starting one's career in frontend development. Basic knowledge of JavaScript and Node.js is required.

Resource created by Mosh Hamedani.

[More info](https://www.youtube.com/watch?v=Ke90Tje7VS0)

#### **2\. Awesome-React**

It is a collection of everything related to React ecosystem. Awesome react a GitHub repo with a readme file that contains links to every react utility. An excellent reference for experienced and advanced developers to find what they are looking for.

Resource created by enaqx

[More info](https://github.com/enaqx/awesome-react#react)

#### **3\. Building a chat app with React and Chatkit**

Coursework that guides viewers to build a chat app using React and chat kit. Before taking this course, viewers should understand HTML, CSS, JavaScript, and React. The coursework covers many concepts concerning React, including props passing, JSX, class components, etc.

Resource created by Per Harald Borgen

[More info](https://github.com/enaqx/awesome-react#react)

#### **4\. ReactJS tutorial for Beginners**

YouTube playlist for beginners to learn react.js basics. The playlist contains 34 videos that cover most of the react.js concepts. The playlist also includes a video that features react.js interview questions. A basic understanding of JavaScript and Node.js is recommended.

Resource created by codevolution

[More info](https://www.youtube.com/playlist?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3)

#### **5\. Building a Yelp Clone**

An article that step-by-step guides its readers to build a yelp clone. Yelp's website, Yelp.com, is a crowd-sourced local business review and social networking site. The site has pages devoted to individual locations, such as restaurants or schools, where Yelp users can submit a review of their products or services using a one to the five-star rating scale. Businesses can also update contact information, hours, and other basic listing information or add special deals. In addition to writing reviews, users can react to reviews, plan events, or discuss their personal lives.

Resource created by Ari Lerner.

[More info](https://www.newline.co/fullstack-react/articles/react-tutorial-cloning-yelp/)

#### **6\. Tutorial: Intro to React**

This tutorial doesn't assume any existing React knowledge. It shows how to build an interactive tic-tac-toe game with React.\
The tutorial is divided into several sections:

-   [Setup for the Tutorial](https://reactjs.org/tutorial/tutorial.html#setup-for-the-tutorial) will give you a starting point to follow the tutorial.
-   [Overview](https://reactjs.org/tutorial/tutorial.html#overview) will teach you the fundamentals of React: components, props, and state.
-   [Completing the Game](https://reactjs.org/tutorial/tutorial.html#completing-the-game) will teach you the most common techniques in React development.
-   [Adding Time Travel](https://reactjs.org/tutorial/tutorial.html#adding-time-travel) will give you a deeper insight into the unique strengths of React.

[More info](https://reactjs.org/tutorial/tutorial.html)

‍

*Originally posted at* [*raftlabs.co*](https://raftlabs.co/development/top-5-free-resources-to-learn-react-js?utm_source=devto&utm_campaign=crosspost)