Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stevelab1/awesome-learning-resources
A curated list of awesome learning and career development resources for Front End Web Developers.
https://github.com/stevelab1/awesome-learning-resources
List: awesome-learning-resources
awesome frontend-web-development learn-frontend learn-to-code
Last synced: 23 days ago
JSON representation
A curated list of awesome learning and career development resources for Front End Web Developers.
- Host: GitHub
- URL: https://github.com/stevelab1/awesome-learning-resources
- Owner: stevelab1
- Created: 2023-01-21T14:37:58.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-02T19:37:58.000Z (about 1 year ago)
- Last Synced: 2024-11-19T01:02:19.805Z (about 1 month ago)
- Topics: awesome, frontend-web-development, learn-frontend, learn-to-code
- Homepage:
- Size: 205 KB
- Stars: 9
- Watchers: 8
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- ultimate-awesome - awesome-learning-resources - A curated list of awesome learning and career development resources for Front End Web Developers. (Programming Language Lists / JavaScript Lists)
README
# **Front End Learning Path**
[](https://github.com/stevelab1/awesome-learning-resources/stargazers)
[](https://github.com/stevelab1/awesome-learning-resources/network)
[](https://github.com/stevelab1/awesome-learning-resources/graphs/contributors)
[](https://github.com/stevelab1)
[](https://github.com/stevelab1/awesome-learning-resources/issues)
[](https://github.com/stevelab1/awesome-learning-resources/pulls)
List of awesome learning and career development resources from the course and other credible sources for Front-end Web Developers. It will also serve as a free learning path. More to be added... Including `what to learn next` and `updates` to technologies covered.
## Contents
- [Jobs](#jobs)
- [News](#news)
- [Still to be organised](#still-to-be-organised)
- [React](#react)
- [React General Resources](#react-general-resources)
- [React Community](#react-community)
- [React Online Playgrounds](#react-online-playgrounds)
- [React Tutorials](#react-tutorials)
- [React General Tutorials](#react-general-tutorials)
- [React Hooks](#react-hooks)
- [React and TypeScript](#react-and-typescript)
- [React Performance](#react-performance)
- [React Interview Questions](#react-interview-questions)
- [React Tools](#react-tools)
- [React Development Tools](#react-development-tools)
- [React Frameworks](#react-frameworks)
- [React Styling](#react-styling)
- [React Routing](#react-routing)
- [React Component Libraries](#react-component-libraries)
- [React Awesome Components](#react-awesome-components)
- [React Testing](#react-testing)
- [React Libraries](#react-libraries)
- [React Integration](#react-integration)
- [React State Management](#react-state-management)
- [React AR and VR](#react-ar-and-vr)
- [React Renderers](#react-renderers)
- [Forms](#forms)
- [Autocomplete](#autocomplete)
- [Graphics](#graphics)
- [Data Managing](#data-managing)
- [Maps](#maps)
- [Charts](#charts)
- [React Advanced Topics](#react-advanced-topics)
- [React Native](#react-native)
- [React Native General Resources](#react-native-general-resources)
- [React Native Tutorials](#react-native-tutorials)
- [React Native Development Tools](#react-native-development-tools)
- [React Native Sample Apps](#react-native-sample-apps)
- [React Native Boilerplates](#react-native-boilerplates)
- [React Native Awesome Components](#react-native-awesome-components)
- [React Native Libraries](#react-native-libraries)
- [Videos](#videos)
- [Video Tutorials](#video-tutorials)
- [Demo React Apps](#demo-react-apps)
- [Real React Apps](#real-react-apps)
### Jobs
- Typescript is coming up in more and more in job postings!
### News
- [Create React App Alternatives](https://hackernoon.com/create-react-app-is-dead-here-are-some-alternatives)
- [State of Javascript Latest Survey Results](https://2022.stateofjs.com/en-US/libraries/)
### React
> JavaScript Library for building User Interfaces
#### React General Resources
- [React Official Website](https://reactjs.org/)
- [React Documentation](https://reactjs.org/docs/getting-started.html)
- [React Beta Documentation](https://beta.reactjs.org) - the future docs, 99% complete
- [React on GitHub](https://github.com/facebook/react)
- [overreacted](https://github.com/gaearon/overreacted.io) - Personal blog by Dan Abramov (of the React Core Team)
#### React Community
- [Reactiflux Discord Channel](http://www.reactiflux.com/)
- [React StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)
- [React Twitter](https://twitter.com/reactjs)
#### React Online Playgrounds
- [CodePen](https://reactjs.org/redirect-to-codepen/hello-world)
- [CodeSandbox](https://codesandbox.io/s/new)
- [JSFiddle](https://jsfiddle.net/boilerplate/react-jsx)
#### React Tutorials
##### React General Tutorials
- [React Official Tutorial](https://reactjs.org/tutorial/tutorial.html)
- [Using React in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial)
- [Scrimba - Learn React for free interactively](https://scrimba.com/g/glearnreact)
- [FreeCodeCamp React Challenges](https://learn.freecodecamp.org/front-end-libraries/react)
- [React Cheatsheet](https://devhints.io/react)
- [React Patterns](https://reactpatterns.com/)
##### React Hooks
- [React Hooks](https://reactjs.org/docs/hooks-intro.html)
- [Awesome React Hooks](https://github.com/rehooks/awesome-react-hooks)
- [Thinking in React Hooks](https://wattenberger.com/blog/react-hooks)
- [Replacing Redux with React Hooks and Context](https://medium.com/octopus-labs-london/replacing-redux-with-react-hooks-and-context-part-1-11b72ffdb533)
- [React Hooks cheat sheet: Unlock solutions to common problems](https://blog.logrocket.com/react-hooks-cheat-sheet-unlock-solutions-to-common-problems-af4caf699e70/)
- [How to fetch data with React Hooks?](https://www.robinwieruch.de/react-hooks-fetch-data/)
- [Easy to understand React Hook recipes](https://usehooks.com/)
- [React Hooks Video Tutorial](https://www.youtube.com/playlist?list=PLN3n1USn4xlmyw3ebYuZmGp60mcENitdM)
##### React and TypeScript
- [TypeScript, React and Webpack](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html)
- [JSX in TypeScript](https://www.typescriptlang.org/docs/handbook/jsx.html)
- [Cheatsheets for React developers getting started with TypeScript](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet)
- [React by Example](https://reactbyexample.github.io/)
##### React Performance
- [React Optimizing Performance](https://reactjs.org/docs/optimizing-performance.html)
- [Introducing the React Profiler](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)
- [Optimizing React: Virtual DOM explained](https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained)
- [A Definitive Guide to Optimize Major Performance issues in React](https://www.simform.com/react-performance/)
- [Twitter Lite and High Performance React Progressive Web Apps at Scale](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3)
- [Using the React DevTools Profiler to Diagnose React App Performance Issues](https://www.netlify.com/blog/2018/08/29/using-the-react-devtools-profiler-to-diagnose-react-app-performance-issues/)
- [Top 5 Practices to Boost React Performance](https://www.codementor.io/blizzerand/top-5-practices-to-boost-react-performance-jv6zr89ep)
- [React is Slow, React is Fast: Optimizing react Apps in Practice](https://medium.com/dailyjs/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba)
- [Rendering large lists with react-window](https://addyosmani.com/blog/react-window/)
##### React Interview Questions
- [13 Essential React Interview Questions](https://www.toptal.com/react/interview-questions)
- [List of React interview Questions and Answers](https://github.com/sudheerj/reactjs-interview-questions)
- [React Coding Challenges](https://github.com/alexgurr/react-coding-challenges/)
#### 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
- [docz](https://github.com/doczjs/docz) - Zero Config, live-reloading documentation with Markdown + JSX
- [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
- [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) - React specific linting rules for ESLint
- [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) - Static AST checker for a11y rules on JSX elements
- [@axe-core/react](https://github.com/dequelabs/axe-core-npm) - Accessibility auditing for React applications
- [DataFormsJS JSX Loader](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md) - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page
- [Why Did You Render](https://github.com/welldone-software/why-did-you-render) - Monkey patches React to notify you about avoidable re-renders.
- [Divjoy](https://divjoy.com) - React codebase and UI generator to speed up development (paid)
- [Plasmic](https://www.plasmic.app/) - Powerful design tool for building your React components visually.
- [jsx-ast-utils](https://github.com/jsx-eslint/jsx-ast-utils) - AST utility module for statically analyzing JSX
- [react-scanner](https://github.com/moroshko/react-scanner) - Extract React components and props usage from code
##### 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 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 Frameworks
- [next.js](https://github.com/vercel/next.js) - The React Framework
- [gatsby.js](https://github.com/gatsbyjs/gatsby) - Free and open source framework based on React
- [react-admin](https://github.com/marmelab/react-admin) - Frontend Framework for building B2B applications on top of REST/GraphQL APIs
- [remix](https://remix.run/) - Finally, a killer React framework from the creators of React Router
- [Blitz](https://blitzjs.com) - The Fullstack React Framework
- [aleph.js](https://github.com/alephjs/aleph.js) - The React Framework in Deno
- [refine](https://refine.dev) - A React-based framework for building data-intensive applications in no time.
##### React Styling
- [styled-components](https://github.com/styled-components/styled-components) - Visual primitives for the component age
- [emotion](https://github.com/emotion-js/emotion) - Library designed for writing CSS styles with JavaScript
- [radium](https://github.com/FormidableLabs/radium) - A toolchain for React component styling
- [jss](https://github.com/cssinjs/jss) - Authoring tool for CSS
- [aphrodite](https://github.com/Khan/aphrodite) - Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
- [linaria](https://github.com/callstack/linaria) - Zero-Runtime CSS in JS
- [stitches](https://github.com/modulz/stitches) - CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience
- [vanilla-extract](https://github.com/seek-oss/vanilla-extract) - Zero-runtime Stylesheets-in-TypeScript
##### React Routing
- [react-location](https://github.com/TanStack/react-location) - Enterprise Client-Side Routing for React
- [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 Component Libraries
- [material-ui](https://github.com/mui-org/material-ui) - React components for faster and easier web development
- [blueprint](https://github.com/palantir/blueprint) - A React-based UI toolkit for the webs
- [Fluent UI](https://github.com/microsoft/fluentui) - A set of React components for building Microsoft web experiences
- [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap components built with React
- [reactstrap](https://github.com/reactstrap/reactstrap) - Simple React Bootstrap 4 components
- [ant-design](https://github.com/ant-design/ant-design) - A design system with values of Nature and Determinacy
- [chakra-ui](https://github.com/chakra-ui/chakra-ui/) - Simple, Modular & Accessible UI Components for your React Applications
- [semantic-ui-react](https://github.com/Semantic-Org/Semantic-UI-React) - The official Semantic-UI-React integration
- [evergreen](https://github.com/segmentio/evergreen) - Evergreen React UI Framework by Segment
- [grommet](https://github.com/grommet/grommet) - A react-based framework that provides accessibility, modularity, responsiveness, and theming 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
- [atlaskit](https://bitbucket.org/atlassian/atlaskit-mk-2) - Atlassian's official UI library, built according to the Atlassian Design Guidelines.
- [baseweb](https://github.com/uber/baseweb) - Base Web is a foundation for initiating, evolving, and unifying web products.
- [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
- [ring-ui](https://github.com/JetBrains/ring-ui) - JetBrains Web UI components
- [react-bulma-components](https://github.com/couds/react-bulma-components) - React components for Bulma framework
- [react-bulma](https://github.com/kulakowka/react-bulma) - React.js components for Modern CSS framework based on Flexbox
- [trunx](https://github.com/fibo/trunx) - Super Saiyan React components, son of awesome Bulma, implemented in TypeScript
- [bumbag-ui](https://github.com/bumbag/bumbag-ui) - Build accessible & themeable React applications with your Bumbag
- [Mantine](https://github.com/mantinedev/mantine) – A fully featured React library with 100+ hooks and components with native dark theme support
- [radix](https://github.com/radix-ui/primitives) - An open-source UI component library for building high-quality, accessible design systems and web apps
##### React Awesome Components
- [Awesome React Components list](https://github.com/brillout/awesome-react-components)
- [react-select](https://github.com/JedWatson/react-select) - The Select Component for React
- [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) - Beautiful and accessible drag and drop for lists with React
- [react-dnd](https://github.com/react-dnd/react-dnd) - Drag and Drop for React
- [react-grid-layout](https://github.com/strml/react-grid-layout) - A draggable and resizable grid layout with responsive breakpoints
- [react-table](https://github.com/tannerlinsley/react-table/) - A lightweight, fast and extendable datagrid for React
- [react-data-grid](https://github.com/adazzle/react-data-grid) - Excel-like grid component built with React
- [react-draggable](https://github.com/mzabriskie/react-draggable) - React draggable component
- [react-resizable-and-movable](https://github.com/bokuweb/react-resizable-and-movable) - A resizable and draggable component for React
- [react-resizable](https://github.com/strml/react-resizable) - A simple React component that is resizable with a handle
- [react-resizable-box](https://github.com/bokuweb/react-resizable-box) - A resizable component for React
- [react-searchbox-awesome](https://github.com/axmz/react-searchbox-awesome) - Minimalistic searchbox
- [react-sortable-pane](https://github.com/bokuweb/react-sortable-pane) - A sortable and resizable pane component for React
- [react-spaces](https://github.com/aeagle/react-spaces) - Nestable resizable, anchored, scrollable components
- [react-dates](https://github.com/airbnb/react-dates) - An easily internationalizable, mobile-friendly datepicker library for the web
- [react-big-calendar](https://github.com/intljusticemission/react-big-calendar) - Calendar component
- [react-datepicker](https://github.com/Hacker0x01/react-datepicker/) - ReactJS Datepicker
- [react-list](https://github.com/orgsync/react-list) - A versatile infinite scroll React component
- [react-intl](https://github.com/yahoo/react-intl) - Internationalize React apps
- [react-i18next](https://github.com/i18next/react-i18next) - Internationalization for React done right
- [react-aria-modal](https://github.com/davidtheclark/react-aria-modal) - A fully accessible React modal
- [react-hotkeys](https://github.com/greena13/react-hotkeys) - Declarative hotkey and focus area management for React
- [react-keydown](https://github.com/glortho/react-keydown) - Lightweight keydown wrapper for React components
- [react-joyride](https://github.com/gilbarbara/react-joyride) - Create guided tours for your apps
- [react-virtualized](https://github.com/bvaughn/react-virtualized) - React components for efficiently rendering large lists and tabular data
- [react-window](https://github.com/bvaughn/react-window) - React components for efficiently rendering large lists and tabular data
- [data-source](https://github.com/facebook/flipper/tree/main/desktop/flipper-plugin/src/data-source) - Library to power streaming data visualisations as used in Facebook's Flipper
- [react-text-mask](https://github.com/text-mask/text-mask) - Input mask for React
- [react-loading-skeleton](https://github.com/dvtng/react-loading-skeleton) - Create skeleton screens that automatically adapt to your app
- [react-spinkit](https://github.com/KyleAMathews/react-spinkit) - A collection of loading indicators animated with CSS for React
- [rheostat](https://github.com/airbnb/rheostat) - Accessible slider component built with React
- [qrcode.react](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-pdf-viewer](https://github.com/phuoc-ng/react-pdf-viewer) - A PDF viewer made for React
- [react-parallax-tilt](https://github.com/mkosir/react-parallax-tilt) - Easily apply tilt hover effect on React components
- [react-popper](https://github.com/popperjs/react-popper) - Position tooltips and popovers in an elegant, performant manner
- [react-tsparticles](https://github.com/matteobruni/tsparticles) - Easily create highly customizable particles animations
- [react-spring](https://github.com/pmndrs/react-spring) - Spring-physics based animation library for React applications
- [framer-motion](https://github.com/framer/motion) - A React library to power production-ready animations
- [react-accessible-accordion](https://github.com/springload/react-accessible-accordion) - React Component for creating an 'Accordion' that adheres to the WAI ARIA spec for accessibility.
- [react-truncate-markup](https://github.com/parsable/react-truncate-markup) - React component for truncating JSX markup.
- [react-cookie](https://github.com/reactivestack/cookies) - Universal cookies for React
- [react-slick](https://github.com/akiran/react-slick) - Carousel component built with React
- [react-gtm-module](https://github.com/alinemorelli/react-gtm) - Google Tag Manager Module for React
- [react-device-detect](https://github.com/duskload/react-device-detect) - Detect device for React
- [react-colorful](https://github.com/omgovich/react-colorful) - A tiny (2,5 KB), dependency-free, fast and accessible color picker component
- [react-modal](https://github.com/reactjs/react-modal) - Accessible modal dialog component for React
- [cleave.js](https://github.com/nosir/cleave.js) - Format input text content when you are typing
- [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) - Font Awesome 5 React component
- [react-advanced-cropper](https://github.com/Norserium/react-advanced-cropper) - An advanced React component for image cropping
- [swiper](https://github.com/nolimits4web/swiper) - modern mobile touch slider
##### 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
##### React Libraries
- [react-border-wrapper](https://github.com/Metroxe/react-border-wrapper) - A wrapper for placing elements along div borders in React.
- [react-magic](https://github.com/reactjs/react-magic) - Automatically AJAXify plain HTML with the power of React
- [react-toolbox](https://github.com/react-toolbox/react-toolbox) - A set of React components implementing Google's Material Design specification
- [tcomb-react](https://github.com/gcanti/tcomb-react) - Library allowing you to check all the props of your React components
- [react-responsive](https://github.com/wearefractal/react-responsive) - Media queries in react for responsive design
- [preact](https://git.io/preact) - Fast 3kb React alternative with the same ES6 API.
- [riotjs](https://github.com/muut/riotjs) - A React-like, 3.5KB user interface library
- [Maple.js](https://github.com/Wildhoney/Maple.js) - Bringing the concept of web-components to React
- [react-i13n](https://github.com/yahoo/react-i13n) - A performant, scalable and pluggable approach to instrumenting your React application
- [react-icons](https://github.com/gorangajic/react-icons) - svg react icons of popular icon packs
- [react-open-doodles](https://github.com/lunahq/react-open-doodles) - Awesome free illustrations as react components.
- [Keo](https://github.com/Wildhoney/Keo) - Plain functions for a more functional Deku approach to creating React components, with functional goodies such as pipe, memoize, etc...
- [Bit](https://github.com/teambit/bit) - A virtual repository for managing and using react and other web components across applications
- [AtlasKit](https://atlaskit.atlassian.com/) - Atlassian's React UI library
- [ReactiveSearch](https://github.com/appbaseio/reactivesearch) - UI components library for Elasticsearch
- [Slate](https://github.com/ianstormtaylor/slate) - A completely customizable framework for building rich text editors.
- [react-json-schema](https://github.com/TechniqueSoftware/react-json-schema) - Construct React elements from JSON by mapping JSON definitions to React components that you expose.
- [react-lodash](https://github.com/typicode/react-lodash) - Lodash as React components
- [react-helmet](https://github.com/nfl/react-helmet) - A document head manager for React
- [react-snap](https://github.com/stereobooster/react-snap) - Zero-configuration framework-agnostic static prerendering for SPAs
- [Draft.js](https://github.com/facebook/draft-js) - A React framework for building text editors
- [refract](https://github.com/fanduel-oss/refract) - Harness the power of reactive programming to supercharge your components
- [react-desktop](https://github.com/gabrielbull/react-desktop) - OS X and Windows UI components built with React
- [reapop](https://github.com/LouisBarranqueiro/reapop) - A simple and customizable React notifications system
- [react-extras](https://github.com/sindresorhus/react-extras) - Useful components and utilities for working with React
- [react-instantsearch](https://github.com/algolia/react-instantsearch) - Lightning-fast search for React and React Native applications, by Algolia
- [uppy](https://github.com/transloadit/uppy) - The next open source file uploader for web browsers
- [react-motion](https://github.com/chenglou/react-motion) - A spring that solves your animation problems
- [react-esi](https://github.com/dunglas/react-esi) - React Edge Side Includes
- [react-aria](https://react-spectrum.adobe.com/react-aria/index.html) - Adobe's library of React Hooks that provides accessible UI primitives for your design system
- [react-uploady](https://github.com/rpldy/react-uploady) - Modern file-upload components & hooks for React.
##### React Integration
- [ReasonReact](https://reasonml.github.io/reason-react/)
- [React Rails](https://github.com/reactjs/react-rails)
- [ReactJS.NET](https://github.com/reactjs/React.NET)
- [om](https://github.com/swannodette/om) - ClojureScript interface
- [Reagent](https://github.com/reagent-project/reagent) - A minimalistic ClojureScript interface to React.js
- [Express React views](https://github.com/reactjs/express-react-views)
- [React Page Middleware](https://github.com/reactjs/react-page-middleware)
- [ngReact](https://github.com/davidchang/ngReact) - React Components in Angular
- [coffee-react-transform](https://github.com/jsdf/coffee-react-transform) - Provides React JSX support for Coffeescript
- [sprockets-coffee-react](https://github.com/jsdf/sprockets-coffee-react) - Sprockets preprocessor for CJSX
- [react-kup](https://github.com/snd/react-kup) - A simple, non-intrusive alternative to jsx for coffeescript
- [turbo-react](https://github.com/ssorallen/turbo-react) - Combine Turbolinks and React to apply DOM diffs
- [react-bacon](https://github.com/jamesmacaulay/react-bacon) - A little module for using React with Bacon.js
- [msx](https://github.com/insin/msx) - React's JSX Transformer, tweaked to output calls to Mithril
- [react-backbone](https://github.com/jhudson8/react-backbone) - Backbone-aware mixins for react
- [NestedReact](https://github.com/Volicon/NestedReact/) - transparent integration with Backbone Views and NestedTypes models
- [backbone-reaction](https://github.com/jhudson8/backbone-reaction) - React, Backbone and then some
- [react.backbone](https://github.com/usepropeller/react.backbone) - Plugin for React to make Backbone migration easier
- [reactbone](https://github.com/andrejewski/reactbone) - React extensions for Backbone
- [backbone-react-ui](https://github.com/securingsincity/backbone-react-ui) - React components for use with backbone and backbone paginator
- [react-events](https://github.com/jhudson8/react-events) - Declarative managed event bindings for react components
- [react-mixin-manager](https://github.com/jhudson8/react-mixin-manager) - React mixin registration manager
- [react-topcoat by @plaxdan](https://github.com/plaxdan/react-topcoat) - Topcoat CSS components built with the React library
- [react-topcoat by @arnemart](https://github.com/arnemart/react-topcoat) - A collection of React components for Topcoat
- [reactdown](https://github.com/andreypopp/reactdown) - Write React components using markdown syntax
- [react-jade](https://github.com/ForbesLindesay/react-jade) - Compile Jade to React JavaScript
- [jade-react](https://github.com/duncanbeevers/jade-react) - Compile Jade templates to React.DOM expressions
- [gulp-jade-react](https://github.com/duncanbeevers/gulp-jade-react) - Compile Jade templates into React de-sugared JSX with Gulp
- [sbt-reactjs](https://github.com/ddispaltro/sbt-reactjs) - React SBT Plugin using npm
- [scalajs-react](https://github.com/japgolly/scalajs-react) - A guilty affair between Scala.js and Facebook's React
- [react-xtags](https://github.com/vjeux/react-xtags/) - Using React to implement xtags
- [jreact](https://github.com/KnisterPeter/jreact) - React on server-side Java (with Rhino or Nashorn)
- [React.hiccup](https://github.com/lantiga/react.hiccup) - A complete replacement for JSX written in sweet.js
- [react-play](https://github.com/ssorallen/react-play) - Rendering React components in the Play Framework with JDK8's Nashorn
- [rx-react](https://github.com/fdecampredon/rx-react) - Utilities to works with React in a RxJS
- [react-with-di](https://github.com/vojtajina/react-with-di) - A hacked prototype of React.js with DI
- [reactfire](https://github.com/firebase/reactfire) - ReactJS mixin for easy Firebase integration
- [react-clickdrag-mixin](https://github.com/tleunen/react-clickdrag-mixin) - ClickDrag mixin for React component
- [react-masonry-mixin](https://github.com/eiriklv/react-masonry-mixin) - Standalone mixin for Masonry (@desandro)
- [react-packery-mixin](https://github.com/eiriklv/react-packery-mixin) - Standalone mixin for Packery (Metafizzy)
- [react-dropzone](https://github.com/paramaggarwal/react-dropzone) - Simple HTML5 drag-drop zone with React.js.
- [aframe-react](https://github.com/ngokevin/aframe) - A-Frame VR + React
- [react-three-fiber](https://github.com/react-spring/react-three-fiber) - A react reconciler for threejs (web and react-native)
- [react-three](https://github.com/Izzimach/react-three) - React bindings to create and control a 3D scene using three.js
- [react-three-renderer](https://github.com/toxicFork/react-three-renderer) - Render into a three.js canvas using React
- [react-threejs](https://github.com/fritx/react-threejs) - Simplest bindings between React & Three.js
- [react-masonry-css](https://github.com/paulcollett/react-masonry-css) - Fast Masonry layout powered by CSS, dependency free
- [react-captcha](https://github.com/appleboy/react-recaptcha) - A react.js reCAPTCHA for Google
- [reaptcha](https://github.com/sarneeh/reaptcha) - Clean, modern and simple React wrapper for Google reCAPTCHA
- [react-recaptcha-that-works](https://github.com/douglasjunior/react-recaptcha-that-works) - A reCAPTCHA bridge for React that works
##### React State Management
- [redux](#redux) - Predictable State Container for JavaScript Apps
- [mobx](https://github.com/mobxjs/mobx) - Simple, scalable state management
- [react-query](https://github.com/tannerlinsley/react-query) - Hooks for fetching, caching and updating asynchronous data in React
- [flux](http://facebook.github.io/flux/) - Application architecture for building user interfaces
- [recoil](https://github.com/facebookexperimental/Recoil) - Experimental state management library for React apps
- [jotai](https://github.com/pmndrs/jotai) - Bottom-up approach to React state management with an atomic model
- [xstate-react](https://github.com/davidkpiano/xstate/tree/master/packages/xstate-react) - State machines and statecharts for the modern web
- [zustand](https://github.com/pmndrs/zustand) - Bear necessities for state management in React
- [easy-peasy](https://github.com/ctrlplusb/easy-peasy) - Vegetarian friendly state for React
- [hookstate](https://github.com/avkonst/hookstate) - The simple but very powerful and incredibly fast state management for React that is based on hooks
- [effector](https://github.com/zerobias/effector) - Fast and powerful reactive state manager
- [reactn](https://github.com/CharlesStover/reactn) - React, but with built-in global state management
- [react-facet](https://github.com/Mojang/ore-ui/tree/main/packages/%40react-facet/) - Observable-based state management for performant game UIs built in React
##### React AR and VR
- [Viro React](https://viromedia.com/viroreact/) - Platform for rapidly building AR/VR applications using React Native
##### React Renderers
- [react-three-fiber](https://github.com/pmndrs/react-three-fiber) - A React renderer for Three.js
- [react-pdf](https://github.com/diegomura/react-pdf) - Create PDF files using React
- [ink](https://github.com/vadimdemedes/ink) - React for interactive command-line apps
- [react-blessed](https://github.com/Yomguithereal/react-blessed) - A React renderer for blessed terminal interface library
- [react-sketchapp](https://github.com/airbnb/react-sketchapp) - Render React components to Sketch
- [react-figma](https://github.com/react-figma/react-figma) - A React renderer for Figma
- [react-nil](https://github.com/pmndrs/react-nil) - A react null renderer
- [remotion](https://github.com/JonnyBurger/remotion) - Create videos programmatically in React
##### Forms
- [formik](https://github.com/jaredpalmer/formik) - Build forms in React, without the tears
- [react-hook-form](https://github.com/react-hook-form/react-hook-form) - React Hooks for forms validation
- [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
- [unform](https://github.com/Rocketseat/unform) - Performance-focused API for React forms
- [formily](https://github.com/alibaba/formily) - Alibaba Group Unified Form Solution
- [uniforms](https://github.com/vazco/uniforms) - A React library for building forms from any schema
- [formsy-react](https://github.com/formsy/formsy-react/) - A form input builder and validator for React
- [react-formal](https://github.com/jquense/react-formal) - Sophisticated HTML form management for React
- [vest](https://github.com/ealush/vest) - Declarative form validation framework inspired by unit testing syntax.
##### Autocomplete
- [react-autocomplete by @rackt](https://github.com/rackt/react-autocomplete) - WAI-ARIA compliant React autocomplete (Archived, read-only)
- [react-autosuggest by @moroshko](https://github.com/moroshko/react-autosuggest) - WAI-ARIA compliant React autosuggest component
- [react-autocomplete by @eliseumds](https://github.com/eliseumds/react-autocomplete) - Just tasting some ReactJS + RxJS
- [react-autocomplete by @prometheusresearch](https://github.com/prometheusresearch/react-autocomplete) - Autocomplete widget based on React
- [instatype by @gragland](https://github.com/gragland/instatype) - Simple react autocomplete component
- [downshift](https://github.com/paypal/downshift) - 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components
- [React Bootstrap Typeahead](https://github.com/ericgio/react-bootstrap-typeahead) - A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js.
##### Graphics
- [react-art](https://github.com/facebook/react-art) - React Bridge to the ART Drawing Library
- [react-canvas](https://github.com/Flipboard/react-canvas) - High performance `` rendering for React components
- [react-famous](https://github.com/pilwon/react-famous) - Complex 3D animations UI at 60 FPS with Famo.us
- [react-kinetic](https://github.com/freiksenet/react-kinetic) - HTML5 Canvas via KineticJS using React
- [react-svg-morph](https://github.com/gorangajic/react-svg-morph) - morph your svg components one into another
- [react-hooks-svgdrawing](https://github.com/kmkzt/react-hooks-svgdrawing) - SVG Drawing with React hooks
- [react-svg-pan-zoom](https://github.com/chrvadala/react-svg-pan-zoom) - A React component that adds pan and zoom features to SVG.
##### Data Managing
- [immer](https://github.com/immerjs/immer) - Create the next immutable state by mutating the current one
- [ReSub](https://github.com/Microsoft/ReSub) - A library for writing better React components and data stores
- [immutable-js](https://github.com/immutable-js/immutable-js) - Immutable Data Collections for Javascript
- [baobab](https://github.com/Yomguithereal/baobab) - JavaScript & TypeScript persistent and optionally immutable data tree with cursors
- [WatermelonDB](https://github.com/Nozbe/WatermelonDB) - 🍉 Reactive & asynchronous database for powerful React and React Native apps ⚡️
- [RxDB](https://github.com/pubkey/rxdb) - A realtime Database for JavaScript Applications
##### Maps
- [react-googlemaps](https://github.com/pieterv/react-googlemaps) - React interface to Google maps
- [react-maps](https://github.com/matnel/react-maps) - A map component for React
- [react-google-maps](https://github.com/tomchentw/react-google-maps) - React.js Google Maps integration component
- [react-gmaps](https://github.com/MicheleBertoli/react-gmaps) - A Google Maps component for React.js
- [react-map-gl](https://github.com/uber/react-map-gl) - A React wrapper for MapboxGL-js plus overlay API
- [google-map-react](https://github.com/istarkov/google-map-react) - Isomorphic google map React component
- [react-mapbox-gl](https://github.com/alex3165/react-mapbox-gl) - A mapbox-gl-js wrapper to make the API react friendly
- [google-maps-react](https://github.com/fullstackreact/google-maps-react) - A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the Fullstack React team.
- [react-leaflet](https://react-leaflet.js.org/) - React components for Leaflet maps
- [react-geo](https://github.com/terrestris/react-geo) - A set of geo-related components using react, antd, and ol
- [pigeon-maps](https://github.com/mariusandra/pigeon-maps) - ReactJS maps without external dependencies
##### Charts
- [vx](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
- [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3
- [nivo](https://github.com/plouc/nivo) - Provides a rich set of data visualization components, built on top of the D3 and React libraries
- [echarts-for-react](https://github.com/hustcc/echarts-for-react) - Apache ECharts components for React wrapper
- [react-apexcharts](https://github.com/apexcharts/react-apexcharts) - React Component for ApexCharts
- [chartify](https://github.com/kis/chartify) - React plugin for building charts using CSS
##### React (Advanced Topics)
- [Build your own React](https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5)
- [Entire React code base explanation by visual block schemes](https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS)
---
### React Native
> Framework for building native apps using React
#### React Native General Resources
- [React Native Official Site](https://facebook.github.io/react-native/)
- [React Native GitHub](https://github.com/facebook/react-native)
- [React Native Newsletter](http://brentvatne.ca/react-native-newsletter/)
- [React Native Playground](https://rnplay.org/)
- [React Native Awesome List](https://github.com/jondot/awesome-react-native)
- [React Native StackOverflow](http://stackoverflow.com/questions/tagged/react-native)
- [React Native Radio](https://devchat.tv/react-native-radio/)
#### React Native Tutorials
- [React Native Tutorial](https://facebook.github.io/react-native/docs/tutorial.html)
- [Introducing React Native: Building Apps with JavaScript](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript)
- [Introduction to React Native: Building iOS Apps with JavaScript](http://www.appcoda.com/react-native-introduction/)
- [React Native Meets Async Functions](https://medium.com/the-exponent-log/react-native-meets-async-functions-3e6f81111173)
- [Digital Smart Mirror lab with React Native](http://atticuswhite.com/blog/react-native-smart-mirror-lab/)
- [The Beauty Of React Native: Building Your First iOS App With JavaScript (Part 1)](https://www.smashingmagazine.com/2016/04/the-beauty-of-react-native-building-your-first-ios-app-with-javascript-part-1/)
- [The Beauty Of React Native: Building Your First iOS App With JavaScript (Part 2)](https://www.smashingmagazine.com/2016/04/how-to-build-your-first-ios-app-with-javascript/)
- [A Mini-Course on React Native Flexbox](https://medium.com/@yoniweisbrod/a-mini-course-on-react-native-flexbox-2832a1ccc6)
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [Test driving react native applications](http://www.multunus.com/blog/2016/07/test-driving-react-native-applications/)
- [Using React Native With TypeScript](https://medium.com/@jan.hesters/using-typescript-with-react-native-946aa4b4ae6f)
#### React Native Development Tools
- [react-native-code-push](https://github.com/microsoft/react-native-code-push) - React Native module for CodePush
#### React Native Sample Apps
- [HackerNews](https://github.com/iSimar/HackerNews-React-Native)
- [Ziliun](https://github.com/sonnylazuardi/ziliun-react-native)
- [FinanceReactNative](https://github.com/7kfpun/FinanceReactNative)
- [SplashWalls](https://github.com/nashvail/SplashWalls)
- [NBAreact](https://github.com/jbkuczma/NBAreact)
- [Bus Timetable](https://github.com/EarlGeorge/timetable)
#### React Native Boilerplates
- [Create React Native App](https://github.com/react-community/create-react-native-app) - Create React Native apps that run on iOS, Android, and web
- [Ignite](https://github.com/infinitered/ignite) - The hottest CLI for React Native, boilerplates, plugins, generators, and more!
#### React Native Awesome Components
- [Expo](https://expo.io/) - The Expo platform for making cross-platform mobile apps
- [react-navigation](https://reactnavigation.org/) - Routing and navigation for your React Native apps
- [react-native-social-share](https://github.com/doefler/react-native-social-share) - Use the iOS and Android native Twitter and Facebook share popup with React Native
- [react-native-fbsdk](https://github.com/facebook/react-native-fbsdk) - A wrapper around the iOS Facebook SDK
- [react-native-side-menu](https://github.com/Kureev/react-native-side-menu) - Simple customizable component to create side menu
- [react-native-mapbox-gl](https://github.com/mapbox/react-native-mapbox-gl) - A Mapbox GL react native module
- [react-native-icons](https://github.com/corymsmith/react-native-icons) - Quick and easy icons in React Native
- [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) - 3000 Customizable Icons for React Native with support for NavBar/TabBar
- [react-native-google-signin](https://github.com/apptailor/react-native-google-signin) - Google Signin for React Native
- [react-native-picker-modal-view](https://github.com/pankod/react-native-picker-modal-view)
- [react-native-gifted-chat](https://github.com/FaridSafi/react-native-gifted-chat) - The most complete chat UI for React Native
- [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) - FastImage, performant React Native image component
- [recyclerlistview](https://github.com/Flipkart/recyclerlistview) - High performance listview for React Native and web!
- [react-native-largelist](https://github.com/bolan9999/react-native-largelist) - The best large list component for React Native
- [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) - Declarative API exposing platform native touch and gesture system to React Native
- [rn-placeholder](https://github.com/mfrachet/rn-placeholder) - Display some placeholder stuff before rendering your text or media content in React Native
---
### Videos
#### Video Tutorials
- [Trying React Hooks for the first time with Dan Abramov](https://www.youtube.com/watch?v=G-aO5hzo1aw)
---
### Demo React Apps
- [hackernews-react-graphql](https://github.com/clintonwoo/hackernews-react-graphql) - Hacker News clone rewritten with universal JavaScript, using React and GraphQL
- [reactjs-tmdb-app](https://github.com/SKempin/reactjs-tmdb-app) - Responsive React The Movie Database App
---
### Real React Apps
- [spectrum](https://github.com/withspectrum/spectrum) – Simple, powerful online communities
- [mattermost](https://github.com/mattermost/mattermost-webapp) - Open source Slack alternative
---
## Still to be organised:
YouTube video tutorial on JavaScript DOM Crash Course - Part 1 that you may find helpful:
Title: JavaScript DOM Crash Course - Part 1
URL: https://www.youtube.com/watch?v=0ik6X4DJKCc
Description: This video provides an introduction to the Document Object Model (DOM) in JavaScript. It covers the basics of what the DOM is, how to access and manipulate elements on a web page using JavaScript, and how to use event listeners to respond to user actions.
And here's an article on "What's the Document Object Model, and why you should know how to use it" that you may find informative:
Title: What's the Document Object Model, and why you should know how to use it
URL: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
Description: This article provides a comprehensive introduction to the Document Object Model (DOM), explaining what it is and why it's important for web development. It covers the structure of the DOM, how to access and manipulate elements using JavaScript, and how to use the DOM to respond to user events. It also includes examples and best practices for using the DOM effectively in your web projects.
Read the MDN Web Docs on querySelectorAll() and the MDN Web Docs on setAttribute()
The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors. Here is the link to the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
The Element.setAttribute() function sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise, a new attribute is added with the specified name and value. Here is the link to the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
Should I learn jQuery? Check out this article to learn more: https://nicozerpa.com/should-you-learn-jquery-in-2022/#:~:text=It's%20good%20to%20know%20jQuery,the%20DOM%20with%20less%20code.
Here is a jQuery cheat sheet: https://oscarotero.com/jquery/
Here is a list of ridiculously impressive HTML5 canvas-based experiments that will make you say, "Wow!" https://code.tutsplus.com/articles/21-ridiculously-impressive-html5-canvas-experiments--net-14210
Here is an article that provides a simple guide to help you understand closures in JavaScript: https://medium.com/@prashantramnyc/javascript-closures-simplified-d0d23fa06ba4
3.5 hours “JavaScript the Weird Parts”: https://www.youtube.com/watch?v=Bv_5Zv5c-Ts
"Scope and closures" from the "You Don’t Know JS" series: https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md
Check out this article for the best alternatives to Moment.js: https://medium.com/swlh/best-moment-js-alternatives-5dfa6861a1eb
Here is a link to Emmet's cheat sheet: https://docs.emmet.io/cheat-sheet/
Here is a link to a website that converts Unix timestamps: https://www.unixtimestamp.com/
Check out this article on the history of AJAX: https://hackernoon.com/the-xhr-history-lesson-you-never-wanted-2c892678f78d
Here is an article on synchronous vs. asynchronous JavaScript, call stack, promises, and more: https://www.freecodecamp.org/news/synchronous-vs-asynchronous-in-javascript/
GitHub cheatsheet:
https://training.github.com/downloads/github-git-cheat-sheet.pdf
Git and GitHub Tutorials #5 - Understanding GitHub Issues
Link: https://www.youtube.com/watch?v=TKJ4RdhyB5Y
How to resolve merge conflicts in Git
Link: https://www.youtube.com/watch?v=xNVM5UxlFSA
Here is a reference photo for GitHub branches!
Link: https://i.imgur.com/4PzC0Yk.png
APIs:
Big List of Free and Open Public APIs (No Auth Needed) [2022]
Link: https://mixedanalytics.com/blog/list-actually-free-open-no-auth-needed-apis/
CSS
Flexbox
https://mastery.games/flexboxzombies/
Algorithms and data structures:
https://github.com/Niccatania/studentAlgoPractice
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/
Javascript fundamentals:
https://www.codewars.com/collections/javascript-fundamentals
Coding challenge websites:
https://www.freecodecamp.org/news/the-8-most-popular-coding-challenge-websites-of-2020/
IIFE (Immediately Invoked Function Expression)
https://flaviocopes.com/javascript-iife/
flaviocopes.comflaviocopes.com
JavaScript Immediately-invoked Function Expressions (IIFE)
An Immediately-invoked Function Expression is a way to execute functions immediately, as soon as they are created. IIFEs are very useful because they don't pollute the global object, and they are a simple way to isolate variables declarations
HOC - Higher Order Functions and diving into function programming
https://www.youtube.com/watch?v=BMUiFMZr7vk (good start)
YouTubeYouTube | Fun Fun Function
Higher-order functions - Part 1 of Functional Programming in JavaScript
Cool tip: https://stackoverflow.com/questions/60155443/vscode-preview-markdown-by-default
```
Update vs settings.json file with:
"workbench.editorAssociations": {
"*.md": "vscode.markdown.preview.editor",
},
```
Stack OverflowStack Overflow
VSCode preview markdown by default
99.999999999% of my work with markdown files is reading. Can I enable preview mode by default for this files?
Review the ternary operator - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
developer.mozilla.orgdeveloper.mozilla.org
Conditional (ternary) operator - JavaScript | MDN
The conditional (ternary) operator is the only JavaScript operator that takes three operands:
a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.
This operator is frequently used as an alternative to an if...else statement.
javascript30.com
JavaScript 30
Build 30 things with vanilla JS in 30 days with 30 tutorials (931 kB)
hackinbitshackinbits
Understanding Map in Javascript - Part 1 | hackinbits
Map is a collection of key and value pairs, similar to Object. Let's learn the basics of Map in this article. (142 kB)
https://www.hackinbits.com/articles/js/understanding-map-in-javascript---part-1
Blog - Bobby HadzBlog - Bobby Hadz
How to Initialize a Map with Values in JavaScript | bobbyhadz
Pass an array containing arrays of key-value pairs to the Map() constructor to initialize a Map with values. The first element in each array should be the key and the second, the value. (49 kB)
https://bobbyhadz.com/blog/javascript-initialize-map-with-values
https://www.youtube.com/watch?v=8NX808LlUFQ
YouTube | Before Semicolon
Map/Dictionaries in javascript - When to use Map vs Object
Medium
Making Objects Iterable in JavaScript
Usually when we think of a data structure being iterable, we think of arrays and strings. JavaScript provides many ways to iterate over an…
https://medium.com/swlh/making-objects-iterable-in-javascript-252d9e270be6
markdown license badge images - https://gist.github.com/lukas-h/2a5d00690736b4c3a7ba
YouTube | The Net Ninja
Object Oriented JavaScript Tutorial #1 - Introduction
https://www.youtube.com/watch?v=4l3bTDlT6ZI&list=PL4cUxeGkcC9i5yvDkJgt60vNVWffpblB7
Encapsulation - https://www.w3schools.blog/encapsulation-javascript-js
Inheritance - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
Abstraction - https://linuxhint.com/javascript-abstraction/
Polymorphism - https://www.youtube.com/watch?v=XxMUJ9-Pb2E
https://levelup.gitconnected.com/why-we-dont-need-the-function-keyword-in-javascript-anymore-7e43a8709491
Function expression vs function declaration - https://www.freecodecamp.org/news/when-to-use-a-function-declarations-vs-a-function-expression-70f15152a0a0/
How to clone an array in javascript - https://www.freecodecamp.org/news/how-to-clone-an-array-in-javascript-1d3183468f6a/
freeCodeCamp.orgfreeCodeCamp.org
How to clone an array in JavaScript
JavaScript has many ways to do anything. I’ve written on 10 Ways to Write pipe/compose in JavaScript
[/news/10-ways-to-write-pipe-compose-in-javascript-f6d54c575616/], and now we’re doing arrays. 1. Spread Operator (Shallow copy) Ever since ES6 dropped, this has been the most popular method.
Shallow copy vs deep copy difference
https://www.freecodecamp.org/news/copying-stuff-in-javascript-how-to-differentiate-between-deep-and-shallow-copies-b6d8c1ef09cd/
freeCodeCamp.orgfreeCodeCamp.org
How to differentiate between deep and shallow copies in JavaScript
https://medium.com/swlh/node-js-c-da454904811f
MediumMedium
Node.Js == C++ ?
A lot of Node.js users don’t know that a great portion of its modules are actually implemented in C++. In this article, we will take a…
Reading time
4 min read
https://robertmarshall.dev/blog/arrange-act-and-assert-pattern-the-three-as-of-unit-testing/
robertmarshall.devrobertmarshall.dev
Arrange, Act and Assert Pattern: The Three A's of Unit Testing | Rob Marshall
How to use Arrange Act Assert pattern in unit testing, and why it is so helpful. Arrange-Act-Assert is powerful because it is simple. By keeping the tests short and concise means clean tests. (36 kB)
https://www.digitalocean.com/community/conceptual-articles/prototype-design-pattern-in-javascript
digitalocean.comdigitalocean.com
Prototype Design Pattern in JavaScript | DigitalOcean
Any JavaScript developer has either seen the keyword prototype, confused by the prototypical inheritance, or implemented prototypes in their code. The Protot…
Tip - extension - https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
marketplace.visualstudio.commarketplace.visualstudio.com
ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294
MediumMedium
What’s the Difference Between Synthetic React Events and JavaScript Events?
Understanding the key differences between JavaScript events
Reading time
8 min read
https://create-react-app.dev/docs/deployment/#github-pages
create-react-app.devcreate-react-app.dev
Deployment | Create React App
npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file. For more information see the production build section.
https://create-react-app.dev/docs/deployment/#github-pages
https://www.youtube.com/watch?v=Ma6DRDIedVE
YouTube | Tech With Tim
React For Beginners #1 - Introduction & Environment Setup
https://www.smashingmagazine.com/2020/01/introduction-react-context-api/
https://blog.logrocket.com/understanding-redux-tutorial-examples/
https://www.youtube.com/watch?v=TNhaISOUy6Q (great video introducing a bunch of react hooks)
YouTubeYouTube | Fireship
10 React Hooks Explained // Plus Build your own from Scratch
https://gist.github.com/jdtdesigns/936839ea2cea6b4d3193b520c750a09b A great React Resource for you all. The instructor broke down each concept in React into singular videos, so you can jump into a particular concept that you may be struggling with, without having to watch an entire single course video. I think it's a great idea and I think getting another perspective on these topics is also a good idea.
https://wasuradananjith.medium.com/testing-with-jest-and-enzyme-in-react-part-4-shallow-vs-mount-in-enzyme-d60cad73f85c shallow() vs mount()
MediumMedium
Testing with Jest and Enzyme in React — Part 4 (shallow vs. mount in Enzyme)
Most of us have a problem of clarifying When to use shallow and when to use mount when testing with Enzyme. In this tutorial, I am going…
Reading time
7 min read
https://gist.github.com/git2thehub/d08063324d49667b2571f79f486088c3
https://gist.github.com/git2thehub/dabbd4d0233d62d429f35e9851e56cb4
https://gist.github.com/git2thehub/274c10449b77ff54e376ec0aacd36678
https://reactrouter.com/en/main/upgrading/v5
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
marketplace.visualstudio.commarketplace.visualstudio.com
vscode-icons - Visual Studio Marketplace
Extension for Visual Studio Code - Icons for Visual Studio Code
https://react-bootstrap.github.io/
https://vitejs.dev/guide/
https://vercel.com/solutions/nextjs
https://cmder.app/
https://www.youtube.com/watch?app=desktop&v=cchqeWY0Nak
https://github.com/airbnb/javascript
https://esbuild.github.io/
short tutorial on the openWeatherMap API http://osp123.github.io/tutorials/html/weatherAPI.html
Register for a free account on RapidAPI https://rapidapi.com/ Giphy https://giphy.com/, and GNews https://gnews.io/
https://zellwk.com/blog/js-promises/
zellwk.comzellwk.com
Promises in JavaScript | Zell Liew
Have you encountered promises in JavaScript and wondered what they are? Why are they called promises? Are they related to a promise you make to another person in any way? Furthermore, why do you use promises? What benefits do they have over traditional callbacks for asynchronous JavaScript
https://www.youtube.com/watch?v=2d7s3spWAzo
YouTubeYouTube | Fun Fun Function
Promises - Part 8 of Functional Programming in JavaScript
freeCodeCamp.org
https://www.freecodecamp.org/news/how-to-add-a-netlify-form-to-a-react-app/
How to Add a Netlify Form to a React App Built with create-react-app
If you are a web developer, at some point you will need to capture information from people who use your website or app. One way of doing so is by using HTML forms. But there are also tons of frameworks out there that you can use to build web apps
a list of 'free programming books'
https://github.com/EbookFoundation/free-programming-books
There's a mix of free online books and other resources that you may find useful
https://coding-boot-camp.github.io/full-stack/nodejs/how-to-install-nodejs
coding-boot-camp.github.iocoding-boot-camp.github.io
How to Install NodeJS
In this guide, we'll walk through the steps we need to take to install NodeJS onto our Windows or macOS machines.
https://www.reddit.com/r/webdev/comments/10qqipt/why_does_instagram_have_so_many_empty_div/
redditreddit
Why does Instagram have so many empty div elements in their code?
See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
---
## Contributors
[
](https://github.com/stevelab1)[](https://github.com/stevelab1)