links.json

{"categories": [
    {
        "category": "🌐 Web Based Development Options 🚀",
        "directory": "development-options",
        "links": [
            {
                "name": "Babel Standalone",
                "descList": [
                    "Standalone build of Babel for use in non-Node.js environments.",
                    "Babel Standalone is very large so using it for productions apps is generally not recommended in most situations.",
                    "However it is very useful for development because you can debug and step through code directly in browser with React Development Tools.",
                    "JSX Code used in a Browser with Babel Standalone can also be used for local development using [create-react-app] and other tools."
                ],
                "example": "babel.htm",
                "site": "https://babeljs.io/docs/en/babel-standalone",
                "github": "https://github.com/babel/babel/tree/master/packages/babel-standalone",
                "image": "https://d33wubrfki0l68.cloudfront.net/7a197cfe44548cc1a3f581152af70a3051e11671/78df8/img/babel.svg"
            },
            {
                "name": "DataFormsJS JSX Loader",
                "descList": [
                    "An ultra-fast and tiny (6.6 kB) browser based compiler for JSX / React.",
                    "Created for production use with all browsers. This site was created because of the JSX Loader and most examples on this site use it.",
                    "The JSX Loader is designed for compatibility with Babel Standalone.",
                    "It compiles JSX to JS for modern browsers and for legacy browsers it will download and use Polyfills and Babel Standalone."
                ],
                "example": "jsx-loader.htm",
                "site": "https://www.dataformsjs.com/",
                "github": "https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md",
                "image": "https://raw.githubusercontent.com/dataformsjs/static-files/master/img/docs/jsx-loader.png"
            },
            {
                "name": "HTM (Hyperscript Tagged Markup)",
                "descList": [
                    "JSX alternative using standard tagged templates, with compiler support.",
                    "HTM is extremely small (~0.5 kB).",
                    "It provides many options and works with all modern browsers; however this means it will not work with legacy browsers."
                ],
                "example": "hyperscript-tagged-markup.htm",
                "site": null,
                "github": "https://github.com/developit/htm",
                "image": "https://raw.githubusercontent.com/dataformsjs/static-files/master/img/awesome-web-react/card-images/developit-htm.png"
            },
            {
                "name": "React without JSX",
                "descList": [
                    "Most React apps are created using JSX, however it is not required and plain JavaScript can be used.",
                    "JSX is generally used because it allows for much more readable code and easier development with React."
                ],
                "example": "no-jsx.htm",
                "site": "https://reactjs.org/docs/react-without-jsx.html",
                "github": null,
                "image": "img/logos/react-no-jsx-v2.png"
            }
        ]
    },
    {
        "category": "🌟 Awesome Lists 🌠",
        "directory": null,
        "description": "Find a large selection of React Components and Tools from these Awesome React Lists:",
        "links": [
            {
                "name": "Awesome React",
                "description": "A collection of awesome things regarding the React ecosystem.",
                "github": "https://github.com/enaqx/awesome-react",
                "image": "https://raw.githubusercontent.com/dataformsjs/static-files/master/img/awesome-web-react/card-images/awesome-react.png"
            },
            {
                "name": "Awesome React Components",
                "description": "Curated List of React Components & Libraries.",
                "github": "https://github.com/brillout/awesome-react-components",
                "image": "https://raw.githubusercontent.com/dataformsjs/static-files/master/img/awesome-web-react/card-images/awesome-react-components.png"
            }
        ]
    },
    {
        "category": "🎨 UI / Design 🌈",
        "directory": "ui",
        "links": [
            {
                "name": "Ant Design",
                "description": "A UI Design Language and React UI library",
                "example": "ant-design.htm",
                "site": "https://ant.design/",
                "github": "https://github.com/ant-design/ant-design",
                "image": "img/logos/ant-design.svg",
                "imageClassName": "width100_pt20"
            },
            {
                "name": "Styled Components",
                "description": "Visual primitives for the component age.",
                "example": "styled-components.htm",
                "site": "https://styled-components.com/",
                "github": "https://github.com/styled-components/styled-components",
                "image": "https://raw.githubusercontent.com/styled-components/brand/master/styled-components.png",
                "imageClassName": "width100_pt20"
            },
            {
                "name": "Evergreen",
                "description": "Evergreen React UI Framework by Segment.",
                "example": "evergreen.htm",
                "site": "https://evergreen.segment.com/",
                "github": "https://github.com/segmentio/evergreen",
                "image": "img/logos/evergreen.png",
                "imageClassName": "width200_pt20"
            },
            {
                "name": "React-Toastify",
                "description": "React-Toastify allows you to add notifications to your app with ease.",
                "example": "react-toastify.htm",
                "site": "https://fkhadra.github.io/react-toastify/",
                "github": "https://github.com/fkhadra/react-toastify",
                "image": "img/logos/react-toastify.png",
                "imageClassName": "width100_pt20"
            },
            {
                "name": "CoreUI",
                "description": "Open Source UI components library for creating modern, beautiful, and responsive applications.",
                "example": "coreui.htm",
                "site": "https://coreui.io/react/",
                "github": "https://github.com/coreui/coreui-react",
                "image": "img/logos/core-ui.svg",
                "imageClassName": "width100_pt20"
            }
        ]
    },
    {
        "category": "✈️ Routing 🛩️",
        "directory": "routing",
        "links": [
            {
                "name": "React Router",
                "description": "Declarative routing for React.",
                "example": "react-router.htm",
                "site": "https://reacttraining.com/react-router/",
                "github": "https://github.com/ReactTraining/react-router",
                "image": "img/logos/react-router-mark-color.svg",
                "imageClassName": "width100_pt20"
            }
        ]
    },
    {
        "category": "🖥️ Forms 📱",
        "directory": "forms",
        "links": [
            {
                "name": "React Hook Form",
                "description": "Performant, flexible and extensible forms with easy to use validation.",
                "example": "react-hook-form.htm",
                "site": "https://react-hook-form.com/",
                "github": "https://github.com/react-hook-form/react-hook-form",
                "image": "img/logos/react-hook-form.svg",
                "imageClassName": "react-hook-form"
            }
        ]
    },
    {
        "category": "⬆️ Select Controls ⬇️",
        "directory": "select-controls",
        "links": [
            {
                "name": "React Select",
                "description": "A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.",
                "example": "react-select.htm",
                "site": "https://react-select.com/home",
                "github": "https://github.com/jedwatson/react-select",
                "image": "https://raw.githubusercontent.com/dataformsjs/static-files/master/img/awesome-web-react/card-images/react-select.png"
            }
        ]
    },
    {
        "category": "📜 Rich Text Editors 📜",
        "directory": "rich-text-editors",
        "links": [
            {
                "name": "Draft.js",
                "description": "Rich Text Editor Framework for React.",
                "example": "draft-js.htm",
                "site": "https://draftjs.org/",
                "github": "https://github.com/facebook/draft-js",
                "image": "img/logos/draftjs-logo.svg",
                "imageClassName": "width100_pt20"
            }
        ]
    },
    {
        "category": "👌 Drag and Drop 🤏",
        "directory": "drag-and-drop",
        "links": [
            {
                "name": "React DnD",
                "description": "Drag and Drop for React",
                "example": "react-dnd.htm",
                "site": "https://react-dnd.github.io/react-dnd/about",
                "github": "https://github.com/react-dnd/react-dnd",
                "image": "https://raw.githubusercontent.com/dataformsjs/static-files/master/img/awesome-web-react/card-images/react-dnd.png"
            }
        ]
    },
    {
        "category": "📷 Image and Media Controls 🖼️",
        "directory": "image-and-media-controls",
        "links": [
            {
                "name": "DataFormsJS Image Gallery",
                "description": "Component <ImageGallery> that shows Large Image in Overlay with Mobile and Desktop support.",
                "example": "dataformjs-image-gallery.htm",
                "site": "https://www.dataformsjs.com/",
                "github": "https://github.com/dataformsjs/dataformsjs",
                "image": "https://raw.githubusercontent.com/dataformsjs/website/master/public/img/examples/image-gallery.svg"
            }
        ]
    },
    {
        "category": "📊 Charts and Maps 🗺️",
        "directory": "charts-and-maps",
        "links": [
            {
                "name": "React Simple Maps",
                "description": "Create beautiful SVG maps in react with d3-geo and topojson using a declarative api.",
                "example": "react-simple-maps.htm",
                "site": "https://www.react-simple-maps.io/",
                "github": "https://github.com/zcreativelabs/react-simple-maps",
                "image": "https://raw.githubusercontent.com/dataformsjs/static-files/master/img/awesome-web-react/card-images/react-simple-maps.png"
            },
            {
                "name": "React Chart.js 2",
                "description": "React wrapper for Chart.js.",
                "example": "react-chartjs-2.htm",
                "site": "https://react-chartjs-2.js.org/",
                "github": "https://github.com/jerairrest/react-chartjs-2",
                "image": "https://raw.githubusercontent.com/chartjs/chartjs.github.io/master/img/chartjs-logo.svg",
                "imageClassName": "pt20"
            },
            {
                "name": "React ApexCharts",
                "description": "React.js wrapper for ApexCharts to build interactive visualizations in React.",
                "example": "react-apexcharts.htm",
                "site": "https://apexcharts.com/",
                "github": "https://github.com/apexcharts/react-apexcharts",
                "image": "img/logos/apex-charts.png",
                "imageClassName": "pt20"
            }
        ]
    },
    {
        "category": "📚 Component and Hook Libraries ⚙️",
        "directory": "component-and-hook-libraries",
        "links": [
            {
                "name": "DataFormsJS",
                "description": "Display data from JSON and GraphQL Services, Lazy Loading, Filter, Sorting, I18N, L10N, and more.",
                "example": "dataformsjs.htm",
                "site": "https://www.dataformsjs.com/",
                "github": "https://github.com/dataformsjs/dataformsjs",
                "image": "https://raw.githubusercontent.com/dataformsjs/static-files/master/img/logo/DataFormsJS-144px.png",
                "imageClassName": "width100_pt20"
            },
            {
                "name": "React Query",
                "description": "Hooks for fetching, caching and updating asynchronous data in React.",
                "example": "react-query.htm",
                "site": "https://react-query.tanstack.com/",
                "github": "https://github.com/tannerlinsley/react-query",
                "image": "https://raw.githubusercontent.com/tannerlinsley/react-query/master/media/repo-dark.png"
            },
            {
                "name": "SWR",
                "description": "React Hooks library for data fetching.",
                "example": "vercel-swr.htm",
                "site": "https://swr.vercel.app/",
                "github": "https://github.com/vercel/swr",
                "image": "img/logos/swr.png"
            }
        ]
    },
    {
        "category": "⚙️ Javascript and jQuery Libraries ⚙️",
        "directory": "javascript-and-jquery",
        "links": [
            {
                "name": "Documentation from React",
                "description": "Integrating with Other Libraries.",
                "site": "https://reactjs.org/docs/integrating-with-other-libraries.html",
                "image": "https://raw.githubusercontent.com/dataformsjs/static-files/master/img/awesome-web-react/card-images/integrating-with-other-libraries.png"
            },
            {
                "name": "Chosen",
                "description": "Chosen is a widely used jQuery plugin that makes long, unwieldy select boxes much more user-friendly.",
                "example": "chosen.htm",
                "site": "https://harvesthq.github.io/chosen/",
                "github": "https://github.com/harvesthq/chosen",
                "image": "https://raw.githubusercontent.com/dataformsjs/static-files/master/img/awesome-web-react/card-images/chosen.png"
            },
            {
                "name": "Remarkable",
                "description": "Markdown parser done right. Fast and easy to extend.",
                "example": "remarkable.htm",
                "github": "https://github.com/jonschlinkert/remarkable",
                "image": "https://raw.githubusercontent.com/dataformsjs/static-files/master/img/awesome-web-react/card-images/remarkable.png"
            }
        ]
    },
    {
        "category": "🗃️ State Management 📦",
        "directory": "state-management",
        "description": "State Management for large apps can be a complex issue with many options. These examples show the same simple example and how state can be shared among unrelated components. View code comments in each example for more details.",
        "links": [
            {
                "name": "React Redux",
                "description": "A Predictable State Container for JS Apps.",
                "example": "react-redux.htm",
                "site": "https://react-redux.js.org/",
                "github": "https://github.com/reduxjs/react-redux",
                "image": "https://d33wubrfki0l68.cloudfront.net/0834d0215db51e91525a25acf97433051f280f2f/c30f5/img/redux.svg",
                "imageClassName": "width100_pt20"
            },
            {
                "name": "React Flux",
                "description": "Application Architecture for Building User Interfaces.",
                "example": "react-flux.htm",
                "site": "https://facebook.github.io/flux/",
                "github": "https://github.com/facebook/flux",
                "image": "img/logos/flux-logo-color.svg",
                "imageClassName": "react-flux"
            },
            {
                "name": "React Hooks",
                "description": "React Hooks let you use state and other React features without writing classes.",
                "example": "react-hooks.htm",
                "site": "https://reactjs.org/docs/hooks-reference.html",
                "image": "img/logos/react-hooks.png"
            },
            {
                "name": "Recoil",
                "description": "A Facebook experimental state management library for complex React UIs.",
                "example": "react-recoil.htm",
                "site": "https://recoiljs.org/",
                "github": "https://github.com/facebookexperimental/Recoil",
                "image": "img/logos/react-recoil.png"
            }
        ]
    }
]}