The Ultimate FREE React Resources for an Interview Preparation from GitHub
Published: 2024-01-16 12:56:21

When preparing for a React interview, having access to the right resources is crucial. Fortunately, there are numerous free resources available on GitHub that can help you sharpen your skills and knowledge. From comprehensive courses to curated lists of interview questions and answers, these resources cover a wide range of topics essential for interview preparation.

## **React** 

A curated list of all FREE resources to learn and build things in React!

- [React](#react)
  - [React General Resources](#react-general-resources)
  - [React Tutorials](#react-tutorials)
  - [React Development Tools](#react-development-tools)
  - [React Frameworks](#react-frameworks)
  - [React Component Libraries](#react-component-libraries)
  - [React State Management and Data Fetching](#react-state-management-and-data-fetching)
  - [React Styling](#react-styling)
  - [React Routing](#react-routing)
  - [React Libraries](#react-libraries)
  - [React Testing](#react-testing)
  - [React Awesome Components](#react-awesome-components)
  - [React Components Sandboxes](#react-components-sandboxes)
  - [React Forms](#react-forms)
  - [React Tables and Grids](#react-tables-and-grids)
  - [React Maps](#react-maps)
  - [React Charts](#react-charts)
  - [React Renderers](#react-renderers)
  - [React Internationalization](#react-internationalization)
  - [React Graphics and Animations](#react-graphics-and-animations)
  - [React Integration](#react-integration)
  - [React Real Apps](#react-real-apps)
- [React Native](#react-native)
  - [React Native General Resources](#react-native-general-resources)
  - [React Native Navigation](#react-native-navigation)
  - [React Native Awesome Components](#react-native-awesome-components)
  - [React Native Libraries](#react-native-libraries)
- [Contribution](#contribution)

### React

#### React General Resources

- [React Official Website](https://react.dev/)
- [React GitHub](https://github.com/facebook/react)
- [Reactiflux Discord Channel](http://www.reactiflux.com/)
- [React Community](https://react.dev/community)
- [React Conferences](https://react.dev/community/conferences)
- [React CodeSandbox Playground](https://codesandbox.io/s/new)

#### React Tutorials

- [React Official Tutorial](https://react.dev/learn)
- [Using React in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial)
- [React Interview Questions & Answers](https://github.com/sudheerj/reactjs-interview-questions)
- [Design patterns and Component patterns for building powerful Web Apps](https://www.patterns.dev/)
- [A simple, scalable, and powerful architecture for building production ready React applications](https://github.com/alan2207/bulletproof-react)
- [Cheatsheets for experienced React developers getting started with TypeScript](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet)
- [The Fullstack Tutorial for GraphQL](https://github.com/howtographql/howtographql)

#### React Development Tools

- [create-react-app](https://github.com/facebook/create-react-app) - Set up a modern Web app by running one command
- [vite](https://github.com/vitejs/vite) - Next Generation Frontend Tooling
- [reactotron](https://github.com/skellock/reactotron) - A desktop app for inspecting your React and React Native projects
- [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) - React specific linting rules for ESLint
- [why-did-you-render](https://github.com/welldone-software/why-did-you-render) - Monkey patches React to notify you about avoidable re-renders

#### React Frameworks

- [next](https://github.com/vercel/next.js) - The React Framework
- [blitz](https://github.com/blitz-js/blitz) - The Missing Fullstack Toolkit for Next.js
- [remix](https://remix.run/) - Full stack web Framework that lets you focus on the user interface
- [gatsby](https://github.com/gatsbyjs/gatsby) - Build modern websites with React
- [react-admin](https://github.com/marmelab/react-admin) - A frontend Framework for building B2B applications
- [refine](https://github.com/refinedev/refine) - Build your React-based CRUD applications, without constraints
- [aleph](https://github.com/alephjs/aleph.js) - The Full-stack Framework in Deno

#### React Component Libraries

- [material-ui](https://github.com/mui/material-ui) - Ready-to-use foundational React components
- [ant-design](https://github.com/ant-design/ant-design) - An enterprise-class UI design language and React UI library
- [shadcn-ui](https://github.com/shadcn-ui/ui) - Beautifully designed components built using Radix UI and Tailwind CSS
- [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap components built with React
- [fluentui](https://github.com/microsoft/fluentui) - Microsoft's Fluent UI
- [framework7](https://github.com/framework7io/framework7) - Full featured HTML framework for building iOS & Android apps
- [ariakit](https://github.com/ariakit/ariakit) - Toolkit for building accessible web apps with React


#### React State Management and Data Fetching

- [redux](https://github.com/reduxjs/redux) - Predictable State Container for JavaScript Apps
- [mobx](https://github.com/mobxjs/mobx) - Simple, scalable state management
- [zustand](https://github.com/pmndrs/zustand) - Bear necessities for state management in React
- [tanstack-query](https://github.com/TanStack/query) - Powerful asynchronous state management
- [swr](https://github.com/vercel/swr) - React Hooks for Data Fetching
- [apollo-client](https://github.com/apollographql/apollo-client) - A fully-featured, production ready caching GraphQL client
- [relay](https://github.com/facebook/relay) - A framework for building data-driven React applications
- [recoil](https://github.com/facebookexperimental/Recoil) - Experimental state management library for React apps
- [jotai](https://github.com/pmndrs/jotai) - Primitive and flexible state management for React
- [xstate](https://github.com/statelyai/xstate) - State machines and statecharts for the modern web
- [effector](https://github.com/zerobias/effector) - Business logic with ease
- [immer](https://github.com/immerjs/immer) - Create the next immutable state by mutating the current one
- [immutable-js](https://github.com/immutable-js/immutable-js) - Immutable persistent data collections for Javascript
- [rxdb](https://github.com/pubkey/rxdb) - A fast, offline-first, reactive database for JavaScript Applications
- [watermelondb](https://github.com/Nozbe/WatermelonDB) - Reactive & asynchronous database for powerful React and React Native apps
- [valtio](https://github.com/pmndrs/valtio) - Valtio makes proxy-state simple for React and Vanilla

#### React Styling

- [styled-components](https://github.com/styled-components/styled-components) - Visual primitives for the component age
- [emotion](https://github.com/emotion-js/emotion) - CSS-in-JS library designed for high performance style composition
- [linaria](https://github.com/callstack/linaria) - Zero-Runtime CSS in JS library
- [vanilla-extract](https://github.com/seek-oss/vanilla-extract) - Zero-runtime Stylesheets-in-TypeScript
- [jss](https://github.com/cssinjs/jss) - authoring tool for CSS which uses JavaScript as a host language

#### React Routing

- [react-router](https://github.com/remix-run/react-router) - Declarative routing for React
- [wouter](https://github.com/molefrog/wouter) - A minimalist-friendly routing
- [tanstack-router](https://github.com/TanStack/router) - Type-safe router with built-in caching & URL state management

#### React Libraries

- [preact](https://github.com/preactjs/preact) - Fast React alternative with the same modern API
- [floating-ui](https://github.com/floating-ui/floating-ui) - Toolkit to create floating elements
- [loadable-components](https://github.com/gregberge/loadable-components) - The recommended Code Splitting library for React
- [reapop](https://github.com/LouisBarranqueiro/reapop) - A simple and customizable React notifications system
- [react-uploady](https://github.com/rpldy/react-uploady) - Modern file-upload components & hooks for React
- [downshift](https://github.com/downshift-js/downshift) - React autocomplete, combobox or select dropdown components

#### React Testing

- [jest](https://github.com/facebook/jest) - Delightful JavaScript Testing
- [enzyme](https://github.com/enzymejs/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/testing-library/react-hooks-testing-library) - Simple and complete React hooks testing utilities
- [cypress](https://github.com/cypress-io/cypress) - Fast, easy and reliable testing for anything that runs in a browser

#### React Awesome Components

- [Awesome React Components](https://github.com/brillout/awesome-react-components)
- [react-select](https://github.com/JedWatson/react-select) - The Select Component for React
- [react-dnd](https://github.com/react-dnd/react-dnd) - Drag and Drop for React
- [react-rnd](https://github.com/bokuweb/react-rnd) - A resizable and draggable component for React
- [react-dropzone](https://github.com/react-dropzone/react-dropzone) - Simple drag-drop zone with React
- [react-big-calendar](https://github.com/jquense/react-big-calendar) - Calendar component
- [react-datepicker](https://github.com/Hacker0x01/react-datepicker/) - A simple and reusable datepicker component for React
- [react-loading-skeleton](https://github.com/dvtng/react-loading-skeleton) - Create skeleton screens that automatically adapt to your app
- [react-qrcode](https://github.com/zpao/qrcode.react) - QR component for use with React
- [react-archer](https://github.com/pierpo/react-archer) - Draw arrows between React elements
- [react-device-detect](https://github.com/duskload/react-device-detect) - Detect device, and render view accordingly
- [react-colorful](https://github.com/omgovich/react-colorful) - A tiny color picker component
- [react-icons](https://github.com/react-icons/react-icons) - SVG React icons of popular icon packs
- [react-complex-tree](https://github.com/lukasbach/react-complex-tree) - Unopinionated Accessible Tree
- [react-insta-stories](https://github.com/mohitk05/react-insta-stories) - A React component for Instagram like stories
- [swiper](https://github.com/nolimits4web/swiper) - Most modern mobile touch slider
- [keen-slider](https://github.com/rcbyr/keen-slider) - The Touch slider carousel
- [cookie-consent-banner](https://github.com/porscheofficial/cookie-consent-banner) – The lightweight and flexible Cookie Consent Banner
- [heart-switch](https://github.com/anatoliygatt/heart-switch) - A heart-shaped toggle switch component for React
- [kbar](https://github.com/timc1/kbar) - Fast, portable, and extensible cmd+k interface for your site
- [tagify](https://github.com/yairEO/tagify) - Lightweight, efficient Tags input component
- [puck](https://github.com/measuredco/puck) - The visual editor for React

#### React Components Sandboxes

- [storybook](https://github.com/storybookjs/storybook) - Storybook is a frontend workshop for building UI components and pages in isolation
- [react-styleguidist](https://github.com/styleguidist/react-styleguidist) - Isolated React component development environment with a living style guide
- [react-cosmos](https://github.com/react-cosmos/react-cosmos) - Dev tool for creating reusable React components

#### React Forms

- [react-hook-form](https://github.com/react-hook-form/react-hook-form) - React Hooks for form state management and validation
- [formik](https://github.com/jaredpalmer/formik) - Build forms in React, without the tears
- [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) - A React component for building Web forms from JSON Schema
- [react-final-form](https://github.com/final-form/react-final-form) - High performance subscription-based form state management for React
- [formily](https://github.com/alibaba/formily) - Alibaba Group Unified Form Solution
- [vest](https://github.com/ealush/vest) - Declarative validations framework

#### React Tables and Grids

- [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) - A draggable and resizable grid layout with responsive breakpoints
- [tanstack-table](https://github.com/TanStack/table) - Headless UI for building powerful tables & datagrids
- [react-data-grid](https://github.com/adazzle/react-data-grid) - Feature-rich and customizable data grid React component

#### React Maps

- [react-map-gl](https://github.com/visgl/react-map-gl) - React friendly API wrapper around MapboxGL JS
- [react-leaflet](https://github.com/PaulLeCam/react-leaflet) - React components for Leaflet maps

#### React Charts

- [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3
- [visx](https://github.com/airbnb/visx) - Visualization components
- [victory](https://github.com/FormidableLabs/victory) - A collection of composable React components for building interactive data visualizations
- [react-vis](https://github.com/uber/react-vis) - Data Visualization Components
- [nivo](https://github.com/plouc/nivo) - Provides a rich set of data visualization components built on top of the D3 and React libraries

#### React Renderers

- [react-three-fiber](https://github.com/pmndrs/react-three-fiber) - A React renderer for Three.js
- [ink](https://github.com/vadimdemedes/ink) - React for interactive command-line apps
- [remotion](https://github.com/remotion-dev/remotion) - Make videos programmatically with React
- [react-pdf](https://github.com/diegomura/react-pdf) - Create PDF files using React
- [react-figma](https://github.com/react-figma/react-figma) - A React renderer for Figma

#### React Internationalization

- [formatjs](https://github.com/formatjs/formatjs) - Internationalize your web apps
- [react-i18next](https://github.com/i18next/react-i18next) - Internationalization for React done right
- [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) - A fully type-safe and lightweight internationalization library

#### React Graphics and Animations

- [react-spring](https://github.com/pmndrs/react-spring) - A spring physics based React animation library
- [framer-motion](https://github.com/framer/motion) - Open source, production-ready animation and gesture library for React
- [react-transition-group](https://github.com/reactjs/react-transition-group) - An easy way to perform animations for React
- [auto-animate](https://github.com/formkit/auto-animate) - A zero-config, drop-in animation utility that adds smooth transitions
- [react-tsparticles](https://github.com/matteobruni/tsparticles) - Easily create highly customizable particles effects
- [react-parallax-tilt](https://github.com/mkosir/react-parallax-tilt) - Easily apply tilt hover effect on React components
- [gooey-react](https://github.com/luukdv/gooey-react) - The gooey effect for React

#### React Integration

- [rescript-compiler](https://github.com/rescript-lang/rescript-compiler) - A robustly typed language that compiles to efficient and human-readable JavaScript
- [react-rails](https://github.com/reactjs/react-rails) - Integrate React with Rails
- [reagent](https://github.com/reagent-project/reagent) - A minimalistic ClojureScript interface to React
- [fulcro](https://github.com/fulcrologic/fulcro) - A library for development of web applications in clj/cljs
- [tailwind-react](https://tw-elements.com/docs/standard/integrations/react-integration/) - Article that shows you how to integrate React application with Tailwind

#### React Real Apps

- [mattermost-server](https://github.com/mattermost/mattermost-server) - An open source platform for secure collaboration
- [kibana](https://github.com/elastic/kibana) - Your window into the Elastic Stack
- [webamp](https://github.com/captbaritone/webamp) - Winamp 2 reimplemented for the browser
- [overreacted](https://github.com/gaearon/overreacted.io) - Personal blog by Dan Abramov

These resources not only help you understand the fundamentals of React but also provide insights into the types of questions that are commonly asked in interviews. By leveraging these free resources, you can enhance your React skills and approach your interview with confidence.

I have also created a github repository for it so keep a watch on it as well. Also, feel free to raise a PR with your resources to keep it up to date. If you found it useful then consider giving it a star and share it with the one who is in great need and save their time. Cheers!

GitHub Repo: https://github.com/TheAjinkya/react-interview-questions-answers