diff --git a/content/roadmaps.json b/content/roadmaps.json index 95395de5b..e1ebd1eca 100644 --- a/content/roadmaps.json +++ b/content/roadmaps.json @@ -251,7 +251,6 @@ "isTextHeavy": false, "isCommunity": false, "featured": true, - "resourcesPath": "/roadmaps/103-react/resources.md", "jsonUrl": "/project/react.json", "versions": [ "latest", diff --git a/content/roadmaps/103-react/content-paths.json b/content/roadmaps/103-react/content-paths.json index 3a671f683..2227ad8e1 100644 --- a/content/roadmaps/103-react/content-paths.json +++ b/content/roadmaps/103-react/content-paths.json @@ -1,73 +1,70 @@ { "home": "/roadmaps/103-react/content/readme.md", - "react-advanced-topics": "/roadmaps/103-react/content/101-react-advanced-topics/readme.md", - "react-advanced-topics:hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md", - "react-advanced-topics:hooks:common-hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md", - "react-advanced-topics:hooks:writing-your-own-hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md", - "react-advanced-topics:context": "/roadmaps/103-react/content/101-react-advanced-topics/101-context.md", - "react-advanced-topics:refs": "/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md", - "react-advanced-topics:render-props": "/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md", - "react-advanced-topics:high-order-components": "/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md", - "react-advanced-topics:portals": "/roadmaps/103-react/content/101-react-advanced-topics/105-portals.md", - "react-advanced-topics:error-boundaries": "/roadmaps/103-react/content/101-react-advanced-topics/106-error-boundaries.md", - "react-advanced-topics:fiber-architecture": "/roadmaps/103-react/content/101-react-advanced-topics/107-fiber-architecture.md", - "react-fundamental-topics": "/roadmaps/103-react/content/100-react-fundamental-topics/readme.md", - "react-fundamental-topics:cli-tools": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/readme.md", - "react-fundamental-topics:cli-tools:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/100-create-react-app.md", - "react-fundamental-topics:cli-tools:vite": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.md", - "react-fundamental-topics:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md", - "react-fundamental-topics:jsx": "/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md", - "react-fundamental-topics:components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md", - "react-fundamental-topics:components:functional-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md", - "react-fundamental-topics:components:class-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md", - "react-fundamental-topics:props-vs-state": "/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md", - "react-fundamental-topics:conditional-rendering": "/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md", - "react-fundamental-topics:component-life-cycle": "/roadmaps/103-react/content/100-react-fundamental-topics/105-component-life-cycle.md", - "react-fundamental-topics:lists-and-keys": "/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md", - "react-fundamental-topics:composition-vs-inheritance": "/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md", - "react-fundamental-topics:basic-hooks": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md", - "react-fundamental-topics:basic-hooks:use-state": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md", - "react-fundamental-topics:basic-hooks:use-effect": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md", - "react-fundamental-topics:events": "/roadmaps/103-react/content/100-react-fundamental-topics/109-events.md", - "react-ecosystem": "/roadmaps/103-react/content/102-react-ecosystem/readme.md", - "react-ecosystem:routers": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/readme.md", - "react-ecosystem:routers:react-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md", - "react-ecosystem:routers:reach-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/101-reach-router.md", - "react-ecosystem:ssr": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/readme.md", - "react-ecosystem:ssr:next-js": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-next-js.md", - "react-ecosystem:ssr:remix": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-remix.md", - "react-ecosystem:ssg": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/readme.md", - "react-ecosystem:ssg:gatsby": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/101-gatsby.md", - "react-ecosystem:api-calls": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md", - "react-ecosystem:api-calls:react-query": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md", - "react-ecosystem:api-calls:swr": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-swr.md", - "react-ecosystem:api-calls:apollo": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md", - "react-ecosystem:api-calls:relay-modern": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md", - "react-ecosystem:api-calls:axios": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md", - "react-ecosystem:api-calls:unfetch": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md", - "react-ecosystem:api-calls:superagent": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md", - "react-ecosystem:mobile": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/readme.md", - "react-ecosystem:mobile:react-native": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/100-react-native.md", - "react-ecosystem:forms": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md", - "react-ecosystem:forms:react-hook-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/100-react-hook-form.md", - "react-ecosystem:forms:formik": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/101-formik.md", - "react-ecosystem:forms:final-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/102-final-form.md", - "react-ecosystem:testing": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/readme.md", - "react-ecosystem:testing:jest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/100-jest.md", - "react-ecosystem:testing:vitest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/103-vitest.md", - "react-ecosystem:testing:playwright": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/104-playwright.md", - "react-ecosystem:testing:react-testing-library": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md", - "react-ecosystem:testing:cypress": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/102-cypress.md", - "react-ecosystem:state-management": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md", - "react-ecosystem:state-management:context-state": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-context-state.md", - "react-ecosystem:state-management:zustand": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-zustand.md", - "react-ecosystem:state-management:redux": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux/readme.md", - "react-ecosystem:state-management:redux:redux-toolkit": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux/100-redux-toolkit.md", - "react-ecosystem:state-management:mobx": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/102-mobx.md", - "react-ecosystem:styling": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md", - "react-ecosystem:styling:chakra-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md", - "react-ecosystem:styling:material-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md", - "react-ecosystem:styling:mantine": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-mantine.md", - "react-ecosystem:styling:styled-components": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md", - "react-ecosystem:styling:emotion": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md" -} + "cli-tools": "/roadmaps/103-react/content/101-cli-tools/readme.md", + "cli-tools:create-react-app": "/roadmaps/103-react/content/101-cli-tools/101-create-react-app.md", + "cli-tools:vite": "/roadmaps/103-react/content/101-cli-tools/100-vite.md", + "components": "/roadmaps/103-react/content/102-components/readme.md", + "components:functional-components": "/roadmaps/103-react/content/102-components/101-functional-components.md", + "components:class-components": "/roadmaps/103-react/content/102-components/100-class-components.md", + "components:jsx": "/roadmaps/103-react/content/102-components/102-jsx.md", + "components:props-vs-state": "/roadmaps/103-react/content/102-components/103-props-vs-state.md", + "components:conditional-rendering": "/roadmaps/103-react/content/102-components/104-conditional-rendering.md", + "components:composition-vs-inheritance": "/roadmaps/103-react/content/102-components/105-composition-vs-inheritance.md", + "rendering": "/roadmaps/103-react/content/103-rendering/readme.md", + "rendering:lists-and-keys": "/roadmaps/103-react/content/103-rendering/101-lists-and-keys.md", + "rendering:component-life-cycle": "/roadmaps/103-react/content/103-rendering/100-component-life-cycle.md", + "rendering:render-props": "/roadmaps/103-react/content/103-rendering/102-render-props.md", + "rendering:refs": "/roadmaps/103-react/content/103-rendering/103-refs.md", + "rendering:events": "/roadmaps/103-react/content/103-rendering/104-events.md", + "rendering:high-order-components": "/roadmaps/103-react/content/103-rendering/105-high-order-components.md", + "hooks": "/roadmaps/103-react/content/104-hooks/readme.md", + "hooks:basic-hooks": "/roadmaps/103-react/content/104-hooks/100-basic-hooks/readme.md", + "hooks:basic-hooks:use-state": "/roadmaps/103-react/content/104-hooks/100-basic-hooks/100-use-state.md", + "hooks:basic-hooks:use-effect": "/roadmaps/103-react/content/104-hooks/100-basic-hooks/101-use-effect.md", + "hooks:writing-your-own-hooks": "/roadmaps/103-react/content/104-hooks/101-writing-your-own-hooks.md", + "hooks:common-hooks": "/roadmaps/103-react/content/104-hooks/102-common-hooks.md", + "routers": "/roadmaps/103-react/content/105-routers/readme.md", + "routers:react-router": "/roadmaps/103-react/content/105-routers/100-react-router.md", + "routers:reach-router": "/roadmaps/103-react/content/105-routers/101-reach-router.md", + "state-management": "/roadmaps/103-react/content/106-state-management/readme.md", + "state-management:context": "/roadmaps/103-react/content/106-state-management/100-context.md", + "state-management:zustand": "/roadmaps/103-react/content/106-state-management/101-zustand.md", + "state-management:redux-and-redux-toolkit": "/roadmaps/103-react/content/106-state-management/102-redux-and-redux-toolkit.md", + "state-management:mobx": "/roadmaps/103-react/content/106-state-management/103-mobx.md", + "state-management:recoil": "/roadmaps/103-react/content/106-state-management/104-recoil.md", + "styling": "/roadmaps/103-react/content/107-styling/readme.md", + "styling:chakra-ui": "/roadmaps/103-react/content/107-styling/105-chakra-ui.md", + "styling:material-ui": "/roadmaps/103-react/content/107-styling/104-material-ui.md", + "styling:mantine": "/roadmaps/103-react/content/107-styling/102-mantine.md", + "styling:tailwind": "/roadmaps/103-react/content/107-styling/103-tailwind.md", + "styling:styled-components": "/roadmaps/103-react/content/107-styling/100-styled-components.md", + "styling:emotion": "/roadmaps/103-react/content/107-styling/101-emotion.md", + "api-calls": "/roadmaps/103-react/content/108-api-calls/readme.md", + "api-calls:apollo": "/roadmaps/103-react/content/108-api-calls/100-apollo.md", + "api-calls:relay": "/roadmaps/103-react/content/108-api-calls/101-relay.md", + "api-calls:urql": "/roadmaps/103-react/content/108-api-calls/102-urql.md", + "api-calls:swr": "/roadmaps/103-react/content/108-api-calls/103-swr.md", + "api-calls:axios": "/roadmaps/103-react/content/108-api-calls/105-axios.md", + "api-calls:superagent": "/roadmaps/103-react/content/108-api-calls/106-superagent.md", + "api-calls:react-query": "/roadmaps/103-react/content/108-api-calls/104-react-query.md", + "testing": "/roadmaps/103-react/content/109-testing/readme.md", + "testing:jest": "/roadmaps/103-react/content/109-testing/100-jest.md", + "testing:vitest": "/roadmaps/103-react/content/109-testing/101-vitest.md", + "testing:react-testing-library": "/roadmaps/103-react/content/109-testing/102-react-testing-library.md", + "testing:cypress": "/roadmaps/103-react/content/109-testing/103-cypress.md", + "testing:playwright": "/roadmaps/103-react/content/109-testing/104-playwright.md", + "frameworks": "/roadmaps/103-react/content/110-frameworks/readme.md", + "frameworks:next-js": "/roadmaps/103-react/content/110-frameworks/101-next-js.md", + "frameworks:remix": "/roadmaps/103-react/content/110-frameworks/100-remix.md", + "forms": "/roadmaps/103-react/content/111-forms/readme.md", + "forms:react-hook-form": "/roadmaps/103-react/content/111-forms/100-react-hook-form.md", + "forms:formik": "/roadmaps/103-react/content/111-forms/101-formik.md", + "forms:final-form": "/roadmaps/103-react/content/111-forms/102-final-form.md", + "suspense": "/roadmaps/103-react/content/112-suspense.md", + "portals": "/roadmaps/103-react/content/113-portals.md", + "error-boundaries": "/roadmaps/103-react/content/114-error-boundaries.md", + "fiber-architecture": "/roadmaps/103-react/content/115-fiber-architecture.md", + "mobile": "/roadmaps/103-react/content/116-mobile/readme.md", + "mobile:react-native": "/roadmaps/103-react/content/116-mobile/100-react-native.md", + "react-roadmap-note": "/roadmaps/103-react/content/100-react-roadmap-note.md" +} \ No newline at end of file diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md deleted file mode 100644 index c4e56125c..000000000 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md +++ /dev/null @@ -1,9 +0,0 @@ -# Create React App - -Create React App is the CLI based tool and is the best way to start building a new single-page application in React. - -It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine. - -Free Content -Official Website -Advanced: Custom Setup with Webpack diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/102-use-context.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/102-use-context.md deleted file mode 100644 index 2fe90d27d..000000000 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/102-use-context.md +++ /dev/null @@ -1,8 +0,0 @@ -# useContext Hook - -`useContext` hook is used to read and subscribe to context from your component. Context allows a parent component to pass data down the entire component tree below it. - -Free Content -Using the Context Hook -Learn useContext in 13 Minutes -How to useContext in React diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/readme.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/readme.md deleted file mode 100644 index e2ab25d31..000000000 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/readme.md +++ /dev/null @@ -1,7 +0,0 @@ -# React - -React is a JavaScript library for building user interfaces. It is an open-source, component-based front end library responsible only for the view layer of the application. - -Free Content -Official Website -Official Documentation diff --git a/content/roadmaps/103-react/content/100-react-roadmap-note.md b/content/roadmaps/103-react/content/100-react-roadmap-note.md new file mode 100644 index 000000000..aee1b039e --- /dev/null +++ b/content/roadmaps/103-react/content/100-react-roadmap-note.md @@ -0,0 +1,3 @@ +# Note + +This roadmap specifically covers **React and the ecosystem** around it. You will notice that it is missing things like version control, package managers, build tools, linters, task runners and other things that are not directly related to React; this is intentional. Have a look at the [Frontend Roadmap](/roadmaps/frontend) for a more comprehensive overview of the frontend ecosystem. diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.md b/content/roadmaps/103-react/content/101-cli-tools/100-vite.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.md rename to content/roadmaps/103-react/content/101-cli-tools/100-vite.md diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/100-create-react-app.md b/content/roadmaps/103-react/content/101-cli-tools/101-create-react-app.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/100-create-react-app.md rename to content/roadmaps/103-react/content/101-cli-tools/101-create-react-app.md diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/readme.md b/content/roadmaps/103-react/content/101-cli-tools/readme.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/readme.md rename to content/roadmaps/103-react/content/101-cli-tools/readme.md diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/101-context.md b/content/roadmaps/103-react/content/101-react-advanced-topics/101-context.md deleted file mode 100644 index 1e3a6f2ae..000000000 --- a/content/roadmaps/103-react/content/101-react-advanced-topics/101-context.md +++ /dev/null @@ -1,9 +0,0 @@ -# Context - -Context provides a way to pass data through the component tree without having to pass props down manually at every level. - -In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree. - -Free Content -Official React Context Docs -React Context: Why, How, and When diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/readme.md b/content/roadmaps/103-react/content/101-react-advanced-topics/readme.md deleted file mode 100644 index 75a7c3f72..000000000 --- a/content/roadmaps/103-react/content/101-react-advanced-topics/readme.md +++ /dev/null @@ -1,3 +0,0 @@ -# Advanced Topics - -Now that you have covered the basics, next we have the advanced topics such as advanced hook topics, context, refs, portals, error boundaries and more. diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md b/content/roadmaps/103-react/content/102-components/100-class-components.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md rename to content/roadmaps/103-react/content/102-components/100-class-components.md diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md b/content/roadmaps/103-react/content/102-components/101-functional-components.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md rename to content/roadmaps/103-react/content/102-components/101-functional-components.md diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md b/content/roadmaps/103-react/content/102-components/102-jsx.md similarity index 98% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md rename to content/roadmaps/103-react/content/102-components/102-jsx.md index e14ec7e5b..3002078f0 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md +++ b/content/roadmaps/103-react/content/102-components/102-jsx.md @@ -5,4 +5,4 @@ JSX stands for JavaScript XML. It allows writing HTML in JavaScript and converts Free Content Introduction to JSX JSX in React – Explained with Examples -JSX in React on w3school \ No newline at end of file +JSX in React on w3school diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md b/content/roadmaps/103-react/content/102-components/103-props-vs-state.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md rename to content/roadmaps/103-react/content/102-components/103-props-vs-state.md diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md b/content/roadmaps/103-react/content/102-components/104-conditional-rendering.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md rename to content/roadmaps/103-react/content/102-components/104-conditional-rendering.md diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md b/content/roadmaps/103-react/content/102-components/105-composition-vs-inheritance.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md rename to content/roadmaps/103-react/content/102-components/105-composition-vs-inheritance.md diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md b/content/roadmaps/103-react/content/102-components/readme.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md rename to content/roadmaps/103-react/content/102-components/readme.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/101-ssr/readme.md b/content/roadmaps/103-react/content/102-react-ecosystem/101-ssr/readme.md deleted file mode 100644 index fdb6257e7..000000000 --- a/content/roadmaps/103-react/content/102-react-ecosystem/101-ssr/readme.md +++ /dev/null @@ -1,11 +0,0 @@ -# Server-side rendering - -Server-side rendering refers to the process that the service side completes the HTML structure splicing of the page, sends it to the browser, and then binds the status and events for it to become a fully interactive page. - -Free Content - -what is server side rendering -When should I Server-Side Render? -Server-Side Rendering (SSR) -what is server side rendering? -What is server-side rendering for web development? diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/102-ssg/101-gatsby.md b/content/roadmaps/103-react/content/102-react-ecosystem/102-ssg/101-gatsby.md deleted file mode 100644 index 229c9a6ed..000000000 --- a/content/roadmaps/103-react/content/102-react-ecosystem/102-ssg/101-gatsby.md +++ /dev/null @@ -1,8 +0,0 @@ -# Gatsby - -Gatsby is a React-based open source framework with performance, scalability and security built-in. - -Free Resources -Gatsby Website -Gatsby Docs -Gatsby Tutorial diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/102-ssg/readme.md b/content/roadmaps/103-react/content/102-react-ecosystem/102-ssg/readme.md deleted file mode 100644 index 5493f99e9..000000000 --- a/content/roadmaps/103-react/content/102-react-ecosystem/102-ssg/readme.md +++ /dev/null @@ -1,9 +0,0 @@ -# Static Site Generators - -A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time. Because these HTML pages are pre-built, they can load very quickly in users' browsers. - -Free Content -What is a static site generator? -Next.js SSG -Gatsby SSG -SSG — An 11ty, Vite And JAM Sandwich diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md deleted file mode 100644 index 50049e6df..000000000 --- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md +++ /dev/null @@ -1,9 +0,0 @@ -# use-http - -React hook for making isomorphic http requests. - -Free Content -Official Website: use-http -ava / use-http - - diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md deleted file mode 100644 index 0279e6a10..000000000 --- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md +++ /dev/null @@ -1,6 +0,0 @@ -# Unfetch - -Unfetch is the bare minimum 500b [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) polyfill. - -Free Content -Official GitHub Repository diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux/100-redux-toolkit.md b/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux/100-redux-toolkit.md deleted file mode 100644 index cf547dcd6..000000000 --- a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux/100-redux-toolkit.md +++ /dev/null @@ -1,8 +0,0 @@ -# Redux Toolkit - -Redux Toolkit (RTK) is a library for managing state in JavaScript applications. It is an opinionated set of tools and utilities for building Redux applications, and it is designed to make it easier and faster to build Redux applications. - -RTK is often used as an alternative to writing Redux applications from scratch, as it provides a set of conventions and utilities that can make it easier and faster to build Redux applications. - -Free Content -Redux Toolkit - ReduxJS diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/readme.md b/content/roadmaps/103-react/content/102-react-ecosystem/readme.md deleted file mode 100644 index 2e4f657f0..000000000 --- a/content/roadmaps/103-react/content/102-react-ecosystem/readme.md +++ /dev/null @@ -1,8 +0,0 @@ -# Ecosystem - -Thanks to its popularity, React has been enriched by a vast ecosystem of plugins and tools. A (long) list is available here: [awesome-react](https://github.com/enaqx/awesome-react). - -Free Content -Awesome React -Awesome React Components -Popular React Libraries diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/105-component-life-cycle.md b/content/roadmaps/103-react/content/103-rendering/100-component-life-cycle.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/105-component-life-cycle.md rename to content/roadmaps/103-react/content/103-rendering/100-component-life-cycle.md diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md b/content/roadmaps/103-react/content/103-rendering/101-lists-and-keys.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md rename to content/roadmaps/103-react/content/103-rendering/101-lists-and-keys.md diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md b/content/roadmaps/103-react/content/103-rendering/102-render-props.md similarity index 100% rename from content/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md rename to content/roadmaps/103-react/content/103-rendering/102-render-props.md diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md b/content/roadmaps/103-react/content/103-rendering/103-refs.md similarity index 100% rename from content/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md rename to content/roadmaps/103-react/content/103-rendering/103-refs.md diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/109-events.md b/content/roadmaps/103-react/content/103-rendering/104-events.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/109-events.md rename to content/roadmaps/103-react/content/103-rendering/104-events.md diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md b/content/roadmaps/103-react/content/103-rendering/105-high-order-components.md similarity index 100% rename from content/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md rename to content/roadmaps/103-react/content/103-rendering/105-high-order-components.md diff --git a/content/roadmaps/103-react/content/103-rendering/readme.md b/content/roadmaps/103-react/content/103-rendering/readme.md new file mode 100644 index 000000000..b67191527 --- /dev/null +++ b/content/roadmaps/103-react/content/103-rendering/readme.md @@ -0,0 +1,16 @@ +# Rendering + +React follows a declarative approach to rendering components, which means that developers specify what a component should look like, and React takes care of rendering the component to the screen. This is in contrast to an imperative approach, where developers would write code to manually manipulate the DOM (Document Object Model) to update the UI. + +The virtual DOM (VDOM) is an important aspect of how React works. It is a lightweight in-memory representation of the DOM (Document Object Model), and it is used to optimize the rendering of components in a React application. + +* Components are written as JavaScript classes or functions that define a render method. The render method returns a description of what the component should look like, using JSX syntax. +* When a component is rendered, React creates a virtual DOM (VDOM) representation of the component. The VDOM is a lightweight in-memory representation of the DOM, and it is used to optimize the rendering of components. +* React compares the VDOM representation of the component with the previous VDOM representation (if it exists). If there are differences between the two VDOMs, React calculates the minimum number of DOM updates needed to bring the actual DOM into line with the new VDOM. +* React updates the actual DOM with the minimum number of DOM updates needed to reflect the changes in the VDOM. + +This process is known as reconciliation, and it is an important aspect of how React works. By using a declarative approach and a VDOM, React is able to optimize the rendering of components and improve the performance of web applications. + +Free Content +React.js under the Hood + diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md b/content/roadmaps/103-react/content/104-hooks/100-basic-hooks/100-use-state.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md rename to content/roadmaps/103-react/content/104-hooks/100-basic-hooks/100-use-state.md diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md b/content/roadmaps/103-react/content/104-hooks/100-basic-hooks/101-use-effect.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md rename to content/roadmaps/103-react/content/104-hooks/100-basic-hooks/101-use-effect.md diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md b/content/roadmaps/103-react/content/104-hooks/100-basic-hooks/readme.md similarity index 99% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md rename to content/roadmaps/103-react/content/104-hooks/100-basic-hooks/readme.md index 248fda045..5f702b4fb 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md +++ b/content/roadmaps/103-react/content/104-hooks/100-basic-hooks/readme.md @@ -1,7 +1,6 @@ # Hooks Hooks were introduced in React 16.8 and they let us use React's features-like managing your component's state and or performing an after effect when certain changes occur in state(s) without writing a class. - Free Content Introduction to Hooks diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md b/content/roadmaps/103-react/content/104-hooks/101-writing-your-own-hooks.md similarity index 100% rename from content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md rename to content/roadmaps/103-react/content/104-hooks/101-writing-your-own-hooks.md diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md b/content/roadmaps/103-react/content/104-hooks/102-common-hooks.md similarity index 100% rename from content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md rename to content/roadmaps/103-react/content/104-hooks/102-common-hooks.md diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md b/content/roadmaps/103-react/content/104-hooks/readme.md similarity index 56% rename from content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md rename to content/roadmaps/103-react/content/104-hooks/readme.md index 7cbd43651..5f702b4fb 100644 --- a/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md +++ b/content/roadmaps/103-react/content/104-hooks/readme.md @@ -1,8 +1,7 @@ -# React Hooks +# Hooks -Hooks were introduced in React 16.8 and they let us use state and other React features without writing a class +Hooks were introduced in React 16.8 and they let us use React's features-like managing your component's state and or performing an after effect when certain changes occur in state(s) without writing a class. Free Content Introduction to Hooks Hooks Reference -Hooks by Example diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md b/content/roadmaps/103-react/content/105-routers/100-react-router.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md rename to content/roadmaps/103-react/content/105-routers/100-react-router.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/100-routers/101-reach-router.md b/content/roadmaps/103-react/content/105-routers/101-reach-router.md similarity index 99% rename from content/roadmaps/103-react/content/102-react-ecosystem/100-routers/101-reach-router.md rename to content/roadmaps/103-react/content/105-routers/101-reach-router.md index 3e7fd34c4..14285394e 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/100-routers/101-reach-router.md +++ b/content/roadmaps/103-react/content/105-routers/101-reach-router.md @@ -5,4 +5,3 @@ Reach Router is a small, simple router for React that borrows from React Router, Free Content Reach Router — Official Website Getting Started Guide - diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/100-routers/readme.md b/content/roadmaps/103-react/content/105-routers/readme.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/100-routers/readme.md rename to content/roadmaps/103-react/content/105-routers/readme.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-context-state.md b/content/roadmaps/103-react/content/106-state-management/100-context.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-context-state.md rename to content/roadmaps/103-react/content/106-state-management/100-context.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-zustand.md b/content/roadmaps/103-react/content/106-state-management/101-zustand.md similarity index 99% rename from content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-zustand.md rename to content/roadmaps/103-react/content/106-state-management/101-zustand.md index 80788b2d0..f0348428f 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-zustand.md +++ b/content/roadmaps/103-react/content/106-state-management/101-zustand.md @@ -6,4 +6,3 @@ Zustand is often used as an alternative to other state management libraries, suc Free Content Zustand - Official Website - diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux/readme.md b/content/roadmaps/103-react/content/106-state-management/102-redux-and-redux-toolkit.md similarity index 70% rename from content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux/readme.md rename to content/roadmaps/103-react/content/106-state-management/102-redux-and-redux-toolkit.md index 45bc23254..d4b25487d 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux/readme.md +++ b/content/roadmaps/103-react/content/106-state-management/102-redux-and-redux-toolkit.md @@ -2,8 +2,12 @@ Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools). -Free Content +Redux Toolkit (RTK) is a library for managing state in JavaScript applications. It is an opinionated set of tools and utilities for building Redux applications, and it is designed to make it easier and faster to build Redux applications. +RTK is often used as an alternative to writing Redux applications from scratch, as it provides a set of conventions and utilities that can make it easier and faster to build Redux applications. + +Free Content +Redux Toolkit - ReduxJS Official Website Official Getting Started to Redux Redux Toolkit Official Website diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/102-mobx.md b/content/roadmaps/103-react/content/106-state-management/103-mobx.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/102-mobx.md rename to content/roadmaps/103-react/content/106-state-management/103-mobx.md diff --git a/content/roadmaps/103-react/content/106-state-management/104-recoil.md b/content/roadmaps/103-react/content/106-state-management/104-recoil.md new file mode 100644 index 000000000..180199a51 --- /dev/null +++ b/content/roadmaps/103-react/content/106-state-management/104-recoil.md @@ -0,0 +1,17 @@ +# Recoil + +Recoil is a library for managing state in React applications. + +Recoil is designed to be easy to use and efficient, with a focus on improving the performance and scalability of large, complex React applications. It is based on the concept of atoms and selectors, which are used to manage the state of a component. Atoms represent the state of a component, and selectors are used to derive new state from atoms. + +Recoil provides a set of utilities and APIs for managing state, including: + +- atom: A utility for creating atoms, which represent the state of a component. +- selector: A utility for creating selectors, which are used to derive new state from atoms. +- useRecoilValue: A hook for accessing the value of an atom or selector in a component. +- useSetRecoilState: A hook for updating the value of an atom in a component. + +Recoil is often used as an alternative to other state management libraries, such as Redux and MobX, because of its simplicity and performance. It is particularly well-suited for large, complex React applications where the overhead of other state management libraries may be too high. + +Free Content +Recoil - Official Website diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md b/content/roadmaps/103-react/content/106-state-management/readme.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md rename to content/roadmaps/103-react/content/106-state-management/readme.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md b/content/roadmaps/103-react/content/107-styling/100-styled-components.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md rename to content/roadmaps/103-react/content/107-styling/100-styled-components.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md b/content/roadmaps/103-react/content/107-styling/101-emotion.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md rename to content/roadmaps/103-react/content/107-styling/101-emotion.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-mantine.md b/content/roadmaps/103-react/content/107-styling/102-mantine.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-mantine.md rename to content/roadmaps/103-react/content/107-styling/102-mantine.md diff --git a/content/roadmaps/103-react/content/107-styling/103-tailwind.md b/content/roadmaps/103-react/content/107-styling/103-tailwind.md new file mode 100644 index 000000000..39d04d1d3 --- /dev/null +++ b/content/roadmaps/103-react/content/107-styling/103-tailwind.md @@ -0,0 +1,10 @@ +# Tailwind CSS + +CSS Framework that provides atomic CSS classes to help you style components e.g. `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup. + +Free Content +Tailwind Website +Tailwind CSS: An Introduction +Official Screencasts +Should You Use Tailwind CSS? +Tailwind CSS Crash Course diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md b/content/roadmaps/103-react/content/107-styling/104-material-ui.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md rename to content/roadmaps/103-react/content/107-styling/104-material-ui.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md b/content/roadmaps/103-react/content/107-styling/105-chakra-ui.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md rename to content/roadmaps/103-react/content/107-styling/105-chakra-ui.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md b/content/roadmaps/103-react/content/107-styling/readme.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md rename to content/roadmaps/103-react/content/107-styling/readme.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md b/content/roadmaps/103-react/content/108-api-calls/100-apollo.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md rename to content/roadmaps/103-react/content/108-api-calls/100-apollo.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md b/content/roadmaps/103-react/content/108-api-calls/101-relay.md similarity index 97% rename from content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md rename to content/roadmaps/103-react/content/108-api-calls/101-relay.md index 55722ec2e..1d02e661e 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md +++ b/content/roadmaps/103-react/content/108-api-calls/101-relay.md @@ -1,4 +1,4 @@ -# Relay Modern +# Relay Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions. diff --git a/content/roadmaps/103-react/content/108-api-calls/102-urql.md b/content/roadmaps/103-react/content/108-api-calls/102-urql.md new file mode 100644 index 000000000..1101e8bf4 --- /dev/null +++ b/content/roadmaps/103-react/content/108-api-calls/102-urql.md @@ -0,0 +1,15 @@ +# urql + +urql (Universal React Query Library) is a library for managing GraphQL data in React applications. It is developed and maintained by Formidable Labs and is available as open-source software. + +urql is designed to be easy to use and flexible, with a simple API for performing GraphQL queries and mutations. It is based on the concept of a client, which is used to manage the GraphQL data for an application. The client provides a set of utilities and APIs for managing GraphQL data, including: + +- executeQuery: A utility for executing a GraphQL query. +- executeMutation: A utility for executing a GraphQL mutation. +- useQuery: A hook for executing a GraphQL query and accessing the result in a component. +- useMutation: A hook for executing a GraphQL mutation and accessing the result in a component. + +urql is often used as an alternative to other GraphQL libraries, such as Apollo Client, because of its simplicity and lightweight size. It is particularly well-suited for small to medium-sized React applications where the complexity of other GraphQL libraries may not be required. + +Free Content +urql - Formidable Labs diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-swr.md b/content/roadmaps/103-react/content/108-api-calls/103-swr.md similarity index 99% rename from content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-swr.md rename to content/roadmaps/103-react/content/108-api-calls/103-swr.md index 706779106..c7e994ca9 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-swr.md +++ b/content/roadmaps/103-react/content/108-api-calls/103-swr.md @@ -8,6 +8,3 @@ With just one hook, you can significantly simplify the data fetching logic in yo Free Content SWR: React Hooks for Data Fetching - - - diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md b/content/roadmaps/103-react/content/108-api-calls/104-react-query.md similarity index 99% rename from content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md rename to content/roadmaps/103-react/content/108-api-calls/104-react-query.md index aa12d0d8d..36b8c836d 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md +++ b/content/roadmaps/103-react/content/108-api-calls/104-react-query.md @@ -6,4 +6,3 @@ Powerful asynchronous state management, server-state utilities and data fetching TanStack Query React Query in 100 Seconds React Query Tutorial for Beginners - Complete Playlist - diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md b/content/roadmaps/103-react/content/108-api-calls/105-axios.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md rename to content/roadmaps/103-react/content/108-api-calls/105-axios.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md b/content/roadmaps/103-react/content/108-api-calls/106-superagent.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md rename to content/roadmaps/103-react/content/108-api-calls/106-superagent.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md b/content/roadmaps/103-react/content/108-api-calls/readme.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md rename to content/roadmaps/103-react/content/108-api-calls/readme.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/100-jest.md b/content/roadmaps/103-react/content/109-testing/100-jest.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/106-testing/100-jest.md rename to content/roadmaps/103-react/content/109-testing/100-jest.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/103-vitest.md b/content/roadmaps/103-react/content/109-testing/101-vitest.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/106-testing/103-vitest.md rename to content/roadmaps/103-react/content/109-testing/101-vitest.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md b/content/roadmaps/103-react/content/109-testing/102-react-testing-library.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md rename to content/roadmaps/103-react/content/109-testing/102-react-testing-library.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/102-cypress.md b/content/roadmaps/103-react/content/109-testing/103-cypress.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/106-testing/102-cypress.md rename to content/roadmaps/103-react/content/109-testing/103-cypress.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/104-playwright.md b/content/roadmaps/103-react/content/109-testing/104-playwright.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/106-testing/104-playwright.md rename to content/roadmaps/103-react/content/109-testing/104-playwright.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/readme.md b/content/roadmaps/103-react/content/109-testing/readme.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/106-testing/readme.md rename to content/roadmaps/103-react/content/109-testing/readme.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-remix.md b/content/roadmaps/103-react/content/110-frameworks/100-remix.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-remix.md rename to content/roadmaps/103-react/content/110-frameworks/100-remix.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-next-js.md b/content/roadmaps/103-react/content/110-frameworks/101-next-js.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-next-js.md rename to content/roadmaps/103-react/content/110-frameworks/101-next-js.md diff --git a/content/roadmaps/103-react/content/110-frameworks/readme.md b/content/roadmaps/103-react/content/110-frameworks/readme.md new file mode 100644 index 000000000..d32867fbe --- /dev/null +++ b/content/roadmaps/103-react/content/110-frameworks/readme.md @@ -0,0 +1,8 @@ +# SSR Frameworks + +Server-side rendering (SSR) is a technique for rendering a JavaScript application on the server, rather than in the browser. This can improve the performance and user experience of a web application, as the initial render of the application is done on the server and the content is sent to the browser as a fully-rendered HTML page. + +There are several frameworks and libraries available for server-side rendering React applications, most common being: + +- [Next.js](https://nextjs.org/) +- [Remix](https://remix.run/) diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/105-forms/100-react-hook-form.md b/content/roadmaps/103-react/content/111-forms/100-react-hook-form.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/105-forms/100-react-hook-form.md rename to content/roadmaps/103-react/content/111-forms/100-react-hook-form.md diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/105-forms/101-formik.md b/content/roadmaps/103-react/content/111-forms/101-formik.md similarity index 99% rename from content/roadmaps/103-react/content/102-react-ecosystem/105-forms/101-formik.md rename to content/roadmaps/103-react/content/111-forms/101-formik.md index ef4d2dc48..4578a944d 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/105-forms/101-formik.md +++ b/content/roadmaps/103-react/content/111-forms/101-formik.md @@ -6,7 +6,3 @@ Formik is another famous opensource form library that helps with getting values Official Website — Formik Getting Started formik/formik - - - - diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/105-forms/102-final-form.md b/content/roadmaps/103-react/content/111-forms/102-final-form.md similarity index 99% rename from content/roadmaps/103-react/content/102-react-ecosystem/105-forms/102-final-form.md rename to content/roadmaps/103-react/content/111-forms/102-final-form.md index df2f74007..f1927f212 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/105-forms/102-final-form.md +++ b/content/roadmaps/103-react/content/111-forms/102-final-form.md @@ -5,4 +5,3 @@ High performance subscription-based form state management for React. Free Content Final Form — Official Website final-form / react-final-form - diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md b/content/roadmaps/103-react/content/111-forms/readme.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md rename to content/roadmaps/103-react/content/111-forms/readme.md diff --git a/content/roadmaps/103-react/content/112-suspense.md b/content/roadmaps/103-react/content/112-suspense.md new file mode 100644 index 000000000..96119a060 --- /dev/null +++ b/content/roadmaps/103-react/content/112-suspense.md @@ -0,0 +1,13 @@ +# Suspense + +React Suspense is a feature in React that allows components to "suspend" rendering while they are waiting for something to happen, such as data to be fetched from an API or an image to be loaded. Suspense allows developers to create a more seamless user experience by rendering a placeholder or fallback component while the component is waiting for the required data to be available. + +Here is a general overview of how React Suspense works: + +- A component that uses Suspense wraps a component that may need to "suspend" rendering in a `Suspense` component. +- The wrapped component throws a promise when it needs to suspend rendering. +- The `Suspense` component catches the promise and renders a fallback component while the promise is pending. +- When the promise resolves, the wrapped component is rendered with the required data. + +Free Content +React Suspense - Official Docs diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/105-portals.md b/content/roadmaps/103-react/content/113-portals.md similarity index 100% rename from content/roadmaps/103-react/content/101-react-advanced-topics/105-portals.md rename to content/roadmaps/103-react/content/113-portals.md diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/106-error-boundaries.md b/content/roadmaps/103-react/content/114-error-boundaries.md similarity index 100% rename from content/roadmaps/103-react/content/101-react-advanced-topics/106-error-boundaries.md rename to content/roadmaps/103-react/content/114-error-boundaries.md diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/107-fiber-architecture.md b/content/roadmaps/103-react/content/115-fiber-architecture.md similarity index 99% rename from content/roadmaps/103-react/content/101-react-advanced-topics/107-fiber-architecture.md rename to content/roadmaps/103-react/content/115-fiber-architecture.md index 951dfef4b..f3e834ae3 100644 --- a/content/roadmaps/103-react/content/101-react-advanced-topics/107-fiber-architecture.md +++ b/content/roadmaps/103-react/content/115-fiber-architecture.md @@ -5,5 +5,3 @@ React 16.0 was released with an update to the React core algorithm. This new cor Free Content React Fiber Architecture Understanding React Fiber Architecture - - diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/104-mobile/100-react-native.md b/content/roadmaps/103-react/content/116-mobile/100-react-native.md similarity index 99% rename from content/roadmaps/103-react/content/102-react-ecosystem/104-mobile/100-react-native.md rename to content/roadmaps/103-react/content/116-mobile/100-react-native.md index cf457377d..defd28e9f 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/104-mobile/100-react-native.md +++ b/content/roadmaps/103-react/content/116-mobile/100-react-native.md @@ -5,5 +5,3 @@ React Native is an open-source UI software framework created by Meta Platforms, Free Content React Native: Official Website Official Getting Started - - diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/104-mobile/readme.md b/content/roadmaps/103-react/content/116-mobile/readme.md similarity index 100% rename from content/roadmaps/103-react/content/102-react-ecosystem/104-mobile/readme.md rename to content/roadmaps/103-react/content/116-mobile/readme.md diff --git a/content/roadmaps/103-react/meta.json b/content/roadmaps/103-react/meta.json index 07a26e673..fd7df2a47 100644 --- a/content/roadmaps/103-react/meta.json +++ b/content/roadmaps/103-react/meta.json @@ -3,8 +3,8 @@ "title": "React Developer Roadmap: Learn to become a React developer", "description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.", "keywords": [ - "react roadmap 2022", - "react developer roadmap 2022", + "react roadmap 2023", + "react developer roadmap 2023", "guide to becoming a react developer", "react developer roadmap", "react roadmap", @@ -19,14 +19,13 @@ ] }, "title": "React Developer", - "description": "Everything that is there to learn about React and the ecosystem in 2022.", + "description": "Everything that is there to learn about React and the ecosystem in 2023.", "featuredTitle": "React", "type": "tool", - "featuredDescription": "Step by step guide to become a React Developer in 2022", + "featuredDescription": "Step by step guide to become a React Developer in 2023", "isTextHeavy": false, "isCommunity": false, "featured": true, - "resourcesPath": "./resources.md", "jsonUrl": "/project/react.json", "versions": [ "latest", diff --git a/content/roadmaps/103-react/resources.md b/content/roadmaps/103-react/resources.md deleted file mode 100644 index 9ea876887..000000000 --- a/content/roadmaps/103-react/resources.md +++ /dev/null @@ -1,7 +0,0 @@ -> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup). - -While we prepare the list, follow this simple advice to learn anything - -> Just **pick a project and start working on it**, you will learn all that you need along the way. - -**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup) diff --git a/public/project/react.json b/public/project/react.json index 25e1df1a0..e33c47e69 100644 --- a/public/project/react.json +++ b/public/project/react.json @@ -3,1856 +3,22 @@ "controls": { "control": [ { - "ID": "14363", - "typeID": "Arrow", - "zOrder": "2", - "w": "1", - "h": "70", - "measuredW": "150", - "measuredH": "100", - "x": "1005", - "y": "516", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 0.2631015041727096, - "y": 69.87074768732577 - }, - "p1": { - "x": 0.48396407046253614, - "y": 0.0006376473756898644 - }, - "p2": { - "x": 0.2631015041727096, - "y": 0.15521002390022431 - } - } - }, - { - "ID": "14364", - "typeID": "Arrow", - "zOrder": "3", - "w": "122", - "h": "18", - "measuredW": "150", - "measuredH": "100", - "x": "1042", - "y": "705", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 122.14512175779441, - "y": 0.26814563722564344 - }, - "p1": { - "x": 0.4507017020005973, - "y": 0.051000298596596466 - }, - "p2": { - "x": -0.22207187435719788, - "y": 18.345117423793454 - } - } - }, - { - "ID": "14365", - "typeID": "Arrow", - "zOrder": "4", - "w": "107", - "h": "49", - "measuredW": "150", - "measuredH": "100", - "x": "455", - "y": "370", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 107, - "y": 49 - }, - "p1": { - "x": 0.623226362084596, - "y": 0.11385756526041142 - }, - "p2": { - "x": -0.02838679217563822, - "y": 0.14889944008285738 - } - } - }, - { - "ID": "14366", - "typeID": "Arrow", - "zOrder": "5", - "w": "109", - "h": "2", - "measuredW": "150", - "measuredH": "100", - "x": "444", - "y": "429", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 109, - "y": 0 - }, - "p1": { - "x": 0.6380090497737557, - "y": -0.0018099547511312274 - }, - "p2": { - "x": -0.15267712237124442, - "y": 1.7703510910608884 - } - } - }, - { - "ID": "14367", - "typeID": "Arrow", - "zOrder": "6", - "w": "2", - "h": "571", - "measuredW": "150", - "measuredH": "100", - "x": "896", - "y": "158", - "properties": { - "color": "2848996", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "p0": { - "x": 2.621614465876405, - "y": 0.236415956616014 - }, - "p1": { - "x": 0.4642857142857143, - "y": -0.00399211336195318 - }, - "p2": { - "x": 2.621614465876405, - "y": 570.8810260550937 - } - } - }, - { - "ID": "14368", + "ID": "14593", "typeID": "Label", - "zOrder": "7", + "zOrder": "40", "measuredW": "76", "measuredH": "36", - "x": "862", - "y": "106", + "x": "834", + "y": "153", "properties": { "size": "28", "text": "React" } }, { - "ID": "14369", - "typeID": "Arrow", - "zOrder": "8", - "w": "2", - "h": "96", - "measuredW": "150", - "measuredH": "100", - "x": "621", - "y": "1241", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "length": 95, - "x": 0, - "y": 95 - }, - "p1": { - "length": 0.4737749079645269, - "x": 0.4737425216042544, - "y": -0.005539552404165743 - }, - "p2": { - "length": 1, - "x": 1, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14370", - "typeID": "Arrow", - "zOrder": "9", - "w": "105", - "h": "15", - "measuredW": "150", - "measuredH": "100", - "x": "458", - "y": "1189", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "x": 104, - "y": 0 - }, - "p1": { - "x": 0.5740721807586137, - "y": 0.016256006543298233 - }, - "p2": { - "x": 0, - "y": 14 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14371", - "typeID": "Arrow", - "zOrder": "10", - "w": "92", - "h": "22", - "measuredW": "150", - "measuredH": "100", - "x": "469", - "y": "1161", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 91, - "y": 21 - }, - "p1": { - "x": 0.5676406229888018, - "y": 0.009525035397091009 - }, - "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14372", - "typeID": "Arrow", - "zOrder": "11", - "w": "89", - "h": "13", - "measuredW": "150", - "measuredH": "100", - "x": "465", - "y": "1137", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 89.21325016687592, - "y": 0.3226457301532264 - }, - "p1": { - "x": 0.5740721807586137, - "y": 0.016256006543298247 - }, - "p2": { - "x": 0, - "y": 13 - } - } - }, - { - "ID": "14373", - "typeID": "Arrow", - "zOrder": "12", - "w": "6", - "h": "75", - "measuredW": "150", - "measuredH": "100", - "x": "1118", - "y": "1153", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "p0": { - "length": 74.16872656315464, - "x": 5, - "y": 74 - }, - "p1": { - "length": 0.5062618190857066, - "x": 0.5058572949946751, - "y": 0.020234291799786995 - }, - "p2": { - "length": 1, - "x": 1, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14374", - "typeID": "Arrow", - "zOrder": "13", - "w": "170", - "h": "580", - "measuredW": "150", - "measuredH": "100", - "x": "676", - "y": "1043", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 156, - "y": 0 - }, - "p1": { - "x": 0.6169504337496851, - "y": 0.1519023793239984 - }, - "p2": { - "x": -0.274753807231491, - "y": 579.6297030286876 - } - } - }, - { - "ID": "14375", - "typeID": "Arrow", - "zOrder": "14", - "w": "95", - "h": "1", - "measuredW": "150", - "measuredH": "100", - "x": "461", - "y": "1616", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "top", - "leftArrow": "false", - "p0": { - "length": 0, - "x": 0, - "y": 0 - }, - "p1": { - "length": 0.638011617080294, - "x": 0.6380090497737556, - "y": -0.0018099547511312248 - }, - "p2": { - "length": 94, - "x": 94, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14376", - "typeID": "Arrow", - "zOrder": "15", - "w": "82", - "h": "40", - "measuredW": "150", - "measuredH": "100", - "x": "1194", - "y": "1501", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 0, - "y": 0 - }, - "p1": { - "x": 0.60504464315171, - "y": 0.10352361545015694 - }, - "p2": { - "x": 81.87595827187215, - "y": 40.127754474735184 - } - } - }, - { - "ID": "14377", - "typeID": "Arrow", - "zOrder": "16", - "w": "88", - "h": "7", - "measuredW": "150", - "measuredH": "100", - "x": "1197", - "y": "1483", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "length": 6, - "x": 0, - "y": 6 - }, - "p1": { - "length": 0.4948488115176065, - "x": 0.49473684210526303, - "y": -0.010526315789473628 - }, - "p2": { - "length": 87, - "x": 87, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14378", - "typeID": "Arrow", - "zOrder": "17", - "w": "96", - "h": "46", - "measuredW": "150", - "measuredH": "100", - "x": "1180", - "y": "1433", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": -0.44452638279881285, - "y": 45.889902851717125 - }, - "p1": { - "x": 0.5156841633798173, - "y": -0.10584946033995801 - }, - "p2": { - "x": 95.65228225525743, - "y": -0.07551856258737644 - } - } - }, - { - "ID": "14379", - "typeID": "Arrow", - "zOrder": "18", - "w": "6", - "h": "736", - "measuredW": "150", - "measuredH": "100", - "x": "886", - "y": "1045", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "p0": { - "x": 0, - "y": 0 - }, - "p1": { - "x": 0.5326751848090502, - "y": 0.008478779433645882 - }, - "p2": { - "x": 0, - "y": 735.966031340103 - } - } - }, - { - "ID": "14380", - "typeID": "Arrow", - "zOrder": "19", - "w": "1", - "h": "82", - "measuredW": "150", - "measuredH": "100", - "x": "1135", - "y": "1487", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "p0": { - "length": 81, - "x": 0, - "y": 81 - }, - "p1": { - "length": 0.4948488115176067, - "x": 0.4947368421052632, - "y": -0.010526315789473686 - }, - "p2": { - "length": 0, - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14381", - "typeID": "Arrow", - "zOrder": "20", - "w": "203", - "h": "444", - "measuredW": "150", - "measuredH": "100", - "x": "912", - "y": "1047", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 0, - "y": 0 - }, - "p1": { - "x": 0.6386805175102197, - "y": -0.15317754646213497 - }, - "p2": { - "x": 203.43769143423788, - "y": 443.58190904324397 - } - } - }, - { - "ID": "14382", - "typeID": "Arrow", - "zOrder": "21", - "w": "63", - "measuredW": "150", - "measuredH": "100", - "x": "691", - "y": "1029", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 63, - "y": 0 - }, - "p1": { - "x": 0.6971153846153839, - "y": 0.14182692307692268 - }, - "p2": { - "x": -0.4562177065128026, - "y": 99.43152406972195 - } - } - }, - { - "ID": "14383", - "typeID": "Arrow", - "zOrder": "22", - "w": "64", - "h": "109", - "measuredW": "150", - "measuredH": "100", - "x": "938", - "y": "1038", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 0, - "y": 0 - }, - "p1": { - "x": 0.7038144329896907, - "y": -0.09391752577319588 - }, - "p2": { - "x": 63, - "y": 108 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14384", - "typeID": "Arrow", - "zOrder": "23", - "w": "86", - "h": "54", - "measuredW": "150", - "measuredH": "100", - "x": "1168", - "y": "925", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 86.52998069063369, - "y": -0.02712034141109143 - }, - "p1": { - "x": 0.3915365653245692, - "y": 0.03985209531635175 - }, - "p2": { - "x": 0.31673063161792925, - "y": 54.20379501829245 - } - } - }, - { - "ID": "14385", - "typeID": "Arrow", - "zOrder": "24", - "w": "89", - "h": "8", - "measuredW": "150", - "measuredH": "100", - "x": "1159", - "y": "975", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 89, - "y": 0 - }, - "p1": { - "x": 0.534385051309542, - "y": 0.03614642364833824 - }, - "p2": { - "x": -0.41702340730330434, - "y": 6.984867600841426 - } - } - }, - { - "ID": "14386", - "typeID": "Arrow", - "zOrder": "25", - "w": "60", - "h": "103", - "measuredW": "150", - "measuredH": "100", - "x": "1186", - "y": "1070", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 59, - "y": 102 - }, - "p1": { - "x": 0.5058572949946751, - "y": 0.020234291799787023 - }, - "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14387", - "typeID": "Arrow", - "zOrder": "26", - "w": "66", - "h": "75", - "measuredW": "150", - "measuredH": "100", - "x": "1185", - "y": "1061", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 65, - "y": 74 - }, - "p1": { - "x": 0.5567467271415318, - "y": -0.043088341408102256 - }, - "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14388", - "typeID": "Arrow", - "zOrder": "27", - "w": "86", - "h": "4", - "measuredW": "150", - "measuredH": "100", - "x": "1168", - "y": "1053", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 86.52998069063369, - "y": 2.683291038387324 - }, - "p1": { - "x": 0.4826498422712937, - "y": 0.022082018927444474 - }, - "p2": { - "x": 0.31673063161792925, - "y": -0.09778154416153484 - } - } - }, - { - "ID": "14389", - "typeID": "Arrow", - "zOrder": "28", - "w": "63", - "h": "24", - "measuredW": "150", - "measuredH": "100", - "x": "940", - "y": "1035", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 0, - "y": 0 - }, - "p1": { - "x": 0.4043899289864429, - "y": -0.01368624919302776 - }, - "p2": { - "x": 62, - "y": 23 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14390", - "typeID": "Arrow", - "zOrder": "29", - "w": "95", - "h": "88", - "measuredW": "150", - "measuredH": "100", - "x": "1159", - "y": "882", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 94.13944439935926, - "y": -0.13374537091908678 - }, - "p1": { - "x": 0.47109352379113933, - "y": 0.05433838432583797 - }, - "p2": { - "x": -0.41702340730330434, - "y": 87.47004097937133 - } - } - }, - { - "ID": "14391", - "typeID": "Arrow", - "zOrder": "30", - "w": "95", - "h": "18", - "measuredW": "150", - "measuredH": "100", - "x": "461", - "y": "1312", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "p0": { - "length": 1, - "x": 0, - "y": 1 - }, - "p1": { - "length": 0.48824871437239115, - "x": 0.48542738182708794, - "y": 0.05241244183198628 - }, - "p2": { - "length": 95.524865872714, - "x": 94, - "y": 17 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14392", - "typeID": "Arrow", - "zOrder": "31", - "w": "94", - "h": "59", - "measuredW": "150", - "measuredH": "100", - "x": "461", - "y": "1266", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "p0": { - "length": 1, - "x": 0, - "y": 1 - }, - "p1": { - "length": 0.3714921097791618, - "x": 0.35753908219868885, - "y": 0.10085728693898134 - }, - "p2": { - "length": 109.60383204979652, - "x": 93, - "y": 58 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14393", - "typeID": "Arrow", - "zOrder": "32", - "w": "2", - "h": "96", - "measuredW": "150", - "measuredH": "100", - "x": "621", - "y": "1331", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "length": 95, - "x": 0, - "y": 95 - }, - "p1": { - "length": 0.4737749079645269, - "x": 0.4737425216042544, - "y": -0.005539552404165743 - }, - "p2": { - "length": 1, - "x": 1, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14394", - "typeID": "Arrow", - "zOrder": "33", - "w": "89", - "h": "110", - "measuredW": "150", - "measuredH": "100", - "x": "464", - "y": "1345", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 0, - "y": 108 - }, - "p1": { - "x": 0.23770491803278693, - "y": -0.08524590163934422 - }, - "p2": { - "x": 89, - "y": 0 - } - } - }, - { - "ID": "14395", - "typeID": "Arrow", - "zOrder": "34", - "w": "102", - "h": "170", - "measuredW": "150", - "measuredH": "100", - "x": "459", - "y": "1335", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 0, - "y": 168 - }, - "p1": { - "x": 0.23741864515537614, - "y": -0.0824090200751674 - }, - "p2": { - "x": 102, - "y": 0 - } - } - }, - { - "ID": "14396", - "typeID": "Arrow", - "zOrder": "35", - "w": "95", - "h": "73", - "measuredW": "150", - "measuredH": "100", - "x": "464", - "y": "1332", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 0, - "y": 73 - }, - "p1": { - "x": 0.32182218956649544, - "y": -0.06784227283859864 - }, - "p2": { - "x": 95, - "y": 0 - } - } - }, - { - "ID": "14397", - "typeID": "Arrow", - "zOrder": "36", - "w": "68", - "h": "51", - "measuredW": "150", - "measuredH": "100", - "x": "938", - "y": "976", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "x": 67, - "y": 0 - }, - "p1": { - "x": 0.44040635284017743, - "y": -0.08985548719416225 - }, - "p2": { - "x": 0, - "y": 50 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14398", - "typeID": "Arrow", - "zOrder": "37", - "w": "106", - "h": "16", - "measuredW": "150", - "measuredH": "100", - "x": "458", - "y": "1027", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "x": 0, - "y": 11 - }, - "p1": { - "x": 0.418664047151277, - "y": -0.08212180746561885 - }, - "p2": { - "x": 105, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14399", - "typeID": "Arrow", - "zOrder": "38", - "w": "94", - "h": "31", - "measuredW": "150", - "measuredH": "100", - "x": "461", - "y": "989", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 0, - "y": 0 - }, - "p1": { - "x": 0.5210888020482415, - "y": 0.050532273278533865 - }, - "p2": { - "x": 93, - "y": 30 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14400", - "typeID": "Arrow", - "zOrder": "39", - "w": "109", - "h": "5", - "measuredW": "150", - "measuredH": "100", - "x": "660", - "y": "1022", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "length": 108, - "x": 108, - "y": 0 - }, - "p1": { - "length": 0.638011617080294, - "x": 0.6380090497737556, - "y": -0.001809954751131225 - }, - "p2": { - "length": 4, - "x": 0, - "y": 4 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14401", - "typeID": "Arrow", - "zOrder": "40", - "w": "118", - "h": "294", - "measuredW": "150", - "measuredH": "100", - "x": "674", - "y": "1037", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 112, - "y": 0 - }, - "p1": { - "x": 0.6562581123678842, - "y": 0.2116447246430557 - }, - "p2": { - "x": 0.24339258269674247, - "y": 293.70454184453115 - } - } - }, - { - "ID": "14402", - "typeID": "Arrow", - "zOrder": "41", - "w": "49", - "h": "292", - "measuredW": "150", - "measuredH": "100", - "x": "899", - "y": "731", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 0, - "y": 0 - }, - "p1": { - "x": 0.5185682873198143, - "y": 0.16381627168336182 - }, - "p2": { - "x": 1, - "y": 291 - }, - "rightArrow": "false" - } - }, - { - "ID": "14403", - "typeID": "Arrow", - "zOrder": "42", - "w": "153", - "h": "89", - "measuredW": "150", - "measuredH": "100", - "x": "1017", - "y": "725", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 152.70726692289236, - "y": 88.72997635663273 - }, - "p1": { - "x": 0.4356676038192479, - "y": -0.019497968927647383 - }, - "p2": { - "x": -0.2517251172973829, - "y": -0.26434628493211676 - } - } - }, - { - "ID": "14404", - "typeID": "Arrow", - "zOrder": "43", - "w": "122", - "h": "32", - "measuredW": "150", - "measuredH": "100", - "x": "1043", - "y": "730", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 122.53565804906884, - "y": 32.28013357947805 - }, - "p1": { - "x": 0.4342814659840945, - "y": -0.040402879811838384 - }, - "p2": { - "x": 0.16846441691723157, - "y": 0.29779888016571476 - } - } - }, - { - "ID": "14405", - "typeID": "Arrow", - "zOrder": "44", - "w": "136", - "h": "60", - "measuredW": "150", - "measuredH": "100", - "x": "1028", - "y": "659", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 136.1451217577944, - "y": 0.3804480251686755 - }, - "p1": { - "x": 0.4507017020005973, - "y": 0.05100029859659641 - }, - "p2": { - "x": -0.12743478710171985, - "y": 60.17350854997005 - } - } - }, - { - "ID": "14406", - "typeID": "Arrow", - "zOrder": "45", - "w": "89", - "h": "106", - "measuredW": "150", - "measuredH": "100", - "x": "708", - "y": "744", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "x": 88, - "y": 0 - }, - "p1": { - "x": 0.694396551724138, - "y": 0.14525862068965517 - }, - "p2": { - "x": 0, - "y": 104 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14407", - "typeID": "Arrow", - "zOrder": "46", - "w": "93", - "h": "65", - "measuredW": "150", - "measuredH": "100", - "x": "700", - "y": "740", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "x": 92, - "y": 0 - }, - "p1": { - "x": 0.5165605095541401, - "y": 0.08630573248407643 - }, - "p2": { - "x": 0, - "y": 64 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14408", - "typeID": "Arrow", - "zOrder": "47", - "w": "69", - "h": "35", - "measuredW": "150", - "measuredH": "100", - "x": "505", - "y": "706", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "length": 34, - "x": 0, - "y": 34 - }, - "p1": { - "length": 0.4078400012423434, - "x": 0.4078368652538985, - "y": 0.001599360255897608 - }, - "p2": { - "length": 68, - "x": 68, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14409", - "typeID": "Arrow", - "zOrder": "48", - "w": "81", - "h": "20", - "measuredW": "150", - "measuredH": "100", - "x": "517", - "y": "683", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 80, - "y": 19 - }, - "p1": { - "x": 0.46527893422148264, - "y": -0.0013322231473772645 - }, - "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14410", - "typeID": "Arrow", - "zOrder": "49", - "w": "127", - "h": "1", - "measuredW": "150", - "measuredH": "100", - "x": "1029", - "y": "516", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 126.80190401014784, - "y": 0.15521002390022431 - }, - "p1": { - "x": 0.4839640704625361, - "y": 0.0006376473756898644 - }, - "p2": { - "x": 0.2631015041727096, - "y": 0.15521002390022431 - } - } - }, - { - "ID": "14411", - "typeID": "Arrow", - "zOrder": "50", - "w": "88", - "h": "21", - "measuredW": "150", - "measuredH": "100", - "x": "707", - "y": "700", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 87, - "y": 20 - }, - "p1": { - "x": 0.46091103024218855, - "y": -0.0549629815535199 - }, - "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14412", - "typeID": "Arrow", - "zOrder": "51", - "w": "105", - "h": "29", - "measuredW": "150", - "measuredH": "100", - "x": "697", - "y": "723", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "x": 104, - "y": 0 - }, - "p1": { - "x": 0.47141024775535, - "y": 0.024843043272800916 - }, - "p2": { - "x": 0, - "y": 28 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14413", - "typeID": "Arrow", - "zOrder": "52", - "w": "108", - "h": "118", - "measuredW": "150", - "measuredH": "100", - "x": "682", - "y": "515", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "x": 107, - "y": 0 - }, - "p1": { - "x": 0.5565339359463882, - "y": 0.11104184524273356 - }, - "p2": { - "x": 0, - "y": 117 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14414", - "typeID": "Arrow", - "zOrder": "53", - "w": "102", - "h": "66", - "measuredW": "150", - "measuredH": "100", - "x": "681", - "y": "516", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "x": 101, - "y": 0 - }, - "p1": { - "x": 0.49432499118787465, - "y": 0.03919633415579831 - }, - "p2": { - "x": 0, - "y": 65 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14415", - "typeID": "Arrow", - "zOrder": "54", - "w": "66", - "h": "65", - "measuredW": "150", - "measuredH": "100", - "x": "1271", - "y": "521", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "p0": { - "length": 91.21951545584967, - "x": 65, - "y": 64 - }, - "p1": { - "length": 0.4412347883439139, - "x": 0.41749789688739336, - "y": -0.14277130152625886 - }, - "p2": { - "length": 0, - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14416", - "typeID": "Arrow", - "zOrder": "55", - "h": "33", - "measuredW": "150", - "measuredH": "100", - "x": "1003", - "y": "469", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 150.02083142759898, - "y": -0.12302387943111626 - }, - "p1": { - "x": 0.48730252473054736, - "y": 0.054554850140262706 - }, - "p2": { - "x": -0.15708803004190486, - "y": 33.2498471111557 - } - } - }, - { - "ID": "14417", - "typeID": "Arrow", - "zOrder": "56", - "w": "50", - "h": "77", - "measuredW": "150", - "measuredH": "100", - "x": "1208", - "y": "518", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "length": 76, - "x": 0, - "y": 76 - }, - "p1": { - "length": 0.4763317432510617, - "x": 0.4659313041049986, - "y": 0.09899469421949178 - }, - "p2": { - "length": 49, - "x": 49, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14418", - "typeID": "Arrow", - "zOrder": "57", - "w": "181", - "h": "83", - "measuredW": "150", - "measuredH": "100", - "x": "971", - "y": "419", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 180.63029513632432, - "y": -0.1823303653113726 - }, - "p1": { - "x": 0.4419322661853425, - "y": 0.047879162114662706 - }, - "p2": { - "x": -0.13942272935423716, - "y": 83.2498471111557 - } - } - }, - { - "ID": "14419", - "typeID": "Arrow", - "zOrder": "58", - "w": "110", - "h": "19", - "measuredW": "150", - "measuredH": "100", - "x": "672", - "y": "513", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "x": 109, - "y": 0 - }, - "p1": { - "x": 0.49432499118787454, - "y": 0.03919633415579837 - }, - "p2": { - "x": 0, - "y": 18 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14420", - "typeID": "Arrow", - "zOrder": "59", - "w": "67", - "h": "29", - "measuredW": "150", - "measuredH": "100", - "x": "477", - "y": "528", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "length": 28, - "x": 0, - "y": 28 - }, - "p1": { - "length": 0.45024852627028145, - "x": 0.4470817120622568, - "y": -0.053307392996108954 - }, - "p2": { - "length": 66, - "x": 66, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14421", - "typeID": "Arrow", - "zOrder": "60", - "w": "70", - "h": "27", - "measuredW": "150", - "measuredH": "100", - "x": "478", - "y": "503", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "p0": { - "length": 0, - "x": 0, - "y": 0 - }, - "p1": { - "length": 0.4463661980631013, - "x": 0.44581164221486, - "y": 0.022243256034074732 - }, - "p2": { - "length": 73.7360156233031, - "x": 69, - "y": 26 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14422", + "ID": "14594", "typeID": "Canvas", - "zOrder": "61", + "zOrder": "41", "w": "350", "h": "141", "measuredW": "100", @@ -1861,9 +27,9 @@ "y": "82" }, { - "ID": "14423", + "ID": "14595", "typeID": "Label", - "zOrder": "62", + "zOrder": "42", "measuredW": "314", "measuredH": "25", "x": "1164", @@ -1874,9 +40,9 @@ } }, { - "ID": "14424", + "ID": "14596", "typeID": "Label", - "zOrder": "63", + "zOrder": "43", "measuredW": "319", "measuredH": "25", "x": "1164", @@ -1887,9 +53,9 @@ } }, { - "ID": "14425", + "ID": "14597", "typeID": "__group__", - "zOrder": "64", + "zOrder": "44", "measuredW": "320", "measuredH": "45", "w": "320", @@ -1992,110 +158,17 @@ } }, { - "ID": "14426", - "typeID": "Arrow", - "zOrder": "65", - "w": "196", - "h": "128", - "measuredW": "150", - "measuredH": "100", - "x": "954", - "y": "370", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 196.2397588450499, - "y": 0.14889944008285738 - }, - "p1": { - "x": 0.4672428999823599, - "y": 0.06392661845122631 - }, - "p2": { - "x": 0.17414177535238196, - "y": 128.07823823733236 - } - } - }, - { - "ID": "14427", - "typeID": "Arrow", - "zOrder": "66", - "w": "128", - "h": "35", - "measuredW": "150", - "measuredH": "100", - "x": "653", - "y": "475", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 127, - "y": 34 - }, - "p1": { - "x": 0.4652789342214826, - "y": -0.0013322231473772712 - }, - "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14428", - "typeID": "Arrow", - "zOrder": "67", - "w": "109", - "h": "80", - "measuredW": "150", - "measuredH": "100", - "x": "672", - "y": "422", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 108, - "y": 79 - }, - "p1": { - "x": 0.45522128005575585, - "y": -0.054942502032756343 - }, - "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14429", + "ID": "14598", "typeID": "__group__", - "zOrder": "68", - "measuredW": "272", - "measuredH": "50", - "w": "272", - "h": "50", - "x": "772", - "y": "484", + "zOrder": "45", + "measuredW": "342", + "measuredH": "55", + "w": "342", + "h": "55", + "x": "702", + "y": "264", "properties": { - "controlName": "100-react-fundamental-topics" + "controlName": "ext_link:roadmap.sh/javascript" }, "children": { "controls": { @@ -2104,8 +177,145 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "272", - "h": "50", + "w": "342", + "h": "55", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "4273622", + "borderColor": "4273622" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "230", + "measuredH": "28", + "x": "56", + "y": "14", + "properties": { + "size": "20", + "color": "16777215", + "text": "Visit JavaScript Roadmap" + } + } + ] + } + } + }, + { + "ID": "14604", + "typeID": "Arrow", + "zOrder": "39", + "w": "15", + "h": "83", + "measuredW": "150", + "measuredH": "100", + "x": "875", + "y": "203", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 11.504552088052037, + "y": 0.21486631796096844 + }, + "p1": { + "x": 0.48122701874598317, + "y": 0.08919085657179801 + }, + "p2": { + "x": -0.05283881539992308, + "y": 83.59686539590052 + } + } + }, + { + "ID": "14605", + "typeID": "Arrow", + "zOrder": "46", + "w": "11", + "h": "65", + "measuredW": "150", + "measuredH": "100", + "x": "837", + "y": "76", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 5.81355254908226, + "y": -0.3048709282632984 + }, + "p1": { + "x": 0.4747832595422888, + "y": -0.12123341254486592 + }, + "p2": { + "x": 11, + "y": 65 + } + } + }, + { + "ID": "14606", + "typeID": "Arrow", + "zOrder": "38", + "w": "195", + "h": "124", + "measuredW": "150", + "measuredH": "100", + "x": "679", + "y": "298", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 194.50455208805204, + "y": 0.21486631796096844 + }, + "p1": { + "x": 0.5125873193980325, + "y": 0.11743289538347922 + }, + "p2": { + "x": -0.016173803428500833, + "y": 124.53032187659227 + } + } + }, + { + "ID": "14607", + "typeID": "__group__", + "zOrder": "47", + "measuredW": "207", + "measuredH": "47", + "w": "207", + "h": "47", + "x": "550", + "y": "414", + "properties": { + "controlName": "101-cli-tools" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "207", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2118,13 +328,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "155", + "measuredW": "72", "measuredH": "25", - "x": "55", - "y": "13", + "x": "68", + "y": "11", "properties": { "size": "17", - "text": "Fundamental Topics" + "text": "CLI Tools" } } ] @@ -2132,17 +342,17 @@ } }, { - "ID": "14430", + "ID": "14608", "typeID": "__group__", - "zOrder": "69", - "measuredW": "159", + "zOrder": "48", + "measuredW": "206", "measuredH": "44", - "w": "159", + "w": "206", "h": "44", - "x": "532", - "y": "505", + "x": "269", + "y": "416", "properties": { - "controlName": "102-react-fundamental-topics:components" + "controlName": "101-cli-tools:create-react-app" }, "children": { "controls": { @@ -2151,24 +361,292 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "159", + "w": "197", "h": "44", "measuredW": "200", "measuredH": "140", - "x": "0", + "x": "9", "y": "0", "properties": { "color": "16770457" } }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "139", + "measuredH": "25", + "x": "38", + "y": "10", + "properties": { + "size": "17", + "text": "Create React App" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "11", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14609", + "typeID": "__group__", + "zOrder": "49", + "measuredW": "206", + "measuredH": "44", + "w": "206", + "h": "44", + "x": "269", + "y": "367", + "properties": { + "controlName": "100-cli-tools:vite" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "197", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "9", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "30", + "measuredH": "25", + "x": "94", + "y": "10", + "properties": { + "size": "17", + "text": "Vite" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14611", + "typeID": "Arrow", + "zOrder": "37", + "w": "121", + "h": "48", + "measuredW": "150", + "measuredH": "100", + "x": "472", + "y": "380", + "properties": { + "color": "2848996", + "curvature": "1", + "direction": "top", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": -0.24502512380570352, + "y": -0.2591533504318022 + }, + "p1": { + "x": 0.3864377036851346, + "y": -0.12346452745048851 + }, + "p2": { + "x": 120.9799374604795, + "y": 47.93872333970569 + } + } + }, + { + "ID": "14613", + "typeID": "Arrow", + "zOrder": "36", + "w": "281", + "h": "1", + "measuredW": "150", + "measuredH": "100", + "x": "654", + "y": "444", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 281.3020743683919, + "y": 0.8810260550936846 + }, + "p1": { + "x": 0.4642857142857147, + "y": -0.003992113361953183 + }, + "p2": { + "x": 0.48803395698428176, + "y": 0.8810260550936846 + } + } + }, + { + "ID": "14614", + "typeID": "__group__", + "zOrder": "50", + "measuredW": "207", + "measuredH": "47", + "w": "207", + "h": "47", + "x": "862", + "y": "421", + "properties": { + "controlName": "102-components" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "207", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, { "ID": "1", "typeID": "Label", "zOrder": "1", "measuredW": "99", "measuredH": "25", - "x": "29", - "y": "10", + "x": "54", + "y": "11", "properties": { "size": "17", "text": "Components" @@ -2179,17 +657,17 @@ } }, { - "ID": "14431", + "ID": "14615", "typeID": "__group__", - "zOrder": "70", - "measuredW": "255", - "measuredH": "44", - "w": "255", - "h": "44", - "x": "1142", - "y": "447", + "zOrder": "51", + "measuredW": "246", + "measuredH": "47", + "w": "246", + "h": "47", + "x": "1154", + "y": "424", "properties": { - "controlName": "107-react-fundamental-topics:composition-vs-inheritance" + "controlName": "101-components:functional-components" }, "children": { "controls": { @@ -2198,55 +676,8 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "255", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "210", - "measuredH": "25", - "x": "22", - "y": "10", - "properties": { - "size": "17", - "text": "Composition vs Inheritance" - } - } - ] - } - } - }, - { - "ID": "14432", - "typeID": "__group__", - "zOrder": "71", - "measuredW": "213", - "measuredH": "44", - "w": "213", - "h": "44", - "x": "283", - "y": "482", - "properties": { - "controlName": "100-react-fundamental-topics:components:functional-components" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "213", - "h": "44", + "w": "235", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2261,29 +692,78 @@ "zOrder": "1", "measuredW": "183", "measuredH": "25", - "x": "16", - "y": "10", + "x": "26", + "y": "11", "properties": { "size": "17", "text": "Functional Components" } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "222", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } } ] } } }, { - "ID": "14433", + "ID": "14616", "typeID": "__group__", - "zOrder": "72", - "measuredW": "213", - "measuredH": "44", - "w": "213", - "h": "44", - "x": "283", - "y": "532", + "zOrder": "52", + "measuredW": "235", + "measuredH": "47", + "w": "235", + "h": "47", + "x": "1153", + "y": "371", "properties": { - "controlName": "101-react-fundamental-topics:components:class-components" + "controlName": "100-components:class-components" }, "children": { "controls": { @@ -2292,14 +772,14 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "213", - "h": "44", + "w": "235", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", "y": "0", "properties": { - "color": "16770457" + "color": "14540253" } }, { @@ -2308,8 +788,8 @@ "zOrder": "1", "measuredW": "146", "measuredH": "25", - "x": "33", - "y": "10", + "x": "45", + "y": "11", "properties": { "size": "17", "text": "Class Components" @@ -2320,299 +800,17 @@ } }, { - "ID": "14434", + "ID": "14619", "typeID": "__group__", - "zOrder": "73", - "measuredW": "159", - "measuredH": "44", - "w": "159", - "h": "44", - "x": "532", - "y": "455", - "properties": { - "controlName": "101-react-fundamental-topics:jsx" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "159", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "30", - "measuredH": "25", - "x": "63", - "y": "10", - "properties": { - "size": "17", - "text": "JSX" - } - } - ] - } - } - }, - { - "ID": "14435", - "typeID": "__group__", - "zOrder": "74", - "measuredW": "159", - "measuredH": "44", - "w": "159", - "h": "44", - "x": "532", - "y": "557", - "properties": { - "controlName": "103-react-fundamental-topics:props-vs-state" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "159", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "110", - "measuredH": "25", - "x": "22", - "y": "10", - "properties": { - "size": "17", - "text": "Props vs State" - } - } - ] - } - } - }, - { - "ID": "14436", - "typeID": "__group__", - "zOrder": "75", - "measuredW": "254", - "measuredH": "42", - "w": "254", - "h": "42", - "x": "1143", - "y": "497", - "properties": { - "controlName": "108-react-fundamental-topics:basic-hooks" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "254", - "h": "42", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "96", - "measuredH": "25", - "x": "80", - "y": "9", - "properties": { - "size": "17", - "text": "Basic Hooks" - } - } - ] - } - } - }, - { - "ID": "14437", - "typeID": "__group__", - "zOrder": "76", - "measuredW": "153", - "measuredH": "44", - "w": "153", - "h": "44", - "x": "1116", - "y": "565", - "properties": { - "controlName": "100-react-fundamental-topics:basic-hooks:use-state" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "153", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "69", - "measuredH": "25", - "x": "41", - "y": "10", - "properties": { - "size": "17", - "text": "useState" - } - } - ] - } - } - }, - { - "ID": "14438", - "typeID": "__group__", - "zOrder": "77", - "measuredW": "153", - "measuredH": "44", - "w": "153", - "h": "44", - "x": "1276", - "y": "565", - "properties": { - "controlName": "101-react-fundamental-topics:basic-hooks:use-effect" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "153", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "73", - "measuredH": "25", - "x": "39", - "y": "10", - "properties": { - "size": "17", - "text": "useEffect" - } - } - ] - } - } - }, - { - "ID": "14439", - "typeID": "__group__", - "zOrder": "78", - "measuredW": "255", - "measuredH": "44", - "w": "255", - "h": "44", - "x": "1142", - "y": "398", - "properties": { - "controlName": "106-react-fundamental-topics:lists-and-keys" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "255", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "111", - "measuredH": "25", - "x": "70", - "y": "10", - "properties": { - "size": "17", - "text": "Lists and Keys" - } - } - ] - } - } - }, - { - "ID": "14440", - "typeID": "__group__", - "zOrder": "79", + "zOrder": "53", "measuredW": "215", "measuredH": "44", "w": "215", "h": "44", - "x": "478", - "y": "607", + "x": "1163", + "y": "532", "properties": { - "controlName": "104-react-fundamental-topics:conditional-rendering" + "controlName": "102-components:jsx" }, "children": { "controls": { @@ -2635,13 +833,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "173", + "measuredW": "30", "measuredH": "25", - "x": "23", - "y": "10", + "x": "93", + "y": "9", "properties": { "size": "17", - "text": "Conditional Rendering" + "text": "JSX" } } ] @@ -2649,17 +847,17 @@ } }, { - "ID": "14441", + "ID": "14620", "typeID": "__group__", - "zOrder": "80", - "measuredW": "162", - "measuredH": "44", - "w": "162", - "h": "44", - "x": "530", - "y": "405", + "zOrder": "54", + "measuredW": "215", + "measuredH": "47", + "w": "215", + "h": "47", + "x": "1163", + "y": "580", "properties": { - "controlName": "100-react-fundamental-topics:cli-tools" + "controlName": "103-components:props-vs-state" }, "children": { "controls": { @@ -2668,8 +866,8 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "162", - "h": "44", + "w": "215", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2682,13 +880,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "72", + "measuredW": "110", "measuredH": "25", - "x": "45", - "y": "10", + "x": "53", + "y": "11", "properties": { "size": "17", - "text": "CLI Tools" + "text": "Props vs State" } } ] @@ -2696,17 +894,272 @@ } }, { - "ID": "14442", + "ID": "14621", "typeID": "__group__", - "zOrder": "81", - "measuredW": "255", - "measuredH": "44", - "w": "255", - "h": "44", - "x": "1142", - "y": "347", + "zOrder": "55", + "measuredW": "215", + "measuredH": "47", + "w": "215", + "h": "47", + "x": "1163", + "y": "631", "properties": { - "controlName": "105-react-fundamental-topics:component-life-cycle" + "controlName": "104-components:conditional-rendering" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "215", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "173", + "measuredH": "25", + "x": "21", + "y": "11", + "properties": { + "size": "17", + "text": "Conditional Rendering" + } + } + ] + } + } + }, + { + "ID": "14622", + "typeID": "__group__", + "zOrder": "56", + "measuredW": "215", + "measuredH": "47", + "w": "215", + "h": "47", + "x": "1163", + "y": "682", + "properties": { + "controlName": "105-components:composition-vs-inheritance" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "215", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "97", + "measuredH": "25", + "x": "59", + "y": "11", + "properties": { + "size": "17", + "text": "Composition" + } + } + ] + } + } + }, + { + "ID": "14623", + "typeID": "Canvas", + "zOrder": "35", + "w": "198", + "h": "272", + "measuredW": "100", + "measuredH": "70", + "x": "1172", + "y": "481" + }, + { + "ID": "14624", + "typeID": "Label", + "zOrder": "57", + "measuredW": "154", + "measuredH": "25", + "x": "1194", + "y": "496", + "properties": { + "size": "17", + "text": "Components Basics" + } + }, + { + "ID": "14627", + "typeID": "Arrow", + "zOrder": "34", + "w": "154", + "h": "1", + "measuredW": "150", + "measuredH": "100", + "x": "1018", + "y": "446", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 153.18911339670876, + "y": 0.8810260550936846 + }, + "p1": { + "x": 0.46428571428571463, + "y": -0.003992113361953182 + }, + "p2": { + "x": -0.3783855341235949, + "y": 0.8810260550936846 + }, + "stroke": "dotted" + } + }, + { + "ID": "14628", + "typeID": "Arrow", + "zOrder": "33", + "w": "120", + "h": "44", + "measuredW": "150", + "measuredH": "100", + "x": "1042", + "y": "393", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 119.54402658050071, + "y": 0.18134219350019976 + }, + "p1": { + "x": 0.45395537525354945, + "y": 0.09452332657200811 + }, + "p2": { + "x": -0.3306238495154048, + "y": 44.27316763902337 + } + } + }, + { + "ID": "14629", + "typeID": "Arrow", + "zOrder": "32", + "w": "153", + "h": "68", + "measuredW": "150", + "measuredH": "100", + "x": "1029", + "y": "455", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 153.21206975808968, + "y": 67.70107943972448 + }, + "p1": { + "x": 0.47348954701664, + "y": -0.1281842780799702 + }, + "p2": { + "x": 0.2685502439312586, + "y": 0.18547172626716701 + } + } + }, + { + "ID": "14631", + "typeID": "__group__", + "zOrder": "58", + "measuredW": "207", + "measuredH": "47", + "w": "207", + "h": "47", + "x": "862", + "y": "590", + "properties": { + "controlName": "103-rendering" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "207", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "82", + "measuredH": "25", + "x": "63", + "y": "11", + "properties": { + "size": "17", + "text": "Rendering" + } + } + ] + } + } + }, + { + "ID": "14632", + "typeID": "__group__", + "zOrder": "59", + "measuredW": "255", + "measuredH": "47", + "w": "255", + "h": "47", + "x": "450", + "y": "549", + "properties": { + "controlName": "101-rendering:lists-and-keys" }, "children": { "controls": { @@ -2716,7 +1169,54 @@ "typeID": "TextArea", "zOrder": "0", "w": "255", - "h": "44", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "111", + "measuredH": "25", + "x": "72", + "y": "11", + "properties": { + "size": "17", + "text": "Lists and Keys" + } + } + ] + } + } + }, + { + "ID": "14633", + "typeID": "__group__", + "zOrder": "60", + "measuredW": "255", + "measuredH": "47", + "w": "255", + "h": "47", + "x": "450", + "y": "497", + "properties": { + "controlName": "100-rendering:component-life-cycle" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "255", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2731,8 +1231,8 @@ "zOrder": "1", "measuredW": "170", "measuredH": "25", - "x": "42", - "y": "10", + "x": "43", + "y": "11", "properties": { "size": "17", "text": "Component Life Cycle" @@ -2743,17 +1243,46 @@ } }, { - "ID": "14443", - "typeID": "__group__", - "zOrder": "82", - "measuredW": "272", - "measuredH": "50", - "w": "272", - "h": "50", - "x": "788", - "y": "699", + "ID": "14634", + "typeID": "Arrow", + "zOrder": "31", + "w": "2", + "h": "403", + "measuredW": "150", + "measuredH": "100", + "x": "965", + "y": "445", "properties": { - "controlName": "101-react-advanced-topics" + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 0.48803395698428176, + "y": 403.1504450100517 + }, + "p1": { + "x": 0.46428571428571463, + "y": -0.003992113361953183 + }, + "p2": { + "x": 0.48803395698428176, + "y": -0.11897394490631541 + } + } + }, + { + "ID": "14636", + "typeID": "__group__", + "zOrder": "61", + "measuredW": "255", + "measuredH": "47", + "w": "255", + "h": "47", + "x": "450", + "y": "601", + "properties": { + "controlName": "102-rendering:render-props" }, "children": { "controls": { @@ -2762,8 +1291,412 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "272", - "h": "50", + "w": "255", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "107", + "measuredH": "25", + "x": "74", + "y": "11", + "properties": { + "size": "17", + "text": "Render Props" + } + } + ] + } + } + }, + { + "ID": "14637", + "typeID": "__group__", + "zOrder": "62", + "measuredW": "255", + "measuredH": "47", + "w": "255", + "h": "47", + "x": "450", + "y": "653", + "properties": { + "controlName": "103-rendering:refs" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "255", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "36", + "measuredH": "25", + "x": "110", + "y": "11", + "properties": { + "size": "17", + "text": "Refs" + } + } + ] + } + } + }, + { + "ID": "14638", + "typeID": "Arrow", + "zOrder": "29", + "w": "205", + "h": "74", + "measuredW": "150", + "measuredH": "100", + "x": "704", + "y": "522", + "properties": { + "color": "2848996", + "curvature": "0", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 204.86359480461078, + "y": 73.99538260490783 + }, + "p1": { + "x": 0.591967784066173, + "y": 0.06824118415324368 + }, + "p2": { + "x": -0.4389674261063874, + "y": -0.4095728344125291 + } + } + }, + { + "ID": "14640", + "typeID": "Arrow", + "zOrder": "28", + "w": "179", + "h": "63", + "measuredW": "150", + "measuredH": "100", + "x": "705", + "y": "617", + "properties": { + "color": "2848996", + "curvature": "0", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 179.061942991504, + "y": -0.33657421750319827 + }, + "p1": { + "x": 0.5695204038704248, + "y": -0.0861379890618428 + }, + "p2": { + "x": -0.06109788093374391, + "y": 63.045424860436356 + } + } + }, + { + "ID": "14641", + "typeID": "Arrow", + "zOrder": "27", + "w": "200", + "h": "31", + "measuredW": "150", + "measuredH": "100", + "x": "702", + "y": "567", + "properties": { + "color": "2848996", + "curvature": "0", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 199.9742470787478, + "y": 30.37325215008036 + }, + "p1": { + "x": 0.591967784066173, + "y": 0.06824118415324375 + }, + "p2": { + "x": 0.1831630287210828, + "y": 0.06012215628322792 + } + } + }, + { + "ID": "14642", + "typeID": "Arrow", + "zOrder": "30", + "w": "185", + "h": "29", + "measuredW": "150", + "measuredH": "100", + "x": "698", + "y": "608", + "properties": { + "color": "2848996", + "curvature": "0", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 184.68407344633147, + "y": 0.3962085114611682 + }, + "p1": { + "x": 0.5656988692166243, + "y": -0.05770306981716299 + }, + "p2": { + "x": 0.049554393203266045, + "y": 29.331468960085772 + } + } + }, + { + "ID": "14643", + "typeID": "__group__", + "zOrder": "63", + "measuredW": "255", + "measuredH": "47", + "w": "255", + "h": "47", + "x": "450", + "y": "705", + "properties": { + "controlName": "104-rendering:events" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "255", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "53", + "measuredH": "25", + "x": "101", + "y": "11", + "properties": { + "size": "17", + "text": "Events" + } + } + ] + } + } + }, + { + "ID": "14644", + "typeID": "Arrow", + "zOrder": "26", + "w": "196", + "h": "113", + "measuredW": "150", + "measuredH": "100", + "x": "705", + "y": "619", + "properties": { + "color": "2848996", + "curvature": "0", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 195.59637753357526, + "y": 0.419164872841975 + }, + "p1": { + "x": 0.5695204038704248, + "y": -0.0861379890618429 + }, + "p2": { + "x": -0.06109788093374391, + "y": 113.4044675769951 + } + } + }, + { + "ID": "14645", + "typeID": "__group__", + "zOrder": "64", + "measuredW": "255", + "measuredH": "47", + "w": "255", + "h": "47", + "x": "450", + "y": "758", + "properties": { + "controlName": "105-rendering:high-order-components" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "255", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "188", + "measuredH": "25", + "x": "34", + "y": "11", + "properties": { + "size": "17", + "text": "High Order Components" + } + } + ] + } + } + }, + { + "ID": "14646", + "typeID": "Arrow", + "zOrder": "25", + "w": "214", + "h": "167", + "measuredW": "150", + "measuredH": "100", + "x": "699", + "y": "619", + "properties": { + "color": "2848996", + "curvature": "0", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 213.9972034401286, + "y": 0.1978603245679551 + }, + "p1": { + "x": 0.5695204038704246, + "y": -0.08613798906184292 + }, + "p2": { + "x": 0.42742393837579584, + "y": 166.92007529045236 + } + } + }, + { + "ID": "14647", + "typeID": "Arrow", + "zOrder": "24", + "w": "1", + "h": "66", + "measuredW": "150", + "measuredH": "100", + "x": "966", + "y": "886", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 0.48803395698428176, + "y": 66.30567517486509 + }, + "p1": { + "x": 0.46428571428571463, + "y": -0.003992113361953185 + }, + "p2": { + "x": 0.48803395698428176, + "y": -0.11897394490631541 + }, + "stroke": "dotted" + } + }, + { + "ID": "14648", + "typeID": "__group__", + "zOrder": "65", + "measuredW": "242", + "measuredH": "47", + "w": "242", + "h": "47", + "x": "862", + "y": "850", + "properties": { + "controlName": "104-hooks" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "242", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2772,61 +1705,14 @@ "color": "16776960" } }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "130", - "measuredH": "25", - "x": "68", - "y": "13", - "properties": { - "size": "17", - "text": "Advanced Topics" - } - } - ] - } - } - }, - { - "ID": "14444", - "typeID": "__group__", - "zOrder": "83", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "561", - "y": "680", - "properties": { - "controlName": "100-react-advanced-topics:hooks" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, { "ID": "1", "typeID": "Label", "zOrder": "1", "measuredW": "49", "measuredH": "25", - "x": "55", - "y": "10", + "x": "96", + "y": "11", "properties": { "size": "17", "text": "Hooks" @@ -2837,17 +1723,17 @@ } }, { - "ID": "14445", + "ID": "14649", "typeID": "__group__", - "zOrder": "84", - "measuredW": "243", + "zOrder": "66", + "measuredW": "174", "measuredH": "44", - "w": "243", + "w": "174", "h": "44", - "x": "285", - "y": "659", + "x": "1184", + "y": "817", "properties": { - "controlName": "101-react-advanced-topics:hooks:writing-your-own-hooks" + "controlName": "100-hooks:basic-hooks:use-state" }, "children": { "controls": { @@ -2856,7 +1742,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "243", + "w": "174", "h": "44", "measuredW": "200", "measuredH": "140", @@ -2870,13 +1756,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "183", + "measuredW": "69", "measuredH": "25", - "x": "28", + "x": "52", "y": "10", "properties": { "size": "17", - "text": "Writing your Own Hooks" + "text": "useState" } } ] @@ -2884,17 +1770,215 @@ } }, { - "ID": "14446", + "ID": "14650", "typeID": "__group__", - "zOrder": "85", + "zOrder": "67", + "measuredW": "175", + "measuredH": "44", + "w": "175", + "h": "44", + "x": "1183", + "y": "865", + "properties": { + "controlName": "101-hooks:basic-hooks:use-effect" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "175", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "73", + "measuredH": "25", + "x": "51", + "y": "10", + "properties": { + "size": "17", + "text": "useEffect" + } + } + ] + } + } + }, + { + "ID": "14651", + "typeID": "__group__", + "zOrder": "23", + "measuredW": "198", + "measuredH": "157", + "w": "198", + "h": "157", + "x": "1172", + "y": "769", + "properties": { + "controlName": "100-hooks:basic-hooks" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "198", + "h": "157", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0" + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "96", + "measuredH": "25", + "x": "51", + "y": "16", + "properties": { + "size": "17", + "text": "Basic Hooks" + } + } + ] + } + } + }, + { + "ID": "14652", + "typeID": "Arrow", + "zOrder": "22", + "w": "170", + "h": "1", + "measuredW": "150", + "measuredH": "100", + "x": "1044", + "y": "873", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 169.71016756073527, + "y": 0.8810260550936846 + }, + "p1": { + "x": 0.4642857142857145, + "y": -0.003992113361953182 + }, + "p2": { + "x": -0.3783855341235949, + "y": 0.8810260550936846 + } + } + }, + { + "ID": "14653", + "typeID": "__group__", + "zOrder": "68", + "measuredW": "243", + "measuredH": "47", + "w": "243", + "h": "47", + "x": "861", + "y": "928", + "properties": { + "controlName": "101-hooks:writing-your-own-hooks" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "243", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "171", + "measuredH": "25", + "x": "36", + "y": "11", + "properties": { + "size": "17", + "text": "Writing Custom Hooks" + } + } + ] + } + } + }, + { + "ID": "14654", + "typeID": "Arrow", + "zOrder": "21", + "w": "148", + "h": "1", + "measuredW": "150", + "measuredH": "100", + "x": "435", + "y": "438", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 147.7561454352989, + "y": 0.8810260550936846 + }, + "p1": { + "x": 0.4642857142857145, + "y": -0.003992113361953184 + }, + "p2": { + "x": 0.24143192912043787, + "y": 0.8810260550936846 + }, + "stroke": "dotted" + } + }, + { + "ID": "14655", + "typeID": "__group__", + "zOrder": "69", "measuredW": "243", "measuredH": "248", "w": "243", "h": "248", - "x": "285", - "y": "710", + "x": "861", + "y": "982", "properties": { - "controlName": "102-react-advanced-topics:hooks:common-hooks" + "controlName": "102-hooks:common-hooks" }, "children": { "controls": { @@ -3093,17 +2177,17 @@ } }, { - "ID": "14447", + "ID": "14663", "typeID": "__group__", - "zOrder": "86", + "zOrder": "70", "measuredW": "157", - "measuredH": "44", + "measuredH": "47", "w": "157", - "h": "44", - "x": "561", - "y": "729", + "h": "47", + "x": "629", + "y": "850", "properties": { - "controlName": "101-react-advanced-topics:context" + "controlName": "105-routers" }, "children": { "controls": { @@ -3113,336 +2197,7 @@ "typeID": "TextArea", "zOrder": "0", "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "60", - "measuredH": "25", - "x": "48", - "y": "10", - "properties": { - "size": "17", - "text": "Context" - } - } - ] - } - } - }, - { - "ID": "14448", - "typeID": "__group__", - "zOrder": "87", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "561", - "y": "779", - "properties": { - "controlName": "102-react-advanced-topics:refs" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "36", - "measuredH": "25", - "x": "60", - "y": "10", - "properties": { - "size": "17", - "text": "Refs" - } - } - ] - } - } - }, - { - "ID": "14449", - "typeID": "__group__", - "zOrder": "88", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "561", - "y": "829", - "properties": { - "controlName": "103-react-advanced-topics:render-props" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "107", - "measuredH": "25", - "x": "25", - "y": "10", - "properties": { - "size": "17", - "text": "Render Props" - } - } - ] - } - } - }, - { - "ID": "14450", - "typeID": "__group__", - "zOrder": "89", - "measuredW": "224", - "measuredH": "44", - "w": "224", - "h": "44", - "x": "1152", - "y": "640", - "properties": { - "controlName": "104-react-advanced-topics:high-order-components" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "224", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "188", - "measuredH": "25", - "x": "18", - "y": "10", - "properties": { - "size": "17", - "text": "High Order Components" - } - } - ] - } - } - }, - { - "ID": "14451", - "typeID": "__group__", - "zOrder": "90", - "measuredW": "224", - "measuredH": "44", - "w": "224", - "h": "44", - "x": "1152", - "y": "690", - "properties": { - "controlName": "105-react-advanced-topics:portals" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "224", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "53", - "measuredH": "25", - "x": "85", - "y": "10", - "properties": { - "size": "17", - "text": "Portals" - } - } - ] - } - } - }, - { - "ID": "14452", - "typeID": "__group__", - "zOrder": "91", - "measuredW": "224", - "measuredH": "44", - "w": "224", - "h": "44", - "x": "1152", - "y": "739", - "properties": { - "controlName": "106-react-advanced-topics:error-boundaries" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "224", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "132", - "measuredH": "25", - "x": "47", - "y": "10", - "properties": { - "size": "17", - "text": "Error Boundaries" - } - } - ] - } - } - }, - { - "ID": "14453", - "typeID": "__group__", - "zOrder": "92", - "measuredW": "224", - "measuredH": "44", - "w": "224", - "h": "44", - "x": "1152", - "y": "788", - "properties": { - "controlName": "107-react-advanced-topics:fiber-architecture" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "224", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "138", - "measuredH": "25", - "x": "43", - "y": "10", - "properties": { - "size": "17", - "text": "Fiber Architecture" - } - } - ] - } - } - }, - { - "ID": "14454", - "typeID": "__group__", - "zOrder": "93", - "measuredW": "201", - "measuredH": "50", - "w": "201", - "h": "50", - "x": "744", - "y": "1002", - "properties": { - "controlName": "102-react-ecosystem" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "201", - "h": "50", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -3451,241 +2206,6 @@ "color": "16776960" } }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "84", - "measuredH": "25", - "x": "56", - "y": "12", - "properties": { - "size": "17", - "text": "Ecosystem" - } - } - ] - } - } - }, - { - "ID": "14455", - "typeID": "__group__", - "zOrder": "94", - "measuredW": "202", - "measuredH": "44", - "w": "202", - "h": "44", - "x": "990", - "y": "957", - "properties": { - "controlName": "105-react-ecosystem:forms" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "202", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "48", - "measuredH": "25", - "x": "77", - "y": "10", - "properties": { - "size": "17", - "text": "Forms" - } - } - ] - } - } - }, - { - "ID": "14456", - "typeID": "__group__", - "zOrder": "95", - "measuredW": "171", - "measuredH": "44", - "w": "171", - "h": "44", - "x": "1239", - "y": "861", - "properties": { - "controlName": "100-react-ecosystem:forms:react-hook-form" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "171", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "135", - "measuredH": "25", - "x": "19", - "y": "10", - "properties": { - "size": "17", - "text": "React Hook Form" - } - } - ] - } - } - }, - { - "ID": "14457", - "typeID": "__group__", - "zOrder": "96", - "measuredW": "171", - "measuredH": "44", - "w": "171", - "h": "44", - "x": "1239", - "y": "909", - "properties": { - "controlName": "101-react-ecosystem:forms:formik" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "171", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "52", - "measuredH": "25", - "x": "60", - "y": "10", - "properties": { - "size": "17", - "text": "Formik" - } - } - ] - } - } - }, - { - "ID": "14458", - "typeID": "__group__", - "zOrder": "97", - "measuredW": "171", - "measuredH": "44", - "w": "171", - "h": "44", - "x": "1239", - "y": "957", - "properties": { - "controlName": "102-react-ecosystem:forms:final-form" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "171", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "82", - "measuredH": "25", - "x": "46", - "y": "10", - "properties": { - "size": "17", - "text": "Final Form" - } - } - ] - } - } - }, - { - "ID": "14459", - "typeID": "__group__", - "zOrder": "98", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "545", - "y": "1001", - "properties": { - "controlName": "100-react-ecosystem:routers" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, { "ID": "1", "typeID": "Label", @@ -3693,7 +2213,7 @@ "measuredW": "61", "measuredH": "25", "x": "48", - "y": "10", + "y": "11", "properties": { "size": "17", "text": "Routers" @@ -3704,17 +2224,17 @@ } }, { - "ID": "14460", + "ID": "14664", "typeID": "__group__", - "zOrder": "99", - "measuredW": "158", - "measuredH": "44", - "w": "158", - "h": "44", - "x": "319", - "y": "967", + "zOrder": "71", + "measuredW": "167", + "measuredH": "47", + "w": "167", + "h": "47", + "x": "619", + "y": "924", "properties": { - "controlName": "100-react-ecosystem:routers:react-router" + "controlName": "100-routers:react-router" }, "children": { "controls": { @@ -3724,1571 +2244,7 @@ "typeID": "TextArea", "zOrder": "0", "w": "158", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "104", - "measuredH": "25", - "x": "27", - "y": "10", - "properties": { - "size": "17", - "text": "React Router" - } - } - ] - } - } - }, - { - "ID": "14461", - "typeID": "__group__", - "zOrder": "100", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "319", - "y": "1017", - "properties": { - "controlName": "101-react-ecosystem:routers:reach-router" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "108", - "measuredH": "25", - "x": "26", - "y": "10", - "properties": { - "size": "17", - "text": "Reach Router" - } - } - ] - } - } - }, - { - "ID": "14462", - "typeID": "__group__", - "zOrder": "101", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "545", - "y": "1307", - "properties": { - "controlName": "103-react-ecosystem:api-calls" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "69", - "measuredH": "25", - "x": "43", - "y": "10", - "properties": { - "size": "17", - "text": "API Calls" - } - } - ] - } - } - }, - { - "ID": "14463", - "typeID": "__group__", - "zOrder": "102", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "320", - "y": "1380", - "properties": { - "controlName": "104-react-ecosystem:api-calls:axios" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "41", - "measuredH": "25", - "x": "57", - "y": "10", - "properties": { - "size": "17", - "text": "Axios" - } - } - ] - } - } - }, - { - "ID": "14464", - "typeID": "__group__", - "zOrder": "103", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "319", - "y": "1430", - "properties": { - "controlName": "105-react-ecosystem:api-calls:unfetch" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "61", - "measuredH": "25", - "x": "49", - "y": "10", - "properties": { - "size": "17", - "text": "Unfetch" - } - } - ] - } - } - }, - { - "ID": "14465", - "typeID": "__group__", - "zOrder": "104", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "319", - "y": "1479", - "properties": { - "controlName": "106-react-ecosystem:api-calls:superagent" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "88", - "measuredH": "25", - "x": "35", - "y": "10", - "properties": { - "size": "17", - "text": "superagent" - } - } - ] - } - } - }, - { - "ID": "14466", - "typeID": "Label", - "zOrder": "105", - "measuredW": "117", - "measuredH": "25", - "x": "337", - "y": "1528", - "properties": { - "size": "17", - "text": "REST API Calls" - } - }, - { - "ID": "14467", - "typeID": "__group__", - "zOrder": "106", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "545", - "y": "1412", - "properties": { - "controlName": "101-react-ecosystem:api-calls:swr" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "38", - "measuredH": "25", - "x": "60", - "y": "10", - "properties": { - "size": "17", - "text": "SWR" - } - } - ] - } - } - }, - { - "ID": "14468", - "typeID": "__group__", - "zOrder": "107", - "measuredW": "156", - "measuredH": "44", - "w": "156", - "h": "44", - "x": "319", - "y": "1243", - "properties": { - "controlName": "102-react-ecosystem:api-calls:apollo" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "156", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "48", - "measuredH": "25", - "x": "55", - "y": "10", - "properties": { - "size": "17", - "text": "Apollo" - } - } - ] - } - } - }, - { - "ID": "14469", - "typeID": "__group__", - "zOrder": "108", - "measuredW": "156", - "measuredH": "44", - "w": "156", - "h": "44", - "x": "319", - "y": "1291", - "properties": { - "controlName": "103-react-ecosystem:api-calls:relay-modern" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "156", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "107", - "measuredH": "25", - "x": "25", - "y": "10", - "properties": { - "size": "17", - "text": "Relay Modern" - } - } - ] - } - } - }, - { - "ID": "14470", - "typeID": "Label", - "zOrder": "109", - "measuredW": "71", - "measuredH": "25", - "x": "360", - "y": "1341", - "properties": { - "size": "17", - "text": "GraphQL" - } - }, - { - "ID": "14471", - "typeID": "__group__", - "zOrder": "110", - "measuredW": "202", - "measuredH": "44", - "w": "202", - "h": "44", - "x": "990", - "y": "1035", - "properties": { - "controlName": "106-react-ecosystem:testing" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "202", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "56", - "measuredH": "25", - "x": "72", - "y": "10", - "properties": { - "size": "17", - "text": "Testing" - } - } - ] - } - } - }, - { - "ID": "14472", - "typeID": "__group__", - "zOrder": "111", - "measuredW": "218", - "measuredH": "44", - "w": "218", - "h": "44", - "x": "1239", - "y": "1084", - "properties": { - "controlName": "100-react-ecosystem:testing:jest" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "218", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "33", - "measuredH": "25", - "x": "92", - "y": "10", - "properties": { - "size": "17", - "text": "Jest" - } - } - ] - } - } - }, - { - "ID": "14473", - "typeID": "__group__", - "zOrder": "112", - "measuredW": "218", - "measuredH": "44", - "w": "218", - "h": "44", - "x": "1239", - "y": "1134", - "properties": { - "controlName": "101-react-ecosystem:testing:react-testing-library" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "218", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "164", - "measuredH": "25", - "x": "25", - "y": "10", - "properties": { - "size": "17", - "text": "React Testing Library" - } - } - ] - } - } - }, - { - "ID": "14474", - "typeID": "__group__", - "zOrder": "113", - "measuredW": "218", - "measuredH": "44", - "w": "218", - "h": "44", - "x": "1239", - "y": "1184", - "properties": { - "controlName": "102-react-ecosystem:testing:cypress" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "218", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "63", - "measuredH": "25", - "x": "76", - "y": "10", - "properties": { - "size": "17", - "text": "Cypress" - } - } - ] - } - } - }, - { - "ID": "14475", - "typeID": "__group__", - "zOrder": "114", - "measuredW": "202", - "measuredH": "44", - "w": "202", - "h": "44", - "x": "997", - "y": "1124", - "properties": { - "controlName": "107-react-ecosystem:state-management" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "202", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "148", - "measuredH": "25", - "x": "27", - "y": "10", - "properties": { - "size": "17", - "text": "State Management" - } - } - ] - } - } - }, - { - "ID": "14476", - "typeID": "__group__", - "zOrder": "115", - "measuredW": "155", - "measuredH": "44", - "w": "155", - "h": "44", - "x": "1047", - "y": "1207", - "properties": { - "controlName": "100-react-ecosystem:state-management:context-state" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "155", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "117", - "measuredH": "25", - "x": "17", - "y": "10", - "properties": { - "size": "17", - "text": "Context / State" - } - } - ] - } - } - }, - { - "ID": "14477", - "typeID": "__group__", - "zOrder": "116", - "measuredW": "155", - "measuredH": "44", - "w": "155", - "h": "44", - "x": "1047", - "y": "1303", - "properties": { - "controlName": "101-react-ecosystem:state-management:redux" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "155", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "50", - "measuredH": "25", - "x": "53", - "y": "10", - "properties": { - "size": "17", - "text": "Redux" - } - } - ] - } - } - }, - { - "ID": "14478", - "typeID": "__group__", - "zOrder": "117", - "measuredW": "155", - "measuredH": "44", - "w": "155", - "h": "44", - "x": "1047", - "y": "1351", - "properties": { - "controlName": "102-react-ecosystem:state-management:mobx" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "155", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "44", - "measuredH": "25", - "x": "56", - "y": "10", - "properties": { - "size": "17", - "text": "MobX" - } - } - ] - } - } - }, - { - "ID": "14479", - "typeID": "__group__", - "zOrder": "118", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "544", - "y": "1112", - "properties": { - "controlName": "101-react-ecosystem:ssr" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "33", - "measuredH": "25", - "x": "61", - "y": "10", - "properties": { - "size": "17", - "text": "SSR" - } - } - ] - } - } - }, - { - "ID": "14480", - "typeID": "__group__", - "zOrder": "119", - "measuredW": "158", - "measuredH": "44", - "w": "158", - "h": "44", - "x": "317", - "y": "1133", - "properties": { - "controlName": "100-react-ecosystem:ssr:next-js" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "158", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "52", - "measuredH": "25", - "x": "52", - "y": "10", - "properties": { - "size": "17", - "text": "Next.js" - } - } - ] - } - } - }, - { - "ID": "14481", - "typeID": "__group__", - "zOrder": "120", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "1053", - "y": "1467", - "properties": { - "controlName": "108-react-ecosystem:styling" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "51", - "measuredH": "25", - "x": "51", - "y": "10", - "properties": { - "size": "17", - "text": "Styling" - } - } - ] - } - } - }, - { - "ID": "14482", - "typeID": "__group__", - "zOrder": "121", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "1270", - "y": "1413", - "properties": { - "controlName": "100-react-ecosystem:styling:chakra-ui" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "78", - "measuredH": "25", - "x": "40", - "y": "10", - "properties": { - "size": "17", - "text": "Chakra UI" - } - } - ] - } - } - }, - { - "ID": "14483", - "typeID": "__group__", - "zOrder": "122", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "1270", - "y": "1462", - "properties": { - "controlName": "101-react-ecosystem:styling:material-ui" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "86", - "measuredH": "25", - "x": "36", - "y": "10", - "properties": { - "size": "17", - "text": "Material UI" - } - } - ] - } - } - }, - { - "ID": "14484", - "typeID": "__group__", - "zOrder": "123", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "1270", - "y": "1510", - "properties": { - "controlName": "102-react-ecosystem:styling:mantine" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "63", - "measuredH": "25", - "x": "47", - "y": "10", - "properties": { - "size": "17", - "text": "Mantine" - } - } - ] - } - } - }, - { - "ID": "14485", - "typeID": "__group__", - "zOrder": "124", - "measuredW": "191", - "measuredH": "44", - "w": "191", - "h": "44", - "x": "1039", - "y": "1541", - "properties": { - "controlName": "103-react-ecosystem:styling:styled-components" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "191", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "150", - "measuredH": "25", - "x": "19", - "y": "10", - "properties": { - "size": "17", - "text": "Styled Components" - } - } - ] - } - } - }, - { - "ID": "14486", - "typeID": "__group__", - "zOrder": "125", - "measuredW": "191", - "measuredH": "44", - "w": "191", - "h": "44", - "x": "1039", - "y": "1590", - "properties": { - "controlName": "104-react-ecosystem:styling:emotion" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "191", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "64", - "measuredH": "25", - "x": "65", - "y": "10", - "properties": { - "size": "17", - "text": "Emotion" - } - } - ] - } - } - }, - { - "ID": "14487", - "typeID": "__group__", - "zOrder": "126", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "317", - "y": "1182", - "properties": { - "controlName": "101-react-ecosystem:ssg:gatsby" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "54", - "measuredH": "25", - "x": "51", - "y": "10", - "properties": { - "size": "17", - "text": "Gatsby" - } - } - ] - } - } - }, - { - "ID": "14488", - "typeID": "__group__", - "zOrder": "127", - "measuredW": "159", - "measuredH": "44", - "w": "159", - "h": "44", - "x": "544", - "y": "1594", - "properties": { - "controlName": "104-react-ecosystem:mobile" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "159", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "52", - "measuredH": "25", - "x": "55", - "y": "10", - "properties": { - "size": "17", - "text": "Mobile" - } - } - ] - } - } - }, - { - "ID": "14489", - "typeID": "__group__", - "zOrder": "128", - "measuredW": "159", - "measuredH": "44", - "w": "159", - "h": "44", - "x": "336", - "y": "1594", - "properties": { - "controlName": "100-react-ecosystem:mobile:react-native" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "159", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "100", - "measuredH": "25", - "x": "30", - "y": "10", - "properties": { - "size": "17", - "text": "React Native" - } - } - ] - } - } - }, - { - "ID": "14490", - "typeID": "__group__", - "zOrder": "129", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "544", - "y": "1163", - "properties": { - "controlName": "102-react-ecosystem:ssg" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "34", - "measuredH": "25", - "x": "61", - "y": "10", - "properties": { - "size": "17", - "text": "SSG" - } - } - ] - } - } - }, - { - "ID": "14491", - "typeID": "__group__", - "zOrder": "130", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "544", - "y": "1232", - "properties": { - "controlName": "100-react-ecosystem:api-calls:react-query" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "90", - "measuredH": "25", - "x": "34", - "y": "9", - "properties": { - "size": "17", - "text": "react-query" - } - } - ] - } - } - }, - { - "ID": "14492", - "typeID": "__group__", - "zOrder": "131", - "measuredW": "391", - "measuredH": "55", - "w": "391", - "h": "55", - "x": "702", - "y": "264", - "properties": { - "controlName": "ext_link:roadmap.sh/javascript" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "391", - "h": "55", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "4273622", - "borderColor": "4273622" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "230", - "measuredH": "28", - "x": "81", - "y": "14", - "properties": { - "size": "20", - "color": "16777215", - "text": "Visit JavaScript Roadmap" - } - } - ] - } - } - }, - { - "ID": "14493", - "typeID": "Arrow", - "zOrder": "132", - "w": "1", - "h": "64", - "measuredW": "150", - "measuredH": "100", - "x": "899", - "y": "30", - "properties": { - "color": "2848996", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "p0": { - "x": -0.3586399639038973, - "y": 0 - }, - "p1": { - "x": 0.32941176470588224, - "y": 0 - }, - "p2": { - "x": -0.3586399639038973, - "y": 64 - }, - "stroke": "dotted" - } - }, - { - "ID": "14494", - "typeID": "__group__", - "zOrder": "133", - "measuredW": "391", - "measuredH": "55", - "w": "391", - "h": "55", - "x": "686", - "y": "1657", - "properties": { - "controlName": "ext_link:roadmap.sh/frontend" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "391", - "h": "55", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "4273622", - "borderColor": "4273622" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "219", - "measuredH": "28", - "x": "86", - "y": "14", - "properties": { - "size": "20", - "color": "16777215", - "text": "Visit Frontend Roadmap" - } - } - ] - } - } - }, - { - "ID": "14495", - "typeID": "__group__", - "zOrder": "134", - "measuredW": "206", - "measuredH": "44", - "w": "206", - "h": "44", - "x": "268", - "y": "405", - "properties": { - "controlName": "100-react-fundamental-topics:cli-tools:create-react-app" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "197", - "h": "44", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "9", @@ -5301,13 +2257,109 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "139", + "measuredW": "104", "measuredH": "25", - "x": "38", - "y": "10", + "x": "36", + "y": "11", "properties": { "size": "17", - "text": "Create React App" + "text": "React Router" + } + }, + { + "ID": "3", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "12", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14665", + "typeID": "__group__", + "zOrder": "72", + "measuredW": "168", + "measuredH": "47", + "w": "168", + "h": "47", + "x": "617", + "y": "976", + "properties": { + "controlName": "101-routers:reach-router" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "11", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "108", + "measuredH": "25", + "x": "37", + "y": "11", + "properties": { + "size": "17", + "text": "Reach Router" } }, { @@ -5319,7 +2371,7 @@ "w": "24", "h": "24", "x": "0", - "y": "11", + "y": "12", "children": { "controls": { "control": [ @@ -5380,17 +2432,76 @@ } }, { - "ID": "14496", - "typeID": "__group__", - "zOrder": "135", - "measuredW": "209", - "measuredH": "44", - "w": "209", - "h": "44", - "x": "268", - "y": "353", + "ID": "14668", + "typeID": "Arrow", + "zOrder": "20", + "w": "497", + "h": "1", + "measuredW": "150", + "measuredH": "100", + "x": "454", + "y": "874", "properties": { - "controlName": "101-react-fundamental-topics:cli-tools:vite" + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 497.3020743683919, + "y": -0.11897394490631541 + }, + "p1": { + "x": 0.4685630212909191, + "y": -0.0004822370830620483 + }, + "p2": { + "x": 0.20078475948128016, + "y": -0.11897394490631541 + } + } + }, + { + "ID": "14669", + "typeID": "Arrow", + "zOrder": "19", + "w": "1", + "h": "66", + "measuredW": "150", + "measuredH": "100", + "x": "707", + "y": "874", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 0.48803395698428176, + "y": 66.30567517486509 + }, + "p1": { + "x": 0.46428571428571463, + "y": -0.003992113361953185 + }, + "p2": { + "x": 0.48803395698428176, + "y": -0.11897394490631541 + }, + "stroke": "dotted" + } + }, + { + "ID": "14670", + "typeID": "__group__", + "zOrder": "73", + "measuredW": "230", + "measuredH": "47", + "w": "230", + "h": "47", + "x": "241", + "y": "851", + "properties": { + "controlName": "106-state-management" }, "children": { "controls": { @@ -5399,10 +2510,58 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", + "w": "230", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "148", + "measuredH": "25", + "x": "41", + "y": "11", + "properties": { + "size": "17", + "text": "State Management" + } + } + ] + } + } + }, + { + "ID": "14672", + "typeID": "__group__", + "zOrder": "74", + "measuredW": "175", + "measuredH": "44", + "w": "175", + "h": "44", + "x": "231", + "y": "765", + "properties": { + "controlName": "100-state-management:context" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "165", "h": "44", "measuredW": "200", "measuredH": "140", - "x": "9", + "x": "10", "y": "0", "properties": { "color": "16770457" @@ -5412,13 +2571,109 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "30", + "measuredW": "60", "measuredH": "25", - "x": "94", + "x": "63", "y": "10", "properties": { "size": "17", - "text": "Vite" + "text": "Context" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "9", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14673", + "typeID": "__group__", + "zOrder": "75", + "measuredW": "174", + "measuredH": "44", + "w": "174", + "h": "44", + "x": "231", + "y": "717", + "properties": { + "controlName": "101-state-management:zustand" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "164", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "10", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "62", + "measuredH": "25", + "x": "61", + "y": "10", + "properties": { + "size": "17", + "text": "Zustand" } }, { @@ -5475,274 +2730,17 @@ } }, { - "ID": "14497", - "typeID": "Canvas", - "zOrder": "136", - "w": "408", - "h": "202", - "measuredW": "100", - "measuredH": "70", - "x": "215", - "y": "72" - }, - { - "ID": "14498", + "ID": "14674", "typeID": "__group__", - "zOrder": "137", - "measuredW": "191", - "measuredH": "27", - "w": "191", - "h": "27", - "x": "250", - "y": "147", - "properties": { - "controlName": "ext_link:roadmap.sh/frontend" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "Label", - "zOrder": "0", - "measuredW": "158", - "measuredH": "26", - "x": "33", - "y": "0", - "properties": { - "size": "18", - "text": "Frontend Roadmap" - } - }, - { - "ID": "1", - "typeID": "__group__", - "zOrder": "1", - "measuredW": "24", - "measuredH": "24", - "w": "24", - "h": "24", - "x": "0", - "y": "3", - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "Icon", - "zOrder": "0", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "0", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "1", - "typeID": "Icon", - "zOrder": "1", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "0", - "properties": { - "color": "10066329", - "icon": { - "ID": "check-circle", - "size": "small" - } - } - } - ] - } - } - } - ] - } - } - }, - { - "ID": "14499", - "typeID": "__group__", - "zOrder": "138", - "measuredW": "202", - "measuredH": "27", - "w": "202", - "h": "27", - "x": "250", - "y": "183", - "properties": { - "controlName": "ext_link:roadmap.sh/javascript" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "Label", - "zOrder": "0", - "measuredW": "169", - "measuredH": "26", - "x": "33", - "y": "0", - "properties": { - "size": "18", - "text": "JavaScript Roadmap" - } - }, - { - "ID": "1", - "typeID": "__group__", - "zOrder": "1", - "measuredW": "24", - "measuredH": "24", - "w": "24", - "h": "24", - "x": "0", - "y": "3", - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "Icon", - "zOrder": "0", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "0", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "1", - "typeID": "Icon", - "zOrder": "1", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "0", - "properties": { - "color": "10066329", - "icon": { - "ID": "check-circle", - "size": "small" - } - } - } - ] - } - } - } - ] - } - } - }, - { - "ID": "14500", - "typeID": "__group__", - "zOrder": "139", - "measuredW": "178", - "measuredH": "27", - "w": "178", - "h": "27", - "x": "250", - "y": "219", - "properties": { - "controlName": "ext_link:roadmap.sh/nodejs" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "Label", - "zOrder": "0", - "measuredW": "145", - "measuredH": "26", - "x": "33", - "y": "0", - "properties": { - "size": "18", - "text": "Node.js Roadmap" - } - }, - { - "ID": "1", - "typeID": "__group__", - "zOrder": "1", - "measuredW": "24", - "measuredH": "24", - "w": "24", - "h": "24", - "x": "0", - "y": "3", - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "Icon", - "zOrder": "0", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "0", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "1", - "typeID": "Icon", - "zOrder": "1", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "0", - "properties": { - "color": "10066329", - "icon": { - "ID": "check-circle", - "size": "small" - } - } - } - ] - } - } - } - ] - } - } - }, - { - "ID": "14501", - "typeID": "__group__", - "zOrder": "140", - "measuredW": "218", + "zOrder": "76", + "measuredW": "176", "measuredH": "44", - "w": "218", + "w": "176", "h": "44", - "x": "1240", - "y": "1035", + "x": "231", + "y": "669", "properties": { - "controlName": "103-react-ecosystem:testing:vitest" + "controlName": "102-state-management:redux-and-redux-toolkit" }, "children": { "controls": { @@ -5751,11 +2749,153 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "218", + "w": "166", "h": "44", "measuredW": "200", "measuredH": "140", + "x": "10", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "115", + "measuredH": "25", + "x": "35", + "y": "10", + "properties": { + "size": "17", + "text": "Redux / Toolkit" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", "x": "0", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14676", + "typeID": "Arrow", + "zOrder": "18", + "w": "1", + "h": "93", + "measuredW": "150", + "measuredH": "100", + "x": "319", + "y": "785", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 0.48803395698428176, + "y": 93.15044501005173 + }, + "p1": { + "x": 0.46428571428571475, + "y": -0.003992113361953184 + }, + "p2": { + "x": 0.48803395698428176, + "y": -0.19048075572618473 + }, + "stroke": "dotted" + } + }, + { + "ID": "14679", + "typeID": "__group__", + "zOrder": "77", + "measuredW": "174", + "measuredH": "44", + "w": "174", + "h": "44", + "x": "232", + "y": "621", + "properties": { + "controlName": "103-state-management:mobx" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "164", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "10", "y": "0", "properties": { "color": "16770457" @@ -5767,11 +2907,76 @@ "zOrder": "1", "measuredW": "44", "measuredH": "25", - "x": "87", + "x": "70", "y": "10", "properties": { "size": "17", - "text": "Vitest" + "text": "MobX" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } } } ] @@ -5779,17 +2984,17 @@ } }, { - "ID": "14502", + "ID": "14680", "typeID": "__group__", - "zOrder": "141", - "measuredW": "218", + "zOrder": "78", + "measuredW": "174", "measuredH": "44", - "w": "218", + "w": "174", "h": "44", - "x": "1239", - "y": "1234", + "x": "232", + "y": "573", "properties": { - "controlName": "104-react-ecosystem:testing:playwright" + "controlName": "104-state-management:recoil" }, "children": { "controls": { @@ -5798,7 +3003,179 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "218", + "w": "164", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "10", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "49", + "measuredH": "25", + "x": "67", + "y": "10", + "properties": { + "size": "17", + "text": "Recoil" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14681", + "typeID": "__group__", + "zOrder": "79", + "measuredW": "227", + "measuredH": "47", + "w": "227", + "h": "47", + "x": "244", + "y": "1056", + "properties": { + "controlName": "107-styling" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "227", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "51", + "measuredH": "25", + "x": "88", + "y": "10", + "properties": { + "size": "17", + "text": "Styling" + } + } + ] + } + } + }, + { + "ID": "14682", + "typeID": "Arrow", + "zOrder": "17", + "w": "1", + "h": "577", + "measuredW": "150", + "measuredH": "100", + "x": "298", + "y": "876", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 0.20078475948128016, + "y": 577.1975430248967 + }, + "p1": { + "x": 0.46856302129091965, + "y": -0.0004822370830620473 + }, + "p2": { + "x": 0.20078475948128016, + "y": -0.11897394490631541 + } + } + }, + { + "ID": "14683", + "typeID": "__group__", + "zOrder": "80", + "measuredW": "166", + "measuredH": "44", + "w": "166", + "h": "44", + "x": "598", + "y": "1195", + "properties": { + "controlName": "105-styling:chakra-ui" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", "h": "44", "measuredW": "200", "measuredH": "140", @@ -5814,11 +3191,76 @@ "zOrder": "1", "measuredW": "78", "measuredH": "25", - "x": "70", + "x": "40", "y": "10", "properties": { "size": "17", - "text": "Playwright" + "text": "Chakra UI" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "142", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } } } ] @@ -5826,30 +3268,17 @@ } }, { - "ID": "14503", - "typeID": "Label", - "zOrder": "142", - "measuredW": "209", - "measuredH": "32", - "x": "250", - "y": "99", - "properties": { - "size": "24", - "text": "Related Roadmaps" - } - }, - { - "ID": "14504", + "ID": "14684", "typeID": "__group__", - "zOrder": "143", - "measuredW": "153", + "zOrder": "81", + "measuredW": "165", "measuredH": "44", - "w": "153", + "w": "165", "h": "44", - "x": "929", - "y": "565", + "x": "597", + "y": "1148", "properties": { - "controlName": "109-react-fundamental-topics:events" + "controlName": "104-styling:material-ui" }, "children": { "controls": { @@ -5858,7 +3287,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "153", + "w": "157", "h": "44", "measuredW": "200", "measuredH": "140", @@ -5872,13 +3301,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "53", + "measuredW": "86", "measuredH": "25", - "x": "50", + "x": "36", "y": "10", "properties": { "size": "17", - "text": "Events" + "text": "Material UI" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "141", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } } } ] @@ -5886,17 +3380,17 @@ } }, { - "ID": "14505", + "ID": "14685", "typeID": "__group__", - "zOrder": "144", - "measuredW": "155", + "zOrder": "82", + "measuredW": "167", "measuredH": "44", - "w": "155", + "w": "167", "h": "44", - "x": "1048", - "y": "1255", + "x": "598", + "y": "1054", "properties": { - "controlName": "101-react-ecosystem:state-management:zustand" + "controlName": "102-styling:mantine" }, "children": { "controls": { @@ -5905,7 +3399,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "155", + "w": "157", "h": "44", "measuredW": "200", "measuredH": "140", @@ -5919,13 +3413,62 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "62", + "measuredW": "63", "measuredH": "25", "x": "47", "y": "10", "properties": { "size": "17", - "text": "Zustand" + "text": "Mantine" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "143", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } } } ] @@ -5933,17 +3476,2189 @@ } }, { - "ID": "14507", + "ID": "14686", "typeID": "__group__", - "zOrder": "145", - "measuredW": "158", + "zOrder": "83", + "measuredW": "167", "measuredH": "44", - "w": "158", + "w": "167", "h": "44", - "x": "317", - "y": "1084", + "x": "597", + "y": "1101", "properties": { - "controlName": "100-react-ecosystem:ssr:remix" + "controlName": "103-styling:tailwind" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "61", + "measuredH": "25", + "x": "48", + "y": "10", + "properties": { + "size": "17", + "text": "Tailwind" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "143", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14687", + "typeID": "Arrow", + "zOrder": "13", + "w": "170", + "h": "10", + "measuredW": "150", + "measuredH": "100", + "x": "445", + "y": "1067", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 170.15151515151513, + "y": 10.881026055093571 + }, + "p1": { + "x": 0.46856302129091937, + "y": -0.0004822370830620513 + }, + "p2": { + "x": 0.08755558946864994, + "y": 0.40174459352692793 + }, + "stroke": "dotted" + } + }, + { + "ID": "14688", + "typeID": "Arrow", + "zOrder": "14", + "w": "160", + "h": "49", + "measuredW": "150", + "measuredH": "100", + "x": "453", + "y": "1079", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 159.9948370393879, + "y": 49.03492956155333 + }, + "p1": { + "x": 0.4948398930687969, + "y": -0.06769152207708602 + }, + "p2": { + "x": 0.0831404204171804, + "y": 0.39512183994975203 + } + } + }, + { + "ID": "14689", + "typeID": "Arrow", + "zOrder": "15", + "w": "164", + "h": "93", + "measuredW": "150", + "measuredH": "100", + "x": "446", + "y": "1085", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 164.32964209573845, + "y": 92.3410360190694 + }, + "p1": { + "x": 0.41660090341695827, + "y": -0.10834198348411798 + }, + "p2": { + "x": 0.4201530612933766, + "y": -0.27448827275134136 + } + } + }, + { + "ID": "14690", + "typeID": "Arrow", + "zOrder": "16", + "w": "165", + "h": "133", + "measuredW": "150", + "measuredH": "100", + "x": "445", + "y": "1093", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 165.32964209573845, + "y": 132.31454500476048 + }, + "p1": { + "x": 0.4477509372866056, + "y": -0.11613270851109678 + }, + "p2": { + "x": 0.08755558946864994, + "y": -0.2789034418026404 + } + } + }, + { + "ID": "14691", + "typeID": "__group__", + "zOrder": "84", + "measuredW": "210", + "measuredH": "44", + "w": "210", + "h": "44", + "x": "347", + "y": "979", + "properties": { + "controlName": "100-styling:styled-components" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "150", + "measuredH": "25", + "x": "24", + "y": "10", + "properties": { + "size": "17", + "text": "Styled Components" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "186", + "y": "9", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14692", + "typeID": "__group__", + "zOrder": "85", + "measuredW": "210", + "measuredH": "44", + "w": "210", + "h": "44", + "x": "347", + "y": "931", + "properties": { + "controlName": "101-styling:emotion" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "201", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "64", + "measuredH": "25", + "x": "69", + "y": "10", + "properties": { + "size": "17", + "text": "Emotion" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "186", + "y": "8", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14693", + "typeID": "Arrow", + "zOrder": "12", + "w": "1", + "h": "91", + "measuredW": "150", + "measuredH": "100", + "x": "439", + "y": "1002", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 0.48803395698428176, + "y": 90.42424242424227 + }, + "p1": { + "x": 0.4642857142857146, + "y": -0.003992113361953182 + }, + "p2": { + "x": 0.48803395698428176, + "y": -0.48484848484849863 + } + } + }, + { + "ID": "14695", + "typeID": "__group__", + "zOrder": "86", + "measuredW": "214", + "measuredH": "47", + "w": "214", + "h": "47", + "x": "250", + "y": "1436", + "properties": { + "controlName": "108-api-calls" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "214", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "69", + "measuredH": "25", + "x": "72", + "y": "11", + "properties": { + "size": "17", + "text": "API Calls" + } + } + ] + } + } + }, + { + "ID": "14696", + "typeID": "TextArea", + "zOrder": "87", + "w": "105", + "h": "200", + "measuredW": "200", + "measuredH": "140", + "x": "366", + "y": "1195", + "properties": { + "color": "16777215" + } + }, + { + "ID": "14697", + "typeID": "Label", + "zOrder": "88", + "measuredW": "71", + "measuredH": "25", + "x": "383", + "y": "1356", + "properties": { + "size": "17", + "text": "GraphQL" + } + }, + { + "ID": "14698", + "typeID": "__group__", + "zOrder": "89", + "measuredW": "167", + "measuredH": "44", + "w": "167", + "h": "44", + "x": "341", + "y": "1210", + "properties": { + "controlName": "100-api-calls:apollo" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "156", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "48", + "measuredH": "25", + "x": "55", + "y": "10", + "properties": { + "size": "17", + "text": "Apollo" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "143", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14699", + "typeID": "__group__", + "zOrder": "90", + "measuredW": "165", + "measuredH": "44", + "w": "165", + "h": "44", + "x": "341", + "y": "1258", + "properties": { + "controlName": "101-api-calls:relay" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "156", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "44", + "measuredH": "25", + "x": "56", + "y": "10", + "properties": { + "size": "17", + "text": "Relay" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "141", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14700", + "typeID": "__group__", + "zOrder": "91", + "measuredW": "165", + "measuredH": "44", + "w": "165", + "h": "44", + "x": "341", + "y": "1305", + "properties": { + "controlName": "102-api-calls:urql" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "156", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "32", + "measuredH": "25", + "x": "62", + "y": "10", + "properties": { + "size": "17", + "text": "Urql" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "141", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14701", + "typeID": "Arrow", + "zOrder": "11", + "w": "1", + "h": "179", + "measuredW": "150", + "measuredH": "100", + "x": "418", + "y": "1377", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 0.48803395698428176, + "y": 178.1633254647479 + }, + "p1": { + "x": 0.4642857142857147, + "y": -0.00399211336195318 + }, + "p2": { + "x": 0.48803395698428176, + "y": -0.48484848484849863 + } + } + }, + { + "ID": "14702", + "typeID": "TextArea", + "zOrder": "92", + "w": "105", + "h": "248", + "measuredW": "200", + "measuredH": "140", + "x": "366", + "y": "1525", + "properties": { + "color": "16777215" + } + }, + { + "ID": "14703", + "typeID": "Label", + "zOrder": "93", + "measuredW": "44", + "measuredH": "25", + "x": "397", + "y": "1539", + "properties": { + "size": "17", + "text": "REST" + } + }, + { + "ID": "14704", + "typeID": "__group__", + "zOrder": "94", + "measuredW": "165", + "measuredH": "44", + "w": "165", + "h": "44", + "x": "336", + "y": "1571", + "properties": { + "controlName": "103-api-calls:swr" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "156", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "38", + "measuredH": "25", + "x": "59", + "y": "10", + "properties": { + "size": "17", + "text": "SWR" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "141", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "icon": { + "ID": "check-circle", + "size": "small" + }, + "color": "10027263" + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14705", + "typeID": "__group__", + "zOrder": "95", + "measuredW": "165", + "measuredH": "44", + "w": "165", + "h": "44", + "x": "337", + "y": "1667", + "properties": { + "controlName": "105-api-calls:axios" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "41", + "measuredH": "25", + "x": "57", + "y": "10", + "properties": { + "size": "17", + "text": "Axios" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "141", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14707", + "typeID": "__group__", + "zOrder": "96", + "measuredW": "165", + "measuredH": "44", + "w": "165", + "h": "44", + "x": "338", + "y": "1715", + "properties": { + "controlName": "106-api-calls:superagent" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "88", + "measuredH": "25", + "x": "35", + "y": "10", + "properties": { + "size": "17", + "text": "superagent" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "141", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14708", + "typeID": "__group__", + "zOrder": "97", + "measuredW": "165", + "measuredH": "44", + "w": "165", + "h": "44", + "x": "335", + "y": "1619", + "properties": { + "controlName": "104-api-calls:react-query" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "90", + "measuredH": "25", + "x": "34", + "y": "9", + "properties": { + "size": "17", + "text": "react-query" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "141", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "icon": { + "ID": "check-circle", + "size": "small" + }, + "color": "10027263" + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14710", + "typeID": "__group__", + "zOrder": "98", + "measuredW": "202", + "measuredH": "47", + "w": "202", + "h": "47", + "x": "771", + "y": "1436", + "properties": { + "controlName": "109-testing" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "202", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "56", + "measuredH": "25", + "x": "73", + "y": "11", + "properties": { + "size": "17", + "text": "Testing" + } + } + ] + } + } + }, + { + "ID": "14711", + "typeID": "__group__", + "zOrder": "99", + "measuredW": "109", + "measuredH": "44", + "w": "109", + "h": "44", + "x": "733", + "y": "1290", + "properties": { + "controlName": "100-testing:jest" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "100", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "9", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "33", + "measuredH": "25", + "x": "42", + "y": "10", + "properties": { + "size": "17", + "text": "Jest" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14712", + "typeID": "__group__", + "zOrder": "100", + "measuredW": "123", + "measuredH": "44", + "w": "123", + "h": "44", + "x": "847", + "y": "1290", + "properties": { + "controlName": "101-testing:vitest" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "112", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "44", + "measuredH": "25", + "x": "34", + "y": "10", + "properties": { + "size": "17", + "text": "Vitest" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "99", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14713", + "typeID": "__group__", + "zOrder": "101", + "measuredW": "229", + "measuredH": "44", + "w": "229", + "h": "44", + "x": "730", + "y": "1339", + "properties": { + "controlName": "102-testing:react-testing-library" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "218", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "11", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "164", + "measuredH": "25", + "x": "36", + "y": "10", + "properties": { + "size": "17", + "text": "React Testing Library" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14714", + "typeID": "TextArea", + "zOrder": "10", + "w": "249", + "h": "131", + "measuredW": "200", + "measuredH": "140", + "x": "725", + "y": "1273", + "properties": { + "color": "16777215" + } + }, + { + "ID": "14717", + "typeID": "Arrow", + "zOrder": "9", + "w": "399", + "h": "1", + "measuredW": "150", + "measuredH": "100", + "x": "432", + "y": "1459", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 398.87452368273557, + "y": -0.1189739449064291 + }, + "p1": { + "x": 0.46856302129091915, + "y": -0.00048223708306204834 + }, + "p2": { + "x": 0.20078475948128016, + "y": -0.11897394490631541 + } + } + }, + { + "ID": "14718", + "typeID": "Arrow", + "zOrder": "8", + "w": "1", + "h": "158", + "measuredW": "150", + "measuredH": "100", + "x": "871", + "y": "1383", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 0.48803395698428176, + "y": 157.48267742941835 + }, + "p1": { + "x": 0.4642857142857147, + "y": -0.003992113361953185 + }, + "p2": { + "x": 0.48803395698428176, + "y": -0.11897394490631541 + } + } + }, + { + "ID": "14719", + "typeID": "__group__", + "zOrder": "102", + "measuredW": "161", + "measuredH": "44", + "w": "161", + "h": "44", + "x": "821", + "y": "1517", + "properties": { + "controlName": "103-testing:cypress" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "152", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "63", + "measuredH": "25", + "x": "44", + "y": "10", + "properties": { + "size": "17", + "text": "Cypress" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "137", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14720", + "typeID": "__group__", + "zOrder": "103", + "measuredW": "162", + "measuredH": "44", + "w": "162", + "h": "44", + "x": "821", + "y": "1565", + "properties": { + "controlName": "104-testing:playwright" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "152", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "78", + "measuredH": "25", + "x": "37", + "y": "10", + "properties": { + "size": "17", + "text": "Playwright" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "138", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14721", + "typeID": "Arrow", + "zOrder": "7", + "w": "323", + "h": "336", + "measuredW": "150", + "measuredH": "100", + "x": "949", + "y": "1119", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 323.71054144095206, + "y": -0.2577704536804504 + }, + "p1": { + "x": 0.5105886846310793, + "y": 0.2003859568009807 + }, + "p2": { + "x": 0.23583113021061308, + "y": 335.9299197382693 + } + } + }, + { + "ID": "14722", + "typeID": "__group__", + "zOrder": "104", + "measuredW": "202", + "measuredH": "47", + "w": "202", + "h": "47", + "x": "1169", + "y": "1092", + "properties": { + "controlName": "110-frameworks" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "202", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "94", + "measuredH": "25", + "x": "54", + "y": "11", + "properties": { + "size": "17", + "text": "Frameworks" + } + } + ] + } + } + }, + { + "ID": "14723", + "typeID": "__group__", + "zOrder": "105", + "measuredW": "167", + "measuredH": "44", + "w": "167", + "h": "44", + "x": "1213", + "y": "1014", + "properties": { + "controlName": "101-frameworks:next-js" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "158", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "52", + "measuredH": "25", + "x": "52", + "y": "10", + "properties": { + "size": "17", + "text": "Next.js" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "143", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14724", + "typeID": "__group__", + "zOrder": "106", + "measuredW": "169", + "measuredH": "44", + "w": "169", + "h": "44", + "x": "1212", + "y": "966", + "properties": { + "controlName": "100-frameworks:remix" }, "children": { "controls": { @@ -5974,54 +5689,147 @@ "size": "17", "text": "Remix" } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "145", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } } ] } } }, { - "ID": "14508", + "ID": "14725", "typeID": "Arrow", - "zOrder": "1", - "w": "96", - "h": "30", + "zOrder": "6", + "w": "1", + "h": "87", "measuredW": "150", "measuredH": "100", - "x": "461", - "y": "1100", + "x": "1293", + "y": "1023", "properties": { "color": "2848996", - "curvature": "-1", "direction": "bottom", "leftArrow": "false", "rightArrow": "false", "stroke": "dotted", "p0": { - "x": 96.17695738701968, - "y": 29.91337767979394 + "x": 0.48803395698428176, + "y": 87.26690962551424 }, "p1": { - "x": 0.5740721807586135, - "y": 0.016256006543298205 + "x": 0.46428571428571475, + "y": -0.0039921133619531856 }, "p2": { - "x": -0.14352726765127954, - "y": 0.27630547835678954 + "x": 0.48803395698428176, + "y": -0.11897394490631541 } } }, { - "ID": "14509", - "typeID": "__group__", - "zOrder": "146", - "measuredW": "218", - "measuredH": "44", - "w": "218", - "h": "44", - "x": "1239", - "y": "1303", + "ID": "14726", + "typeID": "Arrow", + "zOrder": "5", + "w": "1", + "h": "329", + "measuredW": "150", + "measuredH": "100", + "x": "1296", + "y": "1118", "properties": { - "controlName": "100-react-ecosystem:state-management:redux:redux-toolkit" + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 0.20078475948139385, + "y": 328.45459981746376 + }, + "p1": { + "x": 0.46856302129091976, + "y": -0.0004822370830620469 + }, + "p2": { + "x": 0.20078475948128016, + "y": -0.11897394490631541 + } + } + }, + { + "ID": "14727", + "typeID": "__group__", + "zOrder": "107", + "measuredW": "202", + "measuredH": "44", + "w": "202", + "h": "44", + "x": "1169", + "y": "1420", + "properties": { + "controlName": "111-forms" }, "children": { "controls": { @@ -6030,7 +5838,54 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "218", + "w": "202", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "48", + "measuredH": "25", + "x": "77", + "y": "10", + "properties": { + "size": "17", + "text": "Forms" + } + } + ] + } + } + }, + { + "ID": "14728", + "typeID": "__group__", + "zOrder": "108", + "measuredW": "198", + "measuredH": "44", + "w": "198", + "h": "44", + "x": "1190", + "y": "1517", + "properties": { + "controlName": "100-forms:react-hook-form" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "186", "h": "44", "measuredW": "200", "measuredH": "140", @@ -6044,13 +5899,62 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "103", + "measuredW": "135", "measuredH": "25", - "x": "57", + "x": "25", "y": "10", "properties": { "size": "17", - "text": "Redux Toolkit" + "text": "React Hook Form" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "174", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } } } ] @@ -6058,50 +5962,1184 @@ } }, { - "ID": "14510", + "ID": "14729", + "typeID": "__group__", + "zOrder": "109", + "measuredW": "195", + "measuredH": "44", + "w": "195", + "h": "44", + "x": "1191", + "y": "1565", + "properties": { + "controlName": "101-forms:formik" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "185", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "52", + "measuredH": "25", + "x": "67", + "y": "10", + "properties": { + "size": "17", + "text": "Formik" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "171", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14730", + "typeID": "__group__", + "zOrder": "110", + "measuredW": "195", + "measuredH": "44", + "w": "195", + "h": "44", + "x": "1191", + "y": "1613", + "properties": { + "controlName": "102-forms:final-form" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "185", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "82", + "measuredH": "25", + "x": "52", + "y": "10", + "properties": { + "size": "17", + "text": "Final Form" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "171", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14731", "typeID": "Arrow", - "zOrder": "0", - "w": "87", - "h": "2", + "zOrder": "4", + "w": "1", + "h": "107", "measuredW": "150", "measuredH": "100", - "x": "1169", - "y": "1324", + "x": "1295", + "y": "1437", "properties": { "color": "2848996", - "curvature": "-1", - "direction": "top", + "direction": "bottom", "leftArrow": "false", "rightArrow": "false", "stroke": "dotted", "p0": { - "x": 87.08063080147826, - "y": 0.28039844162640293 + "x": 0.48803395698428176, + "y": 106.92077890672635 }, "p1": { - "x": 0.4826498422712936, - "y": 0.022082018927444477 + "x": 0.46428571428571475, + "y": -0.0039921133619531856 }, "p2": { - "x": 0.40617436331285717, - "y": -0.3216264545321792 + "x": 0.48803395698428176, + "y": -0.11897394490631541 + } + } + }, + { + "ID": "14734", + "typeID": "__group__", + "zOrder": "113", + "measuredW": "224", + "measuredH": "44", + "w": "224", + "h": "44", + "x": "910", + "y": "1679", + "properties": { + "controlName": "112-suspense" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "224", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "77", + "measuredH": "25", + "x": "73", + "y": "10", + "properties": { + "size": "17", + "text": "Suspense" + } + } + ] + } + } + }, + { + "ID": "14736", + "typeID": "__group__", + "zOrder": "114", + "measuredW": "224", + "measuredH": "44", + "w": "224", + "h": "44", + "x": "910", + "y": "1727", + "properties": { + "controlName": "113-portals" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "224", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "53", + "measuredH": "25", + "x": "85", + "y": "10", + "properties": { + "size": "17", + "text": "Portals" + } + } + ] + } + } + }, + { + "ID": "14737", + "typeID": "__group__", + "zOrder": "115", + "measuredW": "224", + "measuredH": "44", + "w": "224", + "h": "44", + "x": "910", + "y": "1775", + "properties": { + "controlName": "114-error-boundaries" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "224", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "132", + "measuredH": "25", + "x": "47", + "y": "10", + "properties": { + "size": "17", + "text": "Error Boundaries" + } + } + ] + } + } + }, + { + "ID": "14738", + "typeID": "__group__", + "zOrder": "116", + "measuredW": "224", + "measuredH": "44", + "w": "224", + "h": "44", + "x": "910", + "y": "1823", + "properties": { + "controlName": "115-fiber-architecture" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "224", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "138", + "measuredH": "25", + "x": "43", + "y": "10", + "properties": { + "size": "17", + "text": "Fiber Architecture" + } + } + ] + } + } + }, + { + "ID": "14739", + "typeID": "Arrow", + "zOrder": "3", + "w": "100", + "h": "1", + "measuredW": "150", + "measuredH": "100", + "x": "1100", + "y": "1442", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 99.87452368273557, + "y": -0.1189739449064291 + }, + "p1": { + "x": 0.4685630212909191, + "y": -0.00048223708306204904 + }, + "p2": { + "x": 0.22113086399144777, + "y": 1.2242665918161038 + } + } + }, + { + "ID": "14740", + "typeID": "Arrow", + "zOrder": "111", + "w": "1", + "h": "329", + "measuredW": "150", + "measuredH": "100", + "x": "1100", + "y": "1444", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 0.20078475948139385, + "y": 328.45459981746376 + }, + "p1": { + "x": 0.46856302129091976, + "y": -0.0004822370830620469 + }, + "p2": { + "x": 0.20078475948128016, + "y": -0.11897394490631541 + } + } + }, + { + "ID": "14741", + "typeID": "TextArea", + "zOrder": "112", + "w": "253", + "h": "251", + "measuredW": "200", + "measuredH": "140", + "x": "894", + "y": "1662", + "properties": { + "color": "16777215" + } + }, + { + "ID": "14742", + "typeID": "Label", + "zOrder": "117", + "measuredW": "130", + "measuredH": "25", + "x": "956", + "y": "1877", + "properties": { + "size": "17", + "text": "Advanced Topics" + } + }, + { + "ID": "14743", + "typeID": "Arrow", + "zOrder": "2", + "w": "215", + "h": "1", + "measuredW": "150", + "measuredH": "100", + "x": "707", + "y": "1748", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 214.87452368273557, + "y": -0.1189739449064291 + }, + "p1": { + "x": 0.46856302129091915, + "y": -0.0004822370830620489 + }, + "p2": { + "x": -0.49168649527814523, + "y": -0.1189739449064291 + } + } + }, + { + "ID": "14744", + "typeID": "__group__", + "zOrder": "118", + "measuredW": "159", + "measuredH": "44", + "w": "159", + "h": "44", + "x": "628", + "y": "1728", + "properties": { + "controlName": "116-mobile" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "159", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "52", + "measuredH": "25", + "x": "55", + "y": "10", + "properties": { + "size": "17", + "text": "Mobile" + } + } + ] + } + } + }, + { + "ID": "14745", + "typeID": "__group__", + "zOrder": "119", + "measuredW": "159", + "measuredH": "44", + "w": "159", + "h": "44", + "x": "628", + "y": "1635", + "properties": { + "controlName": "100-mobile:react-native" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "159", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "100", + "measuredH": "25", + "x": "30", + "y": "10", + "properties": { + "size": "17", + "text": "React Native" + } + } + ] + } + } + }, + { + "ID": "14746", + "typeID": "Arrow", + "zOrder": "1", + "w": "1", + "h": "92", + "measuredW": "150", + "measuredH": "100", + "x": "707", + "y": "1653", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 0.48803395698428176, + "y": 92.16332546474791 + }, + "p1": { + "x": 0.4642857142857146, + "y": -0.003992113361953179 + }, + "p2": { + "x": 0.48803395698428176, + "y": 0.31578862917604056 + } + } + }, + { + "ID": "14747", + "typeID": "Arrow", + "zOrder": "120", + "w": "1", + "h": "139", + "measuredW": "150", + "measuredH": "100", + "x": "707", + "y": "2078", + "properties": { + "color": "2848996", + "curvature": "-1", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 0, + "y": 0 + }, + "p1": { + "x": 0.4438624012549725, + "y": -0.00008403832147459167 + }, + "p2": { + "x": 0, + "y": 139 + }, + "stroke": "dotted" + } + }, + { + "ID": "14748", + "typeID": "Arrow", + "zOrder": "0", + "w": "1", + "h": "287", + "measuredW": "150", + "measuredH": "100", + "x": "707", + "y": "1760", + "properties": { + "color": "2848996", + "curvature": "-1", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 0, + "y": 0 + }, + "p1": { + "x": 0.44386240125497245, + "y": -0.00008403832147459167 + }, + "p2": { + "x": 0, + "y": 286.8596251740669 + } + } + }, + { + "ID": "14749", + "typeID": "TextArea", + "zOrder": "121", + "w": "425", + "h": "124", + "measuredW": "200", + "measuredH": "140", + "x": "494", + "y": "2009" + }, + { + "ID": "14750", + "typeID": "Label", + "zOrder": "122", + "measuredW": "369", + "measuredH": "25", + "x": "523", + "y": "2029", + "properties": { + "size": "17", + "text": "Visit the Frontend Developer Roadmap for more" + } + }, + { + "ID": "14752", + "typeID": "__group__", + "zOrder": "123", + "measuredW": "370", + "measuredH": "44", + "w": "370", + "h": "44", + "x": "523", + "y": "2064", + "properties": { + "controlName": "ext_link:roadmap.sh/frontend" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "370", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "149", + "measuredH": "25", + "x": "110", + "y": "9", + "properties": { + "size": "17", + "text": "Frontend Roadmap" + } + } + ] + } + } + }, + { + "ID": "14753", + "typeID": "__group__", + "zOrder": "124", + "measuredW": "352", + "measuredH": "54", + "w": "352", + "h": "54", + "x": "1149", + "y": "266", + "properties": { + "controlName": "100-react-roadmap-note" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "352", + "h": "54", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0" + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "224", + "measuredH": "26", + "x": "50", + "y": "14", + "properties": { + "size": "18", + "text": "Important Note / Click here" + } + }, + { + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "18", + "y": "18", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "icon": { + "ID": "check-circle", + "size": "small" + }, + "color": "13576743" + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "14754", + "typeID": "__group__", + "zOrder": "125", + "measuredW": "408", + "measuredH": "162", + "w": "408", + "h": "162", + "x": "185", + "y": "85", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Canvas", + "zOrder": "0", + "w": "408", + "h": "162", + "measuredW": "100", + "measuredH": "70", + "x": "0", + "y": "0" + }, + { + "ID": "1", + "typeID": "__group__", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "23", + "y": "21", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + }, + { + "ID": "2", + "typeID": "Label", + "zOrder": "2", + "measuredW": "269", + "measuredH": "24", + "x": "59", + "y": "21", + "properties": { + "size": "16", + "text": "Personal Recommendation / Opinion" + } + }, + { + "ID": "3", + "typeID": "Label", + "zOrder": "3", + "measuredW": "159", + "measuredH": "24", + "x": "59", + "y": "118", + "properties": { + "size": "16", + "text": "I wouldn't recommend" + } + }, + { + "ID": "4", + "typeID": "Icon", + "zOrder": "4", + "measuredW": "24", + "measuredH": "24", + "x": "23", + "y": "118", + "properties": { + "color": "10066329", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "5", + "typeID": "Label", + "zOrder": "5", + "w": "324", + "measuredW": "315", + "measuredH": "24", + "x": "60", + "y": "86", + "properties": { + "size": "16", + "text": "Order in roadmap not strict (Learn anytime)" + } + }, + { + "ID": "6", + "typeID": "__group__", + "zOrder": "6", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "23", + "y": "86", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10066329", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + }, + { + "ID": "7", + "typeID": "Label", + "zOrder": "7", + "measuredW": "272", + "measuredH": "24", + "x": "59", + "y": "54", + "properties": { + "size": "16", + "text": "Alternative Option - Pick this or purple" + } + }, + { + "ID": "8", + "typeID": "__group__", + "zOrder": "8", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "23", + "y": "53", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] } } } ] }, "attributes": { - "name": "New Wireframe 1 copy 3", - "order": 1000016.2408968211, + "name": "New Wireframe 1 copy 2", + "order": 1000006.8992828326, "parentID": null, "notes": "" }, "branchID": "Master", - "resourceID": "13C27694-0370-442D-AECD-EFA2B687DD15", - "mockupH": "1751", - "mockupW": "1285", - "measuredW": "1500", - "measuredH": "1781", + "resourceID": "4BE92169-157F-4FC5-8E20-403CBCF7A6C6", + "mockupH": "2141", + "mockupW": "1316", + "measuredW": "1501", + "measuredH": "2217", "version": "1.0" }, "groupOffset": { diff --git a/public/sitemap.xml b/public/sitemap.xml index 1a4214e35..8cab4ee9a 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -27,7 +27,7 @@ https://roadmap.sh/react monthly - 2022-11-14T14:37:04.938Z + 2022-12-28T15:28:34.355Z 1.0