Ultimate ReactJS Resources 🛠For Web Developers 2024👨‍💻
Tags: react, webdev, javascript, beginners
Published: 2021-09-24 12:51:59

Looking for helpful ReactJS Resources? Then here is the best collection of extremely useful ReactJS resources. Before we start the list let's get to know about ReactJS in short.

## What Is ReactJS?

![ReactJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85cp3owyaadwvu3tb1lm.png)

As we all know,  [**React**](https://reactjs.org/) is one of the best sources to create an interface for web applications. Moreover, React dashboards also have more advanced user interfaces.

React is an open-source, front-end, JavaScript library for building user interfaces or UI components. It is maintained by  [Facebook](https://www.facebook.com/)  and a large community of individual developers and companies. Also, It has proven to be one of the best libraries in recent years for component-based GUI development.

React helps you to create an interactive user interface easily. No matter how complicated the data is, you can easily create interactive charts and UI elements smoothly with the ReactJS. Since it is created and maintained by the Facebook and Instagram community, you needn’t worry about the quality of how well it manages the complex codes.

In addition, The major advantage of ReactJS is the option to render and view the components easily. It ensures readability and makes maintainability more comfortable.

While working with React.js it is advisable to use the [React Admin Templates](https://themeselection.com/item/category/react-admin-templates/)

**Reasons behind the popularity of ReactJS.**

-   Easy creation of dynamic applications
-   Reusable components
-   Improved performance
-   Small learning curve
-   Dedicated tools for easy debugging
-   Unidirectional data flow

If you are working with ReactJS then check the collection of  **[React-redux Admin Template Free](https://themeselection.com/react-redux-admin-templates/)** and  **[Admin Dashboard Template React](https://themeselection.com/item/category/react-admin-templates/)**. Also,  [**ReactJS UI frameworks**](https://themeselection.com/best-reactjs-ui-frameworks/) is a useful collection that you can bookmark.

[![Materio mui react nextjs admin template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo4q5vgy5ahn7flbou98.png)](https://themeselection.com/products/materio-mui-react-nextjs-admin-template/)

## State Of ReactJS

As per the [stack overflow developer survey 2023](https://survey.stackoverflow.co/2023/#section-most-popular-technologies-web-frameworks-and-technologies), React is still the most used and wanted framework. Handled by a tech giant like Facebook, ReactJS remains in the 2nd position followed by jQuery, Angular, and VueJS.

![stack overflow developer survey 2023](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gedwjxry2wvgrcfcfwo.png)

Now, Let's start the collection...!!

![Let's do it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yymtvy8cklm7j3jhyt5c.gif)

---

## ReactJS Resources

Following are some of the useful ReactJS resources that deal with component libraries, examples, projects, tools, and articles regarding ReactJS.

### Official Resources:

- [ReactJS Tutorial](https://reactjs.org/tutorial/tutorial.html)
- [React Official Website](https://reactjs.org/)
- [React Documentation](https://reactjs.org/docs)
- [React GitHub](https://github.com/facebook/react)

### Communities:

- [Reactiflux Discord Channel](http://www.reactiflux.com/)
- [React StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)
- [React Twitter](https://twitter.com/reactjs)

### External Resources:

-   [Reactiflux](https://www.reactiflux.com/)  - A community of 20,000+ React developers. They keep a well-curated [learning section](https://www.reactiflux.com/learning/).
-   [React-Redux Links](https://github.com/markerikson/react-redux-links)  - Mark Erikson’s highly curated list of tutorials and resources for React/Redux/ES6 and more.
-   [Awesome React](https://github.com/enaqx/awesome-react)  - A collection of awesome things regarding the React ecosystem.
-   [Awesome React Components](https://github.com/brillout/awesome-react-components)  - A curated list of React components.
-   [Awesome React Talks](https://github.com/tiaanduplessis/awesome-react-talks)  - A curated list of React talks.
-   [Awesome React Videos](https://www.awesomereact.com/)  - A website highlighting the best React videos.
-   [Hero35 React Hub](https://hero35.com/topic/react)  - A website with all React conferences and talks, categorized & curated.

----

## UI Libraries:
A **UI** component **library** is a (usually) robust set of ready-made **UI** components such as buttons, inputs, dialogs, and so on. They serve as building blocks for layouts. Thanks to their modular nature, we can arrange components in many different ways to achieve unique effects.

### [Material UI(MUI)](https://github.com/mui-org/material-ui)  - React components for faster and easier web development

![MUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktwezsbfhlheyc69sj2y.png)

**Material UI now MUI** is a set of components built based on the material design guidelines of Google. It consists of many accessible and configurable UI widgets. Besides, the components are self-supporting and only inject the styles they need to display, which could lead to performance enhancements in your application. Furthermore, Material UI has an active set of maintainers and a strong community. In addition, React components are faster and easier for web development. Thus, it is one of the best ReactJS UI frameworks.

For example, you can check the **[Sneat – MUI React Next.js Admin Template](https://themeselection.com/item/sneat-mui-react-next-js-admin-template/)**. It is the most developer-friendly & highly customizable React Admin Dashboard Template based on **MUI** & **Next JS**. If you are a developer seeking the Best React Admin Template that is feature-rich and extremely configurable, go no further than Sneat.

[![Sneat MUI React NextJS Admin Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldq79l45xuquk88o845n.png)](https://themeselection.com/item/sneat-mui-react-next-js-admin-template/)

Furthermore, one of the top React [**Admin Templates**](https://themeselection.com/item/category/admin-templates/) based on MUI Design is created using the greatest industry standards. t.

**Features:**

-   ReactJS, Next.js, No jQuery Dependency
-   Built with **MUI**
-   Utilizes NextJS, React router
-   Based on **functional components & React hooks**
-   Includes Both **TS & JS Versions** 
-   **AUTH & ACL** Support
-   **Internationalization/i18n & RTL** Ready
-   Code Splitting, Lazy loading & much more

[Demo](https://demos.themeselection.com/sneat-mui-react-nextjs-admin-template/demo-1/dashboards/ecommerce/) [Download](https://themeselection.com/item/sneat-mui-react-next-js-admin-template/)

Also, check the [Django Admin Dashboard](https://themeselection.com/item/category/django-admin-template/) Version:

[![Sneat free django admin template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50mqo31m4fuptp6gutiz.png)](https://themeselection.com/item/sneat-free-bootstrap-html-django-admin-template/)

### [Blueprint](https://github.com/palantir/blueprint)  - A React-based UI toolkit for the webs

![blueprint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j590dddnea5koptizrob.png)

**BlueprintJS** is a React-based UI toolkit for the web. It is optimized for building complex, data-dense web interfaces for desktop applications that run in modern browsers and IE 11. This is not a mobile-first UI toolkit. Besides, the React components in Blueprint are primarily for use on desktop applications.

### [React-bootstrap](https://github.com/react-bootstrap/react-bootstrap)  - Bootstrap components built with React

![React Bootstrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kxpmev7ka02dxh27oab.png)

**React-Bootstrap**  replaces Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery. Besides, as one of the oldest React libraries, React-Bootstrap has evolved and grown alongside React, making it an excellent choice as your UI foundation. In addition, the React component model gives us more control over the form and function of each component. Furthermore, each component is implemented with accessibility in mind. Thus, it is one of the best ReactJS UI frameworks.

### [Reactstrap](https://github.com/reactstrap/reactstrap)  - Simple React Bootstrap 4 components

![Reactstrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prwlr5cp6ns3pk5xb8a8.png)

**Reactstrap** library contains React Bootstrap 4 components that favor control and composition. Besides, this library does not depend on jQuery or Bootstrap JavaScript. However,  [Poppers.js](https://popper.js.org/) via [react-popper](https://github.com/souporserious/react-popper)  is relied upon for advanced positioning of content like Tool-tips, Popovers, and auto-flipping Drop-downs.

### [Ant-design](https://github.com/ant-design/ant-design)  - A design system with values of Nature and Determinacy

![Ant design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezcooqisbdemgz7t8whs.png)

**Ant Design**  React UI library is a design system for enterprise-level products. It’s based on the [Ant Design](https://ant.design/)  project and contains a set of high-quality components and demos for building rich, interactive UIs. Besides, the components include internationalization support for dozens of languages.

### [Chakra-ui](https://github.com/chakra-ui/chakra-ui/)  - Simple, Modular & Accessible UI Components for your React Applications

![Chakra UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76wm3bf64qjrucvvd1sq.png)

**Chakra UI**  is one of the awesome ReactJS UI frameworks. It is a simple, modular, and accessible component library that gives you all the building blocks you need to build your React applications. Besides, Chakra UI strictly follows WAI-ARIA standards. In addition, all components come with proper attributes and keyboard interactions out of the box.

### [Semantic UI React](https://github.com/Semantic-Org/Semantic-UI-React)  - The official Semantic-UI-React integration

![Semantic UI React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58t5u4laf4rtdec4grlf.jpeg)

**Semantic UI**  uses human-friendly HTML for its development framework. It also has integrations with React, Angular, Meteor, Ember, and many other frameworks. Besides, all j Query functionality has been re-implemented in React. Furthermore, it allows you to load any Semantic UI CSS theme on top of your Semantic UI React app. In addition, you’ll also have complete access to the markup, which means there’s flexibility in customizing components.

> For more info check [ReactJS UI Frameworks](https://themeselection.com/best-reactjs-ui-frameworks/)

**Following are some other react UI libraries and frameworks.**

- [Evergreen](https://github.com/segmentio/evergreen) - Evergreen React UI Framework by Segment
- [Fluent UI](https://github.com/microsoft/fluentui) - A set of React components for building Microsoft web experiences
- [Grommet](https://github.com/grommet/grommet) - A react-based framework that provides accessibility, modularity, responsiveness, and themes in a tidy package
- [Rebass](https://github.com/rebassjs/rebass) - React primitive UI components built with styled-system
- [Reakit](https://github.com/reakit/reakit) - Accessible, Composable, and Customizable components for React
- [Rsuite](https://github.com/rsuite/rsuite) - A suite of React components
- [Primereact](https://github.com/primefaces/primereact) - A complete UI Framework for React with 50+ components featuring material, bootstrap and custom themes.
- [Eui](https://github.com/elastic/eui)  - Elastic UI Framework
- [React-spectrum](https://github.com/adobe/react-spectrum) - Adobe's collection of libraries and tools that help you build adaptive, accessible, and robust user experiences
- [React-bulma-components](https://github.com/couds/react-bulma-components)  - React components for Bulma framework
- [Mantine](https://github.com/mantinedev/mantine) – A fully featured React library with 100+ hooks and components with native dark theme support

## Frameworks:

### [Next.js](https://github.com/vercel/next.js) - The React Framework

![Nextjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhudsjw622rqabqr3sjf.png)

**Next.js** is an open-source development framework built on top of Node.js enabling React-based web application functionalities such as server-side rendering and generating static websites. Next.js is widely used by the biggest and most popular companies all over the world like **Netflix, Uber, Starbucks, Twitch, etc.**

### [Gatsby.js](https://github.com/gatsbyjs/gatsby) - Free and open source framework based on React

![Gatsby.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5smjc7i6izelx4cim9fx.png)

**Gatsby** is an open-source framework that combines functionality from React, GraphQL, and Webpack into a single tool for building static websites and apps. Owing to the fast performance of the sites it powers, impressive out-of-the-box features like code splitting, and friendly developer experience, Gatsby is fast becoming a staple of modern web development.

### [React Admin](https://github.com/marmelab/react-admin) - Frontend Framework for building B2B applications

![react admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfltl4sn8hnhjtkaqzqf.png)

A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, [React](https://facebook.github.io/react/) and [Material Design](https://material.io/).

### [Blitz](https://blitzjs.com/) - The Fullstack React Framework

![Blitz](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xcmjo4w9449v75jzjpv.png)

Blitz is a batteries-included framework that's inspired by Ruby on Rails, is built on Next.js, and features a "Zero-API" data layer abstraction that eliminates the need for REST/GraphQL. It also provides helpful defaults and conventions for things like routing, file structure, and authentication while also being extremely flexible.

---

[![Materio free vuetify nuxtjs admin template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9evgudxwobq4m4xmn9r.png)(https://themeselection.com/item/materio-free-vuetify-nuxtjs-admin-template/)

---

## Commercial Projects:

### [Materio – MUI React Next.js Admin Template](https://themeselection.com/products/materio-mui-react-nextjs-admin-template/) (The Best React Admin Template⚡)

[![MUI React Next.js Admin Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rldcnef3t967sb9bvj9y.png)](https://themeselection.com/products/materio-mui-react-nextjs-admin-template/)

[**Materio MUI React Next.js Admin Template**](https://themeselection.com/products/materio-mui-react-nextjs-admin-template/) – is the most developer-friendly 🤘🏻 & highly customizable✨ React Admin Dashboard Template based on **[React](https://reactjs.org/)**.  If you’re a developer looking for the **Best React Admin Template** that is enriched with features, and highly customizable look no further than the Materio 🤩. Besides, the highest industry standards are considered to bring you one of the best **[React Admin Templates](https://themeselection.com/products/category/react-admin-templates/)**. It is not just fast 🚀 and easy to use, but highly scalable. Furthermore, it offers ultimate convenience and flexibility, you’ll be able to build whatever application you want with very little hassle.

Materio also offers invaluable features that aim to help you create premium quality single-page apps exactly as you imagine them🤘🏻. Furthermore, it comes with unique and useful tools such as fuzzy search, Dark, Semi-Dark & Bordered layout options, Advanced cards, and Charts. In addition, it offers amazing features as follows.

**Features:**

-   Built with **Next.js & MUI**
-   Utilizes NextJS, App router
-   SSR Support
-   Includes Both **TS & JS Versions** 🎉
-   AUTH Support
-   **Internationalization/i18n & RTL** Ready
-   Code Splitting, Lazy loading

[Demo](https://demos.themeselection.com/materio-mui-react-nextjs-admin-template/landing/) [Download](https://themeselection.com/products/materio-mui-react-nextjs-admin-template/)

Also, check the **[Asp.NET Core MVC Admin Template](https://themeselection.com/item/category/asp-net-dashboard/)**

[![Materio Asp NET Core MVC Admin Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22605l756f136pa5w7c8.png)](https://themeselection.com/item/materio-free-aspnet-core-mvc-admin-template/)

---

[![Sneat Asp.NET Core Admin Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fva24tm04vlmjs2fw9ye.png)](https://themeselection.com/item/sneat-aspnet-core-admin-template/)

---

### [Vuexy - Vuejs, React - Next.js, HTML, Laravel & Asp.Net Admin Dashboard Template](https://1.envato.market/vusax_admin)

![Vuexy react admin template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1he2jvebmtlz58spqmjl.png)

**Vuexy React** is the most developer-friendly & highly customizable **React Admin Template.** It is based on **Create React App**, **NextJS**, **Redux-Toolkit** & **MUI**. Furthermore, this template is a beautifully crafted, clean & modern designed admin theme. Also, it works on different workable applications including Todo, Chat, and eCommerce. Besides, Vuexy Admin provides advanced cards for eCommerce, Analytics, Statistics, Weather, Charts, Maps, and Interactive. This amazing template provides 100+ pages including Profile, Knowledge Base, Search, Authentication, etc.

Besides, this template is also RTL-ready and comes with UI/UX tools alongside many more amazing invaluable features. Furthermore, it comes with many useful tools such as fuzzy search, bookmarks, floating nav bar, dark and semi-dark layout options, advance cards, data tables, and charts. For instance, you can create: SaaS platforms, and it has ready-to-use apps like Project management apps, E-commerce backends, CRM systems, Analytics apps, academic apps, Banking apps, etc.

In addition, Vuexy has some really good and eye-catching features:

-   6 Workable applications
-   Figma and Sketch File added
-   Multi-lingual
-   RTL supported
-   Data-table
-   Easy navigation
-   Custom-Built
-   Light and dark layout And many more

### [Jumbo React Redux Admin Template](https://themeselection.com/go/jumbo-react-react-redux-material-bootstrap-admin-template/)

![jumbo react redux admin template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebhg0sqltv391dgwyq6s.png)

[**Jumbo React**](https://themeselection.com/go/jumbo-react-react-redux-material-bootstrap-admin-template/) is a collection of various well-documented admin templates based on the Create React App. Also, the template is dedicated to React developers to start their React application straight away. Besides, this admin template has 2 react admin templates with different design concepts. Also, React redux admin templates are based on the Google Material Design concept using the popular Material-UI library (Latest version v1). Furthermore, the React admin template is based on a flat look by utilizing the BootStrap4 and Reactstrap UI library. Ideally, this admin template has modern and colorful elements that are ideal for any applications you use.

### [Dnote](https://www.getdnote.com/)

![Dnote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yms93uxpaxlkem2k5zh.png)

With **Dnote**, you can instantly capture ideas, snippets, and knowledge without leaving your terminal, and easily retrieve them later. It keeps you focused by providing a way of effortlessly capturing and retrieving information without leaving your terminal. It also offers a seamless multi-device sync and a web interface

### [Kibana](https://www.elastic.co/kibana/)

![Kibana](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrlz79q9i0b9t8t2ebtl.png)

**Kibana** is a free and open user interface that lets you visualize your Elasticsearch data and navigate the Elastic Stack. Do anything from tracking query load to understanding the way requests flow through your apps.

### [EasyDev](https://themeselection.com/go/easydev-developer-friendly-react-redux-bootstrap-4-admin-template-seed-project/)

[**EasyDev**](https://themeselection.com/go/easydev-developer-friendly-react-redux-bootstrap-4-admin-template-seed-project/)  is a React redux admin template based on React Components and Bootstrap 4 Framework. It’s the most convenient template for developers, because of React Components, clean code, and detailed documentation, which allows you to build any projects easily! Use it for e-commerce, analytics, sports, and other types of web or mobile applications.

## Open Source React Projects:

### [React Select](https://github.com/jedwatson/react-select)

![react select](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1k82o68wu5y5slkwq47v.png)

A flexible and beautiful Select Input control for ReactJS with multi-select, autocomplete, async, and creatable support. React Select is funded by Thinkmill and Atlassian. It represents a new approach to developing powerful React.js components that work out of the box while being extremely customizable.

### [DevHub](https://github.com/devhubapp/devhub)

![Devhub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sact3hs2fc26foh8ge6i.png)

DevHub is a mobile and desktop app to help you manage GitHub Notifications and stay on top of Repository Activities. Save custom searches, apply filters, bookmark items, and don't miss anything important.

### [React Spring](https://github.com/react-spring/react-spring)

![React Spring](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd5jig8k5f8sr8oh8kzd.png)

React-spring is a spring-physics-based animation library. This library represents a modern approach to animation. It inherits animated powerful interpolations and performance, as well as react-motion ease of use. React-spring is cross-platform, it supports the web, react-native, react-native-web, and practically any other platform.

### [ArchitectUI React](https://dashboardpack.com/theme-details/architectui-react-dashboard-free/)



**ArchitectUI** is the free, open-source React Dashboard Template. It comes with a set of beautiful elements and components that can offer you a head start in developing your web application. It has a fully responsive layout and multiple color schemes for both Bootstrap elements and layout components. 

### [Take note](https://github.com/taniarascia/takenote)

![Take note](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ah7vze9ydq61litt5exu.png)

Take Note is an open-source project to take notes, known as  The Note-Taking App for Developers. It’s a simple plain-text take-note app with markdown support. Without all the fancy stuff that we don’t need.

### [Write with me](https://github.com/dabit3/write-with-me)

![write with me](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40h7ulkzd5115ow5j9fi.png)

Write with a real-time collaborative markdown editor written in React with hooks and it uses [AWS Amplify](https://aws.amazon.com/es/amplify/)

---


## Video Tutorials and Guides:

### [ReactJS Crash Course](https://www.youtube.com/watch?v=w7ejDZ8SWv8) By [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA)

{% youtube w7ejDZ8SWv8 %}

Get started with React in this crash course. We will be building a task tracker app and looking at components, props, state, hooks, working with an API, and more.

### [React JS Course for Beginners - 2021 Tutorial](https://www.youtube.com/watch?v=nTeuhbP7wdE) By [freeCodeCamp.org](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)

{% youtube nTeuhbP7wdE %}

This is a full premium course. Learn React.js from the ground up with fundamentals to more intermediate and advanced topics. You will learn by building a real app.

### [React Crash Course for Beginners 2021](https://www.youtube.com/watch?v=Dorf8i6lCuk) By [Academind](https://www.youtube.com/c/Academind/featured)

{% youtube Dorf8i6lCuk %}

Get Started with React.js and learn how to build amazing websites with ReactJS.

### [React JS Tutorial for Beginners - Full Course in 12 Hours [2021]](https://www.youtube.com/watch?v=-cMqr9HpZ-Y) By [Clever Programmer](https://www.youtube.com/c/CleverProgrammer/featured)

![React JS Tutorial for Beginner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pntgryr6a72siwieu1y.jpg)

What You'll Learn:

 - The Netflix Clone 
 - The Spotify Clone
 - The Slack Clone
 - The Tik-Tok Clone  
 - And the tools & technologies you need to succeed as a Modern
   React JS Developer.

### [What’s new in React 18](https://www.youtube.com/watch?v=bpVRWrrfM1M) By [Evening Kid](https://www.youtube.com/c/eveningkid/featured)
Here you will understand the top new features coming to React 18, explained simply.

{% youtube bpVRWrrfM1M %}

### [What You NEED To Know About React 18](https://www.youtube.com/watch?v=uOGImWM85Uw) By [Harry Wolff](https://www.youtube.com/c/hswolff/featured)

{% youtube uOGImWM85Uw %}

---

## Useful Collections/Books/Articles:

## Books:

### [The Road to React: Your journey to master plain yet pragmatic React. js(2020 Edition)](https://www.amazon.com/gp/product/172004399X/)
The contents covered in the book are:

-   Fundamentals of React 
-   React’s Legacy
-   Styling in React  
-   React Maintenance
-   Real World React (Advanced)
-   Deploying a React Application

### [React Explained: Your Step-by-Step Guide to React (2020 Edition)](https://www.amazon.com/gp/product/1798752980/)

The book gives some basic knowledge of how React works. You will learn how to build applications with it. The book provides some easy-to-follow practice exercises to reinforce what you have learned. The book will introduce all of React’s basics from scratch. No prior knowledge of React or functional JavaScript is necessary.

### [Beginning React (incl. Redux and React Hooks)](https://www.amazon.com/gp/product/B077D5212Q/)

The book gives a great introduction to React and related technologies. This book is a fun, hands-on, and pragmatic journey to master React.js. Every section of this book is written in a bite-sized manner and straight to the point. It is a well-designed book and easily understandable. The book is easy to follow and includes illustrations, examples, code snippets, and code explanations. It is a great book for beginners. Through this book, you will start building React apps within minutes.

### [React.js Essentials: A fast-paced guide to designing and building scalable and maintainable web apps with React.js](https://www.amazon.com/gp/product/1783551623/)
This book is a fast-paced guide to designing and building scalable and maintainable web apps with React. This book helps to build maintainable and performant user interfaces for your web applications using React.js. The book adopts a step-by-step, hands-on approach with ample codes to ensure you learn React.js at a fast pace.

### [Beginning React (incl. Redux and React Hooks)](https://www.amazon.in/Beginning-React-incl-Redux-Hooks/dp/9811480265/)

This is a great book to understand the basics of React. It is clear, concise, and has a hands-on approach which makes it easier to understand the concepts. Also, all the basic aspects are covered

## Articles, Collections and Blogs:

- [ReactJS Roadmap For Developers](https://dev.to/theme_selection/reactjs-roadmap-for-developers-2824)
- [The Best 10+ React Developer Tools 2021](https://themeselection.com/react-developer-tools/)
- [Best 15+ Open Source ReactJS Admin Templates 2021](https://dev.to/theme_selection/best-15-open-source-reactjs-admin-templates-1g8e)
- [React Project Ideas For Beginners](https://themeselection.com/react-project-ideas-for-beginners/)
- [The Best 10+ React Developer Tools 2021](https://themeselection.com/react-developer-tools/)
- [300 React Interview Questions](https://dev.to/sakhnyuk/300-react-interview-questions-2ko4)
- [What’s New In React 18 & Release Date](https://themeselection.com/whats-new-in-react-18-and-release-date/)
- [React Boilerplate](https://themeselection.com/react-boilerplate/)
- [React Redux Admin Templates free](https://themeselection.com/react-redux-admin-templates/)

---

[![Free VueJS Laravel Admin Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk2ot0xbkneh4fm8wogt.png)](https://themeselection.com/products/materio-free-vuetify-vuejs-laravel-admin-template/)

---

## React Tools

### React Development Tools

- [react-devtools](https://github.com/facebook/react-devtools)  - Inspection of React component hierarchy in the Chrome and Firefox Developer Tools
- [react-hot-loader](https://github.com/gaearon/react-hot-loader)  - Tweak React components in real-time
- [react-loadable](https://github.com/jamiebuilds/react-loadable)  - A higher-order component for loading components with promises
- [loadable-components](https://github.com/smooth-code/loadable-components)  - React code splitting made easy
- [reactotron](https://github.com/skellock/reactotron)  - A desktop app for inspecting your React and React Native projects
- [storybook](https://github.com/storybookjs/storybook)  - UI component dev & test

### React Starter Kits and Toolchains

- [create-react-app](https://github.com/facebook/create-react-app)  - Set up a modern Web app by running one command
- [Razzle](https://razzlejs.org/)  - Build production-ready React applications. Razzle is a toolchain for modern static and dynamic websites and web applications
- [Neutrino React Preset](https://neutrinojs.org/packages/react/)- `@neutrinojs/react`  is a Neutrino preset that supports building React web applications
- [react-starter-kit](https://github.com/kriasoft/react-starter-kit) - Isomorphic Web app boilerplate
- [create-react-library](https://github.com/transitive-bullshit/create-react-library)  - CLI for creating reusable, modern React libraries using Rollup and create-react-app.
- [tsdx](https://tsdx.io/)  - Zero-config CLI for TypeScript package development

### React Routing 

- [react-router](https://github.com/ReactTraining/react-router)  - Declarative routing for React
- [navi](https://github.com/frontarm/navi)  - Declarative, asynchronous routing for React
- [curi](https://github.com/pshrmn/curi)  - JavaScript router for single-page applications
- [reach](https://github.com/reach/router)  - Next Generation Routing for React
- [universal-router](https://github.com/kriasoft/universal-router)  - A simple middleware-style router for isomorphic JavaScript web apps
- [wouter](https://github.com/molefrog/wouter)  - A minimalist-friendly ~1.3KB routing library

### React Testing

- [jest](https://github.com/facebook/jest)  - Delightful JavaScript Testing Framework
- [enzyme](https://github.com/airbnb/enzyme)  - JavaScript Testing utilities for React
- [react-testing-library](https://github.com/testing-library/react-testing-library)  - Simple and complete React DOM testing utilities
- [react-hooks-testing-library](https://github.com/mpeyper/react-hooks-testing-library)  - React hooks testing utilities that encourage good testing practices
- [majestic](https://github.com/Raathigesh/majestic)  - Zero config GUI for Jest

---

## Conclusion:

Here we have mentioned some of the very useful ReactJS resources. While you are working with the ReactJS project you'll surely need some tools, UI component libraries, admin templates, video tutorials, etc. So, to help you save your time we have gathered some amazing resources here so that you don't have to search here and there.

We are open to suggestions so do tell us which other resources can be included in the list. Also, don't forget to share and bookmark this collection.

We hope you find this collection useful.🙂