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,1988 +3,749 @@ "controls": { "control": [ { - "ID": "14363", - "typeID": "Arrow", - "zOrder": "2", - "w": "1", - "h": "70", - "measuredW": "150", - "measuredH": "100", - "x": "1005", - "y": "516", + "ID": "14593", + "typeID": "Label", + "zOrder": "40", + "measuredW": "76", + "measuredH": "36", + "x": "834", + "y": "153", "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 + "size": "28", + "text": "React" + } + }, + { + "ID": "14594", + "typeID": "Canvas", + "zOrder": "41", + "w": "350", + "h": "141", + "measuredW": "100", + "measuredH": "70", + "x": "1150", + "y": "82" + }, + { + "ID": "14595", + "typeID": "Label", + "zOrder": "42", + "measuredW": "314", + "measuredH": "25", + "x": "1164", + "y": "99", + "properties": { + "size": "17", + "text": "Find the detailed version of this roadmap" + } + }, + { + "ID": "14596", + "typeID": "Label", + "zOrder": "43", + "measuredW": "319", + "measuredH": "25", + "x": "1164", + "y": "127", + "properties": { + "size": "17", + "text": "along with resources and other roadmaps" + } + }, + { + "ID": "14597", + "typeID": "__group__", + "zOrder": "44", + "measuredW": "320", + "measuredH": "45", + "w": "320", + "h": "45", + "x": "1165", + "y": "163", + "properties": { + "controlName": "ext_link:roadmap.sh" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Canvas", + "zOrder": "0", + "w": "320", + "h": "45", + "measuredW": "100", + "measuredH": "70", + "x": "0", + "y": "0", + "properties": { + "borderColor": "4273622", + "color": "4273622" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "105", + "measuredH": "28", + "x": "141", + "y": "8", + "properties": { + "color": "16777215", + "size": "20", + "text": "roadmap.sh" + } + }, + { + "ID": "2", + "typeID": "Label", + "zOrder": "2", + "measuredW": "45", + "measuredH": "28", + "x": "66", + "y": "8", + "properties": { + "color": "16777215", + "size": "20", + "text": "https" + } + }, + { + "ID": "3", + "typeID": "Label", + "zOrder": "3", + "measuredW": "5", + "measuredH": "28", + "x": "113", + "y": "8", + "properties": { + "color": "16777215", + "size": "20", + "text": ":" + } + }, + { + "ID": "4", + "typeID": "Label", + "zOrder": "4", + "measuredW": "10", + "measuredH": "28", + "x": "120", + "y": "9", + "properties": { + "color": "16777215", + "size": "20", + "text": "/" + } + }, + { + "ID": "5", + "typeID": "Label", + "zOrder": "5", + "measuredW": "10", + "measuredH": "28", + "x": "128", + "y": "9", + "properties": { + "color": "16777215", + "size": "20", + "text": "/" + } + } + ] } } }, { - "ID": "14364", - "typeID": "Arrow", - "zOrder": "3", - "w": "122", - "h": "18", - "measuredW": "150", - "measuredH": "100", - "x": "1042", - "y": "705", + "ID": "14598", + "typeID": "__group__", + "zOrder": "45", + "measuredW": "342", + "measuredH": "55", + "w": "342", + "h": "55", + "x": "702", + "y": "264", "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 + "controlName": "ext_link:roadmap.sh/javascript" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "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": "14365", + "ID": "14604", "typeID": "Arrow", - "zOrder": "4", - "w": "107", - "h": "49", + "zOrder": "39", + "w": "15", + "h": "83", "measuredW": "150", "measuredH": "100", - "x": "455", - "y": "370", + "x": "875", + "y": "203", "properties": { "color": "2848996", - "curvature": "0", "direction": "bottom", "leftArrow": "false", "rightArrow": "false", - "stroke": "dotted", "p0": { - "x": 107, - "y": 49 + "x": 11.504552088052037, + "y": 0.21486631796096844 }, "p1": { - "x": 0.623226362084596, - "y": 0.11385756526041142 + "x": 0.48122701874598317, + "y": 0.08919085657179801 }, "p2": { - "x": -0.02838679217563822, - "y": 0.14889944008285738 + "x": -0.05283881539992308, + "y": 83.59686539590052 } } }, { - "ID": "14366", + "ID": "14605", "typeID": "Arrow", - "zOrder": "5", - "w": "109", - "h": "2", + "zOrder": "46", + "w": "11", + "h": "65", "measuredW": "150", "measuredH": "100", - "x": "444", - "y": "429", + "x": "837", + "y": "76", "properties": { "color": "2848996", - "curvature": "0", "direction": "bottom", "leftArrow": "false", "rightArrow": "false", "stroke": "dotted", "p0": { - "x": 109, - "y": 0 + "x": 5.81355254908226, + "y": -0.3048709282632984 }, "p1": { - "x": 0.6380090497737557, - "y": -0.0018099547511312274 + "x": 0.4747832595422888, + "y": -0.12123341254486592 }, "p2": { - "x": -0.15267712237124442, - "y": 1.7703510910608884 + "x": 11, + "y": 65 } } }, { - "ID": "14367", + "ID": "14606", "typeID": "Arrow", - "zOrder": "6", - "w": "2", - "h": "571", + "zOrder": "38", + "w": "195", + "h": "124", "measuredW": "150", "measuredH": "100", - "x": "896", - "y": "158", + "x": "679", + "y": "298", "properties": { "color": "2848996", "direction": "bottom", "leftArrow": "false", "rightArrow": "false", "p0": { - "x": 2.621614465876405, - "y": 0.236415956616014 + "x": 194.50455208805204, + "y": 0.21486631796096844 }, "p1": { - "x": 0.4642857142857143, - "y": -0.00399211336195318 + "x": 0.5125873193980325, + "y": 0.11743289538347922 }, "p2": { - "x": 2.621614465876405, - "y": 570.8810260550937 + "x": -0.016173803428500833, + "y": 124.53032187659227 } } }, { - "ID": "14368", - "typeID": "Label", - "zOrder": "7", - "measuredW": "76", - "measuredH": "36", - "x": "862", - "y": "106", - "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": "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", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "72", + "measuredH": "25", + "x": "68", + "y": "11", + "properties": { + "size": "17", + "text": "CLI Tools" + } + } + ] + } } }, { - "ID": "14416", - "typeID": "Arrow", - "zOrder": "55", - "h": "33", - "measuredW": "150", - "measuredH": "100", - "x": "1003", - "y": "469", + "ID": "14608", + "typeID": "__group__", + "zOrder": "48", + "measuredW": "206", + "measuredH": "44", + "w": "206", + "h": "44", + "x": "269", + "y": "416", "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 + "controlName": "101-cli-tools:create-react-app" + }, + "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": "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": "14417", - "typeID": "Arrow", - "zOrder": "56", - "w": "50", - "h": "77", - "measuredW": "150", - "measuredH": "100", - "x": "1208", - "y": "518", + "ID": "14609", + "typeID": "__group__", + "zOrder": "49", + "measuredW": "206", + "measuredH": "44", + "w": "206", + "h": "44", + "x": "269", + "y": "367", "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" + "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": "14418", + "ID": "14611", "typeID": "Arrow", - "zOrder": "57", - "w": "181", - "h": "83", + "zOrder": "37", + "w": "121", + "h": "48", "measuredW": "150", "measuredH": "100", - "x": "971", - "y": "419", + "x": "472", + "y": "380", "properties": { "color": "2848996", - "curvature": "0", - "direction": "bottom", + "curvature": "1", + "direction": "top", "leftArrow": "false", "rightArrow": "false", "stroke": "dotted", "p0": { - "x": 180.63029513632432, - "y": -0.1823303653113726 + "x": -0.24502512380570352, + "y": -0.2591533504318022 }, "p1": { - "x": 0.4419322661853425, - "y": 0.047879162114662706 + "x": 0.3864377036851346, + "y": -0.12346452745048851 }, "p2": { - "x": -0.13942272935423716, - "y": 83.2498471111557 + "x": 120.9799374604795, + "y": 47.93872333970569 } } }, { - "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", + "ID": "14613", "typeID": "Arrow", - "zOrder": "59", - "w": "67", - "h": "29", + "zOrder": "36", + "w": "281", + "h": "1", "measuredW": "150", "measuredH": "100", - "x": "477", - "y": "528", + "x": "654", + "y": "444", "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 + "x": 281.3020743683919, + "y": 0.8810260550936846 }, "p1": { - "length": 0.4463661980631013, - "x": 0.44581164221486, - "y": 0.022243256034074732 + "x": 0.4642857142857147, + "y": -0.003992113361953183 }, "p2": { - "length": 73.7360156233031, - "x": 69, - "y": 26 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "14422", - "typeID": "Canvas", - "zOrder": "61", - "w": "350", - "h": "141", - "measuredW": "100", - "measuredH": "70", - "x": "1150", - "y": "82" - }, - { - "ID": "14423", - "typeID": "Label", - "zOrder": "62", - "measuredW": "314", - "measuredH": "25", - "x": "1164", - "y": "99", - "properties": { - "size": "17", - "text": "Find the detailed version of this roadmap" - } - }, - { - "ID": "14424", - "typeID": "Label", - "zOrder": "63", - "measuredW": "319", - "measuredH": "25", - "x": "1164", - "y": "127", - "properties": { - "size": "17", - "text": "along with resources and other roadmaps" + "x": 0.48803395698428176, + "y": 0.8810260550936846 + } } }, { - "ID": "14425", + "ID": "14614", "typeID": "__group__", - "zOrder": "64", - "measuredW": "320", - "measuredH": "45", - "w": "320", - "h": "45", - "x": "1165", - "y": "163", + "zOrder": "50", + "measuredW": "207", + "measuredH": "47", + "w": "207", + "h": "47", + "x": "862", + "y": "421", "properties": { - "controlName": "ext_link:roadmap.sh" + "controlName": "102-components" }, "children": { "controls": { "control": [ { "ID": "0", - "typeID": "Canvas", + "typeID": "TextArea", "zOrder": "0", - "w": "320", - "h": "45", - "measuredW": "100", - "measuredH": "70", + "w": "207", + "h": "47", + "measuredW": "200", + "measuredH": "140", "x": "0", "y": "0", "properties": { - "borderColor": "4273622", - "color": "4273622" + "color": "16776960" } }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "105", - "measuredH": "28", - "x": "141", - "y": "8", - "properties": { - "color": "16777215", - "size": "20", - "text": "roadmap.sh" - } - }, - { - "ID": "2", - "typeID": "Label", - "zOrder": "2", - "measuredW": "45", - "measuredH": "28", - "x": "66", - "y": "8", + "measuredW": "99", + "measuredH": "25", + "x": "54", + "y": "11", "properties": { - "color": "16777215", - "size": "20", - "text": "https" + "size": "17", + "text": "Components" } - }, + } + ] + } + } + }, + { + "ID": "14615", + "typeID": "__group__", + "zOrder": "51", + "measuredW": "246", + "measuredH": "47", + "w": "246", + "h": "47", + "x": "1154", + "y": "424", + "properties": { + "controlName": "101-components:functional-components" + }, + "children": { + "controls": { + "control": [ { - "ID": "3", - "typeID": "Label", - "zOrder": "3", - "measuredW": "5", - "measuredH": "28", - "x": "113", - "y": "8", + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "235", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", "properties": { - "color": "16777215", - "size": "20", - "text": ":" + "color": "16770457" } }, { - "ID": "4", + "ID": "1", "typeID": "Label", - "zOrder": "4", - "measuredW": "10", - "measuredH": "28", - "x": "120", - "y": "9", + "zOrder": "1", + "measuredW": "183", + "measuredH": "25", + "x": "26", + "y": "11", "properties": { - "color": "16777215", - "size": "20", - "text": "/" + "size": "17", + "text": "Functional Components" } }, { - "ID": "5", - "typeID": "Label", - "zOrder": "5", - "measuredW": "10", - "measuredH": "28", - "x": "128", - "y": "9", - "properties": { - "color": "16777215", - "size": "20", - "text": "/" + "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" + } + } + } + ] + } } } ] @@ -1992,110 +753,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": "14616", "typeID": "__group__", - "zOrder": "68", - "measuredW": "272", - "measuredH": "50", - "w": "272", - "h": "50", - "x": "772", - "y": "484", - "properties": { - "controlName": "100-react-fundamental-topics" + "zOrder": "52", + "measuredW": "235", + "measuredH": "47", + "w": "235", + "h": "47", + "x": "1153", + "y": "371", + "properties": { + "controlName": "100-components:class-components" }, "children": { "controls": { @@ -2104,27 +772,27 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "272", - "h": "50", + "w": "235", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", "y": "0", "properties": { - "color": "16776960" + "color": "14540253" } }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "155", + "measuredW": "146", "measuredH": "25", - "x": "55", - "y": "13", + "x": "45", + "y": "11", "properties": { "size": "17", - "text": "Fundamental Topics" + "text": "Class Components" } } ] @@ -2132,17 +800,17 @@ } }, { - "ID": "14430", + "ID": "14619", "typeID": "__group__", - "zOrder": "69", - "measuredW": "159", + "zOrder": "53", + "measuredW": "215", "measuredH": "44", - "w": "159", + "w": "215", "h": "44", - "x": "532", - "y": "505", + "x": "1163", + "y": "532", "properties": { - "controlName": "102-react-fundamental-topics:components" + "controlName": "102-components:jsx" }, "children": { "controls": { @@ -2151,7 +819,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "159", + "w": "215", "h": "44", "measuredW": "200", "measuredH": "140", @@ -2165,13 +833,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "99", + "measuredW": "30", "measuredH": "25", - "x": "29", - "y": "10", + "x": "93", + "y": "9", "properties": { "size": "17", - "text": "Components" + "text": "JSX" } } ] @@ -2179,17 +847,17 @@ } }, { - "ID": "14431", + "ID": "14620", "typeID": "__group__", - "zOrder": "70", - "measuredW": "255", - "measuredH": "44", - "w": "255", - "h": "44", - "x": "1142", - "y": "447", + "zOrder": "54", + "measuredW": "215", + "measuredH": "47", + "w": "215", + "h": "47", + "x": "1163", + "y": "580", "properties": { - "controlName": "107-react-fundamental-topics:composition-vs-inheritance" + "controlName": "103-components:props-vs-state" }, "children": { "controls": { @@ -2198,8 +866,8 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "255", - "h": "44", + "w": "215", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2212,13 +880,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "210", + "measuredW": "110", "measuredH": "25", - "x": "22", - "y": "10", + "x": "53", + "y": "11", "properties": { "size": "17", - "text": "Composition vs Inheritance" + "text": "Props vs State" } } ] @@ -2226,17 +894,17 @@ } }, { - "ID": "14432", + "ID": "14621", "typeID": "__group__", - "zOrder": "71", - "measuredW": "213", - "measuredH": "44", - "w": "213", - "h": "44", - "x": "283", - "y": "482", + "zOrder": "55", + "measuredW": "215", + "measuredH": "47", + "w": "215", + "h": "47", + "x": "1163", + "y": "631", "properties": { - "controlName": "100-react-fundamental-topics:components:functional-components" + "controlName": "104-components:conditional-rendering" }, "children": { "controls": { @@ -2245,8 +913,8 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "213", - "h": "44", + "w": "215", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2259,13 +927,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "183", + "measuredW": "173", "measuredH": "25", - "x": "16", - "y": "10", + "x": "21", + "y": "11", "properties": { "size": "17", - "text": "Functional Components" + "text": "Conditional Rendering" } } ] @@ -2273,17 +941,17 @@ } }, { - "ID": "14433", + "ID": "14622", "typeID": "__group__", - "zOrder": "72", - "measuredW": "213", - "measuredH": "44", - "w": "213", - "h": "44", - "x": "283", - "y": "532", + "zOrder": "56", + "measuredW": "215", + "measuredH": "47", + "w": "215", + "h": "47", + "x": "1163", + "y": "682", "properties": { - "controlName": "101-react-fundamental-topics:components:class-components" + "controlName": "105-components:composition-vs-inheritance" }, "children": { "controls": { @@ -2292,8 +960,8 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "213", - "h": "44", + "w": "215", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2306,13 +974,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "146", + "measuredW": "97", "measuredH": "25", - "x": "33", - "y": "10", + "x": "59", + "y": "11", "properties": { "size": "17", - "text": "Class Components" + "text": "Composition" } } ] @@ -2320,17 +988,131 @@ } }, { - "ID": "14434", - "typeID": "__group__", - "zOrder": "73", - "measuredW": "159", - "measuredH": "44", - "w": "159", + "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", - "x": "532", + "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": { - "controlName": "101-react-fundamental-topics:jsx" + "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": { @@ -2339,27 +1121,27 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "159", - "h": "44", + "w": "207", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", "y": "0", "properties": { - "color": "16770457" + "color": "16776960" } }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "30", + "measuredW": "82", "measuredH": "25", "x": "63", - "y": "10", + "y": "11", "properties": { "size": "17", - "text": "JSX" + "text": "Rendering" } } ] @@ -2367,17 +1149,17 @@ } }, { - "ID": "14435", + "ID": "14632", "typeID": "__group__", - "zOrder": "74", - "measuredW": "159", - "measuredH": "44", - "w": "159", - "h": "44", - "x": "532", - "y": "557", + "zOrder": "59", + "measuredW": "255", + "measuredH": "47", + "w": "255", + "h": "47", + "x": "450", + "y": "549", "properties": { - "controlName": "103-react-fundamental-topics:props-vs-state" + "controlName": "101-rendering:lists-and-keys" }, "children": { "controls": { @@ -2386,8 +1168,8 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "159", - "h": "44", + "w": "255", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2400,13 +1182,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "110", + "measuredW": "111", "measuredH": "25", - "x": "22", - "y": "10", + "x": "72", + "y": "11", "properties": { "size": "17", - "text": "Props vs State" + "text": "Lists and Keys" } } ] @@ -2414,17 +1196,17 @@ } }, { - "ID": "14436", + "ID": "14633", "typeID": "__group__", - "zOrder": "75", - "measuredW": "254", - "measuredH": "42", - "w": "254", - "h": "42", - "x": "1143", + "zOrder": "60", + "measuredW": "255", + "measuredH": "47", + "w": "255", + "h": "47", + "x": "450", "y": "497", "properties": { - "controlName": "108-react-fundamental-topics:basic-hooks" + "controlName": "100-rendering:component-life-cycle" }, "children": { "controls": { @@ -2433,8 +1215,8 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "254", - "h": "42", + "w": "255", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2447,13 +1229,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "96", + "measuredW": "170", "measuredH": "25", - "x": "80", - "y": "9", + "x": "43", + "y": "11", "properties": { "size": "17", - "text": "Basic Hooks" + "text": "Component Life Cycle" } } ] @@ -2461,17 +1243,46 @@ } }, { - "ID": "14437", + "ID": "14634", + "typeID": "Arrow", + "zOrder": "31", + "w": "2", + "h": "403", + "measuredW": "150", + "measuredH": "100", + "x": "965", + "y": "445", + "properties": { + "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": "76", - "measuredW": "153", - "measuredH": "44", - "w": "153", - "h": "44", - "x": "1116", - "y": "565", + "zOrder": "61", + "measuredW": "255", + "measuredH": "47", + "w": "255", + "h": "47", + "x": "450", + "y": "601", "properties": { - "controlName": "100-react-fundamental-topics:basic-hooks:use-state" + "controlName": "102-rendering:render-props" }, "children": { "controls": { @@ -2480,8 +1291,8 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "153", - "h": "44", + "w": "255", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2494,13 +1305,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "69", + "measuredW": "107", "measuredH": "25", - "x": "41", - "y": "10", + "x": "74", + "y": "11", "properties": { "size": "17", - "text": "useState" + "text": "Render Props" } } ] @@ -2508,17 +1319,17 @@ } }, { - "ID": "14438", + "ID": "14637", "typeID": "__group__", - "zOrder": "77", - "measuredW": "153", - "measuredH": "44", - "w": "153", - "h": "44", - "x": "1276", - "y": "565", + "zOrder": "62", + "measuredW": "255", + "measuredH": "47", + "w": "255", + "h": "47", + "x": "450", + "y": "653", "properties": { - "controlName": "101-react-fundamental-topics:basic-hooks:use-effect" + "controlName": "103-rendering:refs" }, "children": { "controls": { @@ -2527,8 +1338,8 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "153", - "h": "44", + "w": "255", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2541,13 +1352,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "73", + "measuredW": "36", "measuredH": "25", - "x": "39", - "y": "10", + "x": "110", + "y": "11", "properties": { "size": "17", - "text": "useEffect" + "text": "Refs" } } ] @@ -2555,17 +1366,141 @@ } }, { - "ID": "14439", + "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": "78", + "zOrder": "63", "measuredW": "255", - "measuredH": "44", + "measuredH": "47", "w": "255", - "h": "44", - "x": "1142", - "y": "398", + "h": "47", + "x": "450", + "y": "705", "properties": { - "controlName": "106-react-fundamental-topics:lists-and-keys" + "controlName": "104-rendering:events" }, "children": { "controls": { @@ -2575,7 +1510,7 @@ "typeID": "TextArea", "zOrder": "0", "w": "255", - "h": "44", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2588,13 +1523,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "111", + "measuredW": "53", "measuredH": "25", - "x": "70", - "y": "10", + "x": "101", + "y": "11", "properties": { "size": "17", - "text": "Lists and Keys" + "text": "Events" } } ] @@ -2602,17 +1537,48 @@ } }, { - "ID": "14440", + "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": "79", - "measuredW": "215", - "measuredH": "44", - "w": "215", - "h": "44", - "x": "478", - "y": "607", + "zOrder": "64", + "measuredW": "255", + "measuredH": "47", + "w": "255", + "h": "47", + "x": "450", + "y": "758", "properties": { - "controlName": "104-react-fundamental-topics:conditional-rendering" + "controlName": "105-rendering:high-order-components" }, "children": { "controls": { @@ -2621,8 +1587,8 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "215", - "h": "44", + "w": "255", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2635,13 +1601,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "173", + "measuredW": "188", "measuredH": "25", - "x": "23", - "y": "10", + "x": "34", + "y": "11", "properties": { "size": "17", - "text": "Conditional Rendering" + "text": "High Order Components" } } ] @@ -2649,17 +1615,78 @@ } }, { - "ID": "14441", + "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": "80", - "measuredW": "162", - "measuredH": "44", - "w": "162", - "h": "44", - "x": "530", - "y": "405", + "zOrder": "65", + "measuredW": "242", + "measuredH": "47", + "w": "242", + "h": "47", + "x": "862", + "y": "850", "properties": { - "controlName": "100-react-fundamental-topics:cli-tools" + "controlName": "104-hooks" }, "children": { "controls": { @@ -2668,27 +1695,27 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "162", - "h": "44", + "w": "242", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", "y": "0", "properties": { - "color": "16770457" + "color": "16776960" } }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "72", + "measuredW": "49", "measuredH": "25", - "x": "45", - "y": "10", + "x": "96", + "y": "11", "properties": { "size": "17", - "text": "CLI Tools" + "text": "Hooks" } } ] @@ -2696,17 +1723,17 @@ } }, { - "ID": "14442", + "ID": "14649", "typeID": "__group__", - "zOrder": "81", - "measuredW": "255", + "zOrder": "66", + "measuredW": "174", "measuredH": "44", - "w": "255", + "w": "174", "h": "44", - "x": "1142", - "y": "347", + "x": "1184", + "y": "817", "properties": { - "controlName": "105-react-fundamental-topics:component-life-cycle" + "controlName": "100-hooks:basic-hooks:use-state" }, "children": { "controls": { @@ -2715,7 +1742,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "255", + "w": "174", "h": "44", "measuredW": "200", "measuredH": "140", @@ -2729,13 +1756,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "170", + "measuredW": "69", "measuredH": "25", - "x": "42", + "x": "52", "y": "10", "properties": { "size": "17", - "text": "Component Life Cycle" + "text": "useState" } } ] @@ -2743,17 +1770,17 @@ } }, { - "ID": "14443", + "ID": "14650", "typeID": "__group__", - "zOrder": "82", - "measuredW": "272", - "measuredH": "50", - "w": "272", - "h": "50", - "x": "788", - "y": "699", + "zOrder": "67", + "measuredW": "175", + "measuredH": "44", + "w": "175", + "h": "44", + "x": "1183", + "y": "865", "properties": { - "controlName": "101-react-advanced-topics" + "controlName": "101-hooks:basic-hooks:use-effect" }, "children": { "controls": { @@ -2762,27 +1789,27 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "272", - "h": "50", + "w": "175", + "h": "44", "measuredW": "200", "measuredH": "140", "x": "0", "y": "0", "properties": { - "color": "16776960" + "color": "16770457" } }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "130", + "measuredW": "73", "measuredH": "25", - "x": "68", - "y": "13", + "x": "51", + "y": "10", "properties": { "size": "17", - "text": "Advanced Topics" + "text": "useEffect" } } ] @@ -2790,17 +1817,17 @@ } }, { - "ID": "14444", + "ID": "14651", "typeID": "__group__", - "zOrder": "83", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "561", - "y": "680", - "properties": { - "controlName": "100-react-advanced-topics:hooks" + "zOrder": "23", + "measuredW": "198", + "measuredH": "157", + "w": "198", + "h": "157", + "x": "1172", + "y": "769", + "properties": { + "controlName": "100-hooks:basic-hooks" }, "children": { "controls": { @@ -2809,27 +1836,24 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", - "h": "44", + "w": "198", + "h": "157", "measuredW": "200", "measuredH": "140", "x": "0", - "y": "0", - "properties": { - "color": "16770457" - } + "y": "0" }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "49", + "measuredW": "96", "measuredH": "25", - "x": "55", - "y": "10", + "x": "51", + "y": "16", "properties": { "size": "17", - "text": "Hooks" + "text": "Basic Hooks" } } ] @@ -2837,17 +1861,47 @@ } }, { - "ID": "14445", + "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": "84", + "zOrder": "68", "measuredW": "243", - "measuredH": "44", + "measuredH": "47", "w": "243", - "h": "44", - "x": "285", - "y": "659", + "h": "47", + "x": "861", + "y": "928", "properties": { - "controlName": "101-react-advanced-topics:hooks:writing-your-own-hooks" + "controlName": "101-hooks:writing-your-own-hooks" }, "children": { "controls": { @@ -2857,7 +1911,7 @@ "typeID": "TextArea", "zOrder": "0", "w": "243", - "h": "44", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -2870,13 +1924,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "183", + "measuredW": "171", "measuredH": "25", - "x": "28", - "y": "10", + "x": "36", + "y": "11", "properties": { "size": "17", - "text": "Writing your Own Hooks" + "text": "Writing Custom Hooks" } } ] @@ -2884,17 +1938,47 @@ } }, { - "ID": "14446", + "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": "85", + "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": { @@ -3033,59 +2117,314 @@ "size": "17", "text": "useReducer" } - }, + }, + { + "ID": "10", + "typeID": "TextArea", + "zOrder": "10", + "w": "121", + "h": "43", + "measuredW": "200", + "measuredH": "140", + "x": "13", + "y": "193", + "properties": { + "color": "16770457" + } + }, + { + "ID": "11", + "typeID": "Label", + "zOrder": "11", + "measuredW": "88", + "measuredH": "25", + "x": "29", + "y": "202", + "properties": { + "size": "17", + "text": "useContext" + } + }, + { + "ID": "12", + "typeID": "TextArea", + "zOrder": "12", + "w": "92", + "h": "43", + "measuredW": "200", + "measuredH": "140", + "x": "139", + "y": "193", + "properties": { + "color": "16770457" + } + }, + { + "ID": "13", + "typeID": "Label", + "zOrder": "13", + "measuredW": "24", + "measuredH": "25", + "x": "173", + "y": "202", + "properties": { + "size": "17", + "text": "......." + } + } + ] + } + } + }, + { + "ID": "14663", + "typeID": "__group__", + "zOrder": "70", + "measuredW": "157", + "measuredH": "47", + "w": "157", + "h": "47", + "x": "629", + "y": "850", + "properties": { + "controlName": "105-routers" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "61", + "measuredH": "25", + "x": "48", + "y": "11", + "properties": { + "size": "17", + "text": "Routers" + } + } + ] + } + } + }, + { + "ID": "14664", + "typeID": "__group__", + "zOrder": "71", + "measuredW": "167", + "measuredH": "47", + "w": "167", + "h": "47", + "x": "619", + "y": "924", + "properties": { + "controlName": "100-routers:react-router" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "158", + "h": "47", + "measuredW": "200", + "measuredH": "140", + "x": "9", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "104", + "measuredH": "25", + "x": "36", + "y": "11", + "properties": { + "size": "17", + "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": "10", + "ID": "0", "typeID": "TextArea", - "zOrder": "10", - "w": "121", - "h": "43", + "zOrder": "0", + "w": "157", + "h": "47", "measuredW": "200", "measuredH": "140", - "x": "13", - "y": "193", + "x": "11", + "y": "0", "properties": { "color": "16770457" } }, { - "ID": "11", + "ID": "1", "typeID": "Label", - "zOrder": "11", - "measuredW": "88", + "zOrder": "1", + "measuredW": "108", "measuredH": "25", - "x": "29", - "y": "202", + "x": "37", + "y": "11", "properties": { "size": "17", - "text": "useContext" - } - }, - { - "ID": "12", - "typeID": "TextArea", - "zOrder": "12", - "w": "92", - "h": "43", - "measuredW": "200", - "measuredH": "140", - "x": "139", - "y": "193", - "properties": { - "color": "16770457" + "text": "Reach Router" } }, { - "ID": "13", - "typeID": "Label", - "zOrder": "13", + "ID": "2", + "typeID": "__group__", + "zOrder": "2", "measuredW": "24", - "measuredH": "25", - "x": "173", - "y": "202", - "properties": { - "size": "17", - "text": "......." + "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": "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" + } + } + } + ] + } } } ] @@ -3093,17 +2432,76 @@ } }, { - "ID": "14447", - "typeID": "__group__", - "zOrder": "86", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "561", - "y": "729", + "ID": "14668", + "typeID": "Arrow", + "zOrder": "20", + "w": "497", + "h": "1", + "measuredW": "150", + "measuredH": "100", + "x": "454", + "y": "874", + "properties": { + "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": { - "controlName": "101-react-advanced-topics:context" + "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": { @@ -3112,27 +2510,27 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", - "h": "44", + "w": "230", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", "y": "0", "properties": { - "color": "16770457" + "color": "16776960" } }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "60", + "measuredW": "148", "measuredH": "25", - "x": "48", - "y": "10", + "x": "41", + "y": "11", "properties": { "size": "17", - "text": "Context" + "text": "State Management" } } ] @@ -3140,17 +2538,17 @@ } }, { - "ID": "14448", + "ID": "14672", "typeID": "__group__", - "zOrder": "87", - "measuredW": "157", + "zOrder": "74", + "measuredW": "175", "measuredH": "44", - "w": "157", + "w": "175", "h": "44", - "x": "561", - "y": "779", + "x": "231", + "y": "765", "properties": { - "controlName": "102-react-advanced-topics:refs" + "controlName": "100-state-management:context" }, "children": { "controls": { @@ -3159,11 +2557,11 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "165", "h": "44", "measuredW": "200", "measuredH": "140", - "x": "0", + "x": "10", "y": "0", "properties": { "color": "16770457" @@ -3173,13 +2571,62 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "36", + "measuredW": "60", "measuredH": "25", - "x": "60", + "x": "63", "y": "10", "properties": { "size": "17", - "text": "Refs" + "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" + } + } + } + ] + } } } ] @@ -3187,17 +2634,17 @@ } }, { - "ID": "14449", + "ID": "14673", "typeID": "__group__", - "zOrder": "88", - "measuredW": "157", + "zOrder": "75", + "measuredW": "174", "measuredH": "44", - "w": "157", + "w": "174", "h": "44", - "x": "561", - "y": "829", + "x": "231", + "y": "717", "properties": { - "controlName": "103-react-advanced-topics:render-props" + "controlName": "101-state-management:zustand" }, "children": { "controls": { @@ -3206,11 +2653,11 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "164", "h": "44", "measuredW": "200", "measuredH": "140", - "x": "0", + "x": "10", "y": "0", "properties": { "color": "16770457" @@ -3220,60 +2667,62 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "107", + "measuredW": "62", "measuredH": "25", - "x": "25", + "x": "61", "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" + "text": "Zustand" } }, { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "188", - "measuredH": "25", - "x": "18", + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", "y": "10", - "properties": { - "size": "17", - "text": "High Order Components" + "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" + } + } + } + ] + } } } ] @@ -3281,17 +2730,17 @@ } }, { - "ID": "14451", + "ID": "14674", "typeID": "__group__", - "zOrder": "90", - "measuredW": "224", + "zOrder": "76", + "measuredW": "176", "measuredH": "44", - "w": "224", + "w": "176", "h": "44", - "x": "1152", - "y": "690", + "x": "231", + "y": "669", "properties": { - "controlName": "105-react-advanced-topics:portals" + "controlName": "102-state-management:redux-and-redux-toolkit" }, "children": { "controls": { @@ -3300,11 +2749,11 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "224", + "w": "166", "h": "44", "measuredW": "200", "measuredH": "140", - "x": "0", + "x": "10", "y": "0", "properties": { "color": "16770457" @@ -3314,13 +2763,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "53", + "measuredW": "115", "measuredH": "25", - "x": "85", + "x": "35", "y": "10", "properties": { "size": "17", - "text": "Portals" + "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" + } + } + } + ] + } } } ] @@ -3328,17 +2842,47 @@ } }, { - "ID": "14452", + "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": "91", - "measuredW": "224", + "zOrder": "77", + "measuredW": "174", "measuredH": "44", - "w": "224", + "w": "174", "h": "44", - "x": "1152", - "y": "739", + "x": "232", + "y": "621", "properties": { - "controlName": "106-react-advanced-topics:error-boundaries" + "controlName": "103-state-management:mobx" }, "children": { "controls": { @@ -3347,11 +2891,11 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "224", + "w": "164", "h": "44", "measuredW": "200", "measuredH": "140", - "x": "0", + "x": "10", "y": "0", "properties": { "color": "16770457" @@ -3361,13 +2905,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "132", + "measuredW": "44", "measuredH": "25", - "x": "47", + "x": "70", "y": "10", "properties": { "size": "17", - "text": "Error Boundaries" + "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" + } + } + } + ] + } } } ] @@ -3375,17 +2984,17 @@ } }, { - "ID": "14453", + "ID": "14680", "typeID": "__group__", - "zOrder": "92", - "measuredW": "224", + "zOrder": "78", + "measuredW": "174", "measuredH": "44", - "w": "224", + "w": "174", "h": "44", - "x": "1152", - "y": "788", + "x": "232", + "y": "573", "properties": { - "controlName": "107-react-advanced-topics:fiber-architecture" + "controlName": "104-state-management:recoil" }, "children": { "controls": { @@ -3394,11 +3003,11 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "224", + "w": "164", "h": "44", "measuredW": "200", "measuredH": "140", - "x": "0", + "x": "10", "y": "0", "properties": { "color": "16770457" @@ -3408,13 +3017,62 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "138", + "measuredW": "49", "measuredH": "25", - "x": "43", + "x": "67", "y": "10", "properties": { "size": "17", - "text": "Fiber Architecture" + "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" + } + } + } + ] + } } } ] @@ -3422,17 +3080,17 @@ } }, { - "ID": "14454", + "ID": "14681", "typeID": "__group__", - "zOrder": "93", - "measuredW": "201", - "measuredH": "50", - "w": "201", - "h": "50", - "x": "744", - "y": "1002", - "properties": { - "controlName": "102-react-ecosystem" + "zOrder": "79", + "measuredW": "227", + "measuredH": "47", + "w": "227", + "h": "47", + "x": "244", + "y": "1056", + "properties": { + "controlName": "107-styling" }, "children": { "controls": { @@ -3441,8 +3099,8 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "201", - "h": "50", + "w": "227", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", @@ -3455,13 +3113,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "84", + "measuredW": "51", "measuredH": "25", - "x": "56", - "y": "12", + "x": "88", + "y": "10", "properties": { "size": "17", - "text": "Ecosystem" + "text": "Styling" } } ] @@ -3469,64 +3127,46 @@ } }, { - "ID": "14455", - "typeID": "__group__", - "zOrder": "94", - "measuredW": "202", - "measuredH": "44", - "w": "202", - "h": "44", - "x": "990", - "y": "957", + "ID": "14682", + "typeID": "Arrow", + "zOrder": "17", + "w": "1", + "h": "577", + "measuredW": "150", + "measuredH": "100", + "x": "298", + "y": "876", "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" - } - } - ] + "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": "14456", + "ID": "14683", "typeID": "__group__", - "zOrder": "95", - "measuredW": "171", + "zOrder": "80", + "measuredW": "166", "measuredH": "44", - "w": "171", + "w": "166", "h": "44", - "x": "1239", - "y": "861", + "x": "598", + "y": "1195", "properties": { - "controlName": "100-react-ecosystem:forms:react-hook-form" + "controlName": "105-styling:chakra-ui" }, "children": { "controls": { @@ -3535,7 +3175,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "171", + "w": "157", "h": "44", "measuredW": "200", "measuredH": "140", @@ -3549,13 +3189,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "135", + "measuredW": "78", "measuredH": "25", - "x": "19", + "x": "40", "y": "10", "properties": { "size": "17", - "text": "React Hook Form" + "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" + } + } + } + ] + } } } ] @@ -3563,17 +3268,17 @@ } }, { - "ID": "14457", + "ID": "14684", "typeID": "__group__", - "zOrder": "96", - "measuredW": "171", + "zOrder": "81", + "measuredW": "165", "measuredH": "44", - "w": "171", + "w": "165", "h": "44", - "x": "1239", - "y": "909", + "x": "597", + "y": "1148", "properties": { - "controlName": "101-react-ecosystem:forms:formik" + "controlName": "104-styling:material-ui" }, "children": { "controls": { @@ -3582,7 +3287,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "171", + "w": "157", "h": "44", "measuredW": "200", "measuredH": "140", @@ -3596,13 +3301,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "52", + "measuredW": "86", "measuredH": "25", - "x": "60", + "x": "36", "y": "10", "properties": { "size": "17", - "text": "Formik" + "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" + } + } + } + ] + } } } ] @@ -3610,17 +3380,17 @@ } }, { - "ID": "14458", + "ID": "14685", "typeID": "__group__", - "zOrder": "97", - "measuredW": "171", + "zOrder": "82", + "measuredW": "167", "measuredH": "44", - "w": "171", + "w": "167", "h": "44", - "x": "1239", - "y": "957", + "x": "598", + "y": "1054", "properties": { - "controlName": "102-react-ecosystem:forms:final-form" + "controlName": "102-styling:mantine" }, "children": { "controls": { @@ -3629,7 +3399,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "171", + "w": "157", "h": "44", "measuredW": "200", "measuredH": "140", @@ -3643,13 +3413,62 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "82", + "measuredW": "63", "measuredH": "25", - "x": "46", + "x": "47", "y": "10", "properties": { "size": "17", - "text": "Final Form" + "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" + } + } + } + ] + } } } ] @@ -3657,17 +3476,17 @@ } }, { - "ID": "14459", + "ID": "14686", "typeID": "__group__", - "zOrder": "98", - "measuredW": "157", + "zOrder": "83", + "measuredW": "167", "measuredH": "44", - "w": "157", + "w": "167", "h": "44", - "x": "545", - "y": "1001", + "x": "597", + "y": "1101", "properties": { - "controlName": "100-react-ecosystem:routers" + "controlName": "103-styling:tailwind" }, "children": { "controls": { @@ -3696,7 +3515,56 @@ "y": "10", "properties": { "size": "17", - "text": "Routers" + "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" + } + } + } + ] + } } } ] @@ -3704,17 +3572,137 @@ } }, { - "ID": "14460", + "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": "99", - "measuredW": "158", + "zOrder": "84", + "measuredW": "210", "measuredH": "44", - "w": "158", + "w": "210", "h": "44", - "x": "319", - "y": "967", + "x": "347", + "y": "979", "properties": { - "controlName": "100-react-ecosystem:routers:react-router" + "controlName": "100-styling:styled-components" }, "children": { "controls": { @@ -3723,7 +3711,6 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "158", "h": "44", "measuredW": "200", "measuredH": "140", @@ -3737,13 +3724,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "104", + "measuredW": "150", "measuredH": "25", - "x": "27", + "x": "24", "y": "10", "properties": { "size": "17", - "text": "React Router" + "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" + } + } + } + ] + } } } ] @@ -3751,17 +3803,17 @@ } }, { - "ID": "14461", + "ID": "14692", "typeID": "__group__", - "zOrder": "100", - "measuredW": "157", + "zOrder": "85", + "measuredW": "210", "measuredH": "44", - "w": "157", + "w": "210", "h": "44", - "x": "319", - "y": "1017", + "x": "347", + "y": "931", "properties": { - "controlName": "101-react-ecosystem:routers:reach-router" + "controlName": "101-styling:emotion" }, "children": { "controls": { @@ -3770,7 +3822,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "201", "h": "44", "measuredW": "200", "measuredH": "140", @@ -3784,13 +3836,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "108", + "measuredW": "64", "measuredH": "25", - "x": "26", + "x": "69", "y": "10", "properties": { "size": "17", - "text": "Reach Router" + "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" + } + } + } + ] + } } } ] @@ -3798,17 +3915,47 @@ } }, { - "ID": "14462", + "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": "101", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "545", - "y": "1307", + "zOrder": "86", + "measuredW": "214", + "measuredH": "47", + "w": "214", + "h": "47", + "x": "250", + "y": "1436", "properties": { - "controlName": "103-react-ecosystem:api-calls" + "controlName": "108-api-calls" }, "children": { "controls": { @@ -3817,14 +3964,14 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", - "h": "44", + "w": "214", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", "y": "0", "properties": { - "color": "16770457" + "color": "16776960" } }, { @@ -3833,8 +3980,8 @@ "zOrder": "1", "measuredW": "69", "measuredH": "25", - "x": "43", - "y": "10", + "x": "72", + "y": "11", "properties": { "size": "17", "text": "API Calls" @@ -3845,64 +3992,44 @@ } }, { - "ID": "14463", - "typeID": "__group__", - "zOrder": "102", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "320", - "y": "1380", + "ID": "14696", + "typeID": "TextArea", + "zOrder": "87", + "w": "105", + "h": "200", + "measuredW": "200", + "measuredH": "140", + "x": "366", + "y": "1195", "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" - } - } - ] - } + "color": "16777215" + } + }, + { + "ID": "14697", + "typeID": "Label", + "zOrder": "88", + "measuredW": "71", + "measuredH": "25", + "x": "383", + "y": "1356", + "properties": { + "size": "17", + "text": "GraphQL" } }, { - "ID": "14464", + "ID": "14698", "typeID": "__group__", - "zOrder": "103", - "measuredW": "157", + "zOrder": "89", + "measuredW": "167", "measuredH": "44", - "w": "157", + "w": "167", "h": "44", - "x": "319", - "y": "1430", + "x": "341", + "y": "1210", "properties": { - "controlName": "105-react-ecosystem:api-calls:unfetch" + "controlName": "100-api-calls:apollo" }, "children": { "controls": { @@ -3911,7 +4038,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "156", "h": "44", "measuredW": "200", "measuredH": "140", @@ -3925,13 +4052,62 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "61", + "measuredW": "48", "measuredH": "25", - "x": "49", + "x": "55", "y": "10", "properties": { "size": "17", - "text": "Unfetch" + "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" + } + } + } + ] + } } } ] @@ -3939,17 +4115,17 @@ } }, { - "ID": "14465", + "ID": "14699", "typeID": "__group__", - "zOrder": "104", - "measuredW": "157", + "zOrder": "90", + "measuredW": "165", "measuredH": "44", - "w": "157", + "w": "165", "h": "44", - "x": "319", - "y": "1479", + "x": "341", + "y": "1258", "properties": { - "controlName": "106-react-ecosystem:api-calls:superagent" + "controlName": "101-api-calls:relay" }, "children": { "controls": { @@ -3958,7 +4134,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "156", "h": "44", "measuredW": "200", "measuredH": "140", @@ -3972,13 +4148,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "88", + "measuredW": "44", "measuredH": "25", - "x": "35", + "x": "56", "y": "10", "properties": { "size": "17", - "text": "superagent" + "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" + } + } + } + ] + } } } ] @@ -3986,30 +4227,17 @@ } }, { - "ID": "14466", - "typeID": "Label", - "zOrder": "105", - "measuredW": "117", - "measuredH": "25", - "x": "337", - "y": "1528", - "properties": { - "size": "17", - "text": "REST API Calls" - } - }, - { - "ID": "14467", + "ID": "14700", "typeID": "__group__", - "zOrder": "106", - "measuredW": "157", + "zOrder": "91", + "measuredW": "165", "measuredH": "44", - "w": "157", + "w": "165", "h": "44", - "x": "545", - "y": "1412", + "x": "341", + "y": "1305", "properties": { - "controlName": "101-react-ecosystem:api-calls:swr" + "controlName": "102-api-calls:urql" }, "children": { "controls": { @@ -4018,7 +4246,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "156", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4032,13 +4260,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "38", + "measuredW": "32", "measuredH": "25", - "x": "60", + "x": "62", "y": "10", "properties": { "size": "17", - "text": "SWR" + "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" + } + } + } + ] + } } } ] @@ -4046,17 +4339,74 @@ } }, { - "ID": "14468", + "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": "107", - "measuredW": "156", + "zOrder": "94", + "measuredW": "165", "measuredH": "44", - "w": "156", + "w": "165", "h": "44", - "x": "319", - "y": "1243", + "x": "336", + "y": "1571", "properties": { - "controlName": "102-react-ecosystem:api-calls:apollo" + "controlName": "103-api-calls:swr" }, "children": { "controls": { @@ -4079,13 +4429,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "48", + "measuredW": "38", "measuredH": "25", - "x": "55", + "x": "59", "y": "10", "properties": { "size": "17", - "text": "Apollo" + "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" + } + } + ] + } } } ] @@ -4093,17 +4508,17 @@ } }, { - "ID": "14469", + "ID": "14705", "typeID": "__group__", - "zOrder": "108", - "measuredW": "156", + "zOrder": "95", + "measuredW": "165", "measuredH": "44", - "w": "156", + "w": "165", "h": "44", - "x": "319", - "y": "1291", + "x": "337", + "y": "1667", "properties": { - "controlName": "103-react-ecosystem:api-calls:relay-modern" + "controlName": "105-api-calls:axios" }, "children": { "controls": { @@ -4112,7 +4527,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "156", + "w": "157", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4126,73 +4541,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "107", + "measuredW": "41", "measuredH": "25", - "x": "25", + "x": "57", "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" + "text": "Axios" } }, { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "56", - "measuredH": "25", - "x": "72", + "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "141", "y": "10", - "properties": { - "size": "17", - "text": "Testing" + "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" + } + } + } + ] + } } } ] @@ -4200,17 +4620,17 @@ } }, { - "ID": "14472", + "ID": "14707", "typeID": "__group__", - "zOrder": "111", - "measuredW": "218", + "zOrder": "96", + "measuredW": "165", "measuredH": "44", - "w": "218", + "w": "165", "h": "44", - "x": "1239", - "y": "1084", + "x": "338", + "y": "1715", "properties": { - "controlName": "100-react-ecosystem:testing:jest" + "controlName": "106-api-calls:superagent" }, "children": { "controls": { @@ -4219,7 +4639,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "218", + "w": "157", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4233,13 +4653,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "33", + "measuredW": "88", "measuredH": "25", - "x": "92", + "x": "35", "y": "10", "properties": { "size": "17", - "text": "Jest" + "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" + } + } + } + ] + } } } ] @@ -4247,17 +4732,17 @@ } }, { - "ID": "14473", + "ID": "14708", "typeID": "__group__", - "zOrder": "112", - "measuredW": "218", + "zOrder": "97", + "measuredW": "165", "measuredH": "44", - "w": "218", + "w": "165", "h": "44", - "x": "1239", - "y": "1134", + "x": "335", + "y": "1619", "properties": { - "controlName": "101-react-ecosystem:testing:react-testing-library" + "controlName": "104-api-calls:react-query" }, "children": { "controls": { @@ -4266,7 +4751,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "218", + "w": "157", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4280,13 +4765,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "164", + "measuredW": "90", "measuredH": "25", - "x": "25", - "y": "10", + "x": "34", + "y": "9", "properties": { "size": "17", - "text": "React Testing Library" + "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" + } + } + ] + } } } ] @@ -4294,17 +4844,17 @@ } }, { - "ID": "14474", + "ID": "14710", "typeID": "__group__", - "zOrder": "113", - "measuredW": "218", - "measuredH": "44", - "w": "218", - "h": "44", - "x": "1239", - "y": "1184", + "zOrder": "98", + "measuredW": "202", + "measuredH": "47", + "w": "202", + "h": "47", + "x": "771", + "y": "1436", "properties": { - "controlName": "102-react-ecosystem:testing:cypress" + "controlName": "109-testing" }, "children": { "controls": { @@ -4313,27 +4863,27 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "218", - "h": "44", + "w": "202", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", "y": "0", "properties": { - "color": "16770457" + "color": "16776960" } }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "63", + "measuredW": "56", "measuredH": "25", - "x": "76", - "y": "10", + "x": "73", + "y": "11", "properties": { "size": "17", - "text": "Cypress" + "text": "Testing" } } ] @@ -4341,17 +4891,17 @@ } }, { - "ID": "14475", + "ID": "14711", "typeID": "__group__", - "zOrder": "114", - "measuredW": "202", + "zOrder": "99", + "measuredW": "109", "measuredH": "44", - "w": "202", + "w": "109", "h": "44", - "x": "997", - "y": "1124", + "x": "733", + "y": "1290", "properties": { - "controlName": "107-react-ecosystem:state-management" + "controlName": "100-testing:jest" }, "children": { "controls": { @@ -4360,11 +4910,11 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "202", + "w": "100", "h": "44", "measuredW": "200", "measuredH": "140", - "x": "0", + "x": "9", "y": "0", "properties": { "color": "16770457" @@ -4374,13 +4924,62 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "148", + "measuredW": "33", "measuredH": "25", - "x": "27", + "x": "42", "y": "10", "properties": { "size": "17", - "text": "State Management" + "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" + } + } + } + ] + } } } ] @@ -4388,17 +4987,17 @@ } }, { - "ID": "14476", + "ID": "14712", "typeID": "__group__", - "zOrder": "115", - "measuredW": "155", + "zOrder": "100", + "measuredW": "123", "measuredH": "44", - "w": "155", + "w": "123", "h": "44", - "x": "1047", - "y": "1207", + "x": "847", + "y": "1290", "properties": { - "controlName": "100-react-ecosystem:state-management:context-state" + "controlName": "101-testing:vitest" }, "children": { "controls": { @@ -4407,7 +5006,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "155", + "w": "112", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4421,13 +5020,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "117", + "measuredW": "44", "measuredH": "25", - "x": "17", + "x": "34", "y": "10", "properties": { "size": "17", - "text": "Context / State" + "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" + } + } + } + ] + } } } ] @@ -4435,17 +5099,17 @@ } }, { - "ID": "14477", + "ID": "14713", "typeID": "__group__", - "zOrder": "116", - "measuredW": "155", + "zOrder": "101", + "measuredW": "229", "measuredH": "44", - "w": "155", + "w": "229", "h": "44", - "x": "1047", - "y": "1303", + "x": "730", + "y": "1339", "properties": { - "controlName": "101-react-ecosystem:state-management:redux" + "controlName": "102-testing:react-testing-library" }, "children": { "controls": { @@ -4454,11 +5118,11 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "155", + "w": "218", "h": "44", "measuredW": "200", "measuredH": "140", - "x": "0", + "x": "11", "y": "0", "properties": { "color": "16770457" @@ -4468,13 +5132,62 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "50", + "measuredW": "164", "measuredH": "25", - "x": "53", + "x": "36", "y": "10", "properties": { "size": "17", - "text": "Redux" + "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" + } + } + } + ] + } } } ] @@ -4482,17 +5195,90 @@ } }, { - "ID": "14478", + "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": "117", - "measuredW": "155", + "zOrder": "102", + "measuredW": "161", "measuredH": "44", - "w": "155", + "w": "161", "h": "44", - "x": "1047", - "y": "1351", + "x": "821", + "y": "1517", "properties": { - "controlName": "102-react-ecosystem:state-management:mobx" + "controlName": "103-testing:cypress" }, "children": { "controls": { @@ -4501,7 +5287,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "155", + "w": "152", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4515,13 +5301,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "44", + "measuredW": "63", "measuredH": "25", - "x": "56", + "x": "44", "y": "10", "properties": { "size": "17", - "text": "MobX" + "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" + } + } + } + ] + } } } ] @@ -4529,17 +5380,17 @@ } }, { - "ID": "14479", + "ID": "14720", "typeID": "__group__", - "zOrder": "118", - "measuredW": "157", + "zOrder": "103", + "measuredW": "162", "measuredH": "44", - "w": "157", + "w": "162", "h": "44", - "x": "544", - "y": "1112", + "x": "821", + "y": "1565", "properties": { - "controlName": "101-react-ecosystem:ssr" + "controlName": "104-testing:playwright" }, "children": { "controls": { @@ -4548,7 +5399,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "152", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4562,13 +5413,62 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "33", + "measuredW": "78", "measuredH": "25", - "x": "61", + "x": "37", "y": "10", "properties": { "size": "17", - "text": "SSR" + "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" + } + } + } + ] + } } } ] @@ -4576,64 +5476,46 @@ } }, { - "ID": "14480", - "typeID": "__group__", - "zOrder": "119", - "measuredW": "158", - "measuredH": "44", - "w": "158", - "h": "44", - "x": "317", - "y": "1133", + "ID": "14721", + "typeID": "Arrow", + "zOrder": "7", + "w": "323", + "h": "336", + "measuredW": "150", + "measuredH": "100", + "x": "949", + "y": "1119", "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" - } - } - ] + "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": "14481", + "ID": "14722", "typeID": "__group__", - "zOrder": "120", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "1053", - "y": "1467", + "zOrder": "104", + "measuredW": "202", + "measuredH": "47", + "w": "202", + "h": "47", + "x": "1169", + "y": "1092", "properties": { - "controlName": "108-react-ecosystem:styling" + "controlName": "110-frameworks" }, "children": { "controls": { @@ -4642,27 +5524,27 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", - "h": "44", + "w": "202", + "h": "47", "measuredW": "200", "measuredH": "140", "x": "0", "y": "0", "properties": { - "color": "16770457" + "color": "16776960" } }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "51", + "measuredW": "94", "measuredH": "25", - "x": "51", - "y": "10", + "x": "54", + "y": "11", "properties": { "size": "17", - "text": "Styling" + "text": "Frameworks" } } ] @@ -4670,17 +5552,17 @@ } }, { - "ID": "14482", + "ID": "14723", "typeID": "__group__", - "zOrder": "121", - "measuredW": "157", + "zOrder": "105", + "measuredW": "167", "measuredH": "44", - "w": "157", + "w": "167", "h": "44", - "x": "1270", - "y": "1413", + "x": "1213", + "y": "1014", "properties": { - "controlName": "100-react-ecosystem:styling:chakra-ui" + "controlName": "101-frameworks:next-js" }, "children": { "controls": { @@ -4689,7 +5571,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "158", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4703,13 +5585,62 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "78", + "measuredW": "52", "measuredH": "25", - "x": "40", + "x": "52", "y": "10", "properties": { "size": "17", - "text": "Chakra UI" + "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" + } + } + } + ] + } } } ] @@ -4717,17 +5648,17 @@ } }, { - "ID": "14483", + "ID": "14724", "typeID": "__group__", - "zOrder": "122", - "measuredW": "157", + "zOrder": "106", + "measuredW": "169", "measuredH": "44", - "w": "157", + "w": "169", "h": "44", - "x": "1270", - "y": "1462", + "x": "1212", + "y": "966", "properties": { - "controlName": "101-react-ecosystem:styling:material-ui" + "controlName": "100-frameworks:remix" }, "children": { "controls": { @@ -4736,7 +5667,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "158", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4750,13 +5681,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "86", + "measuredW": "49", "measuredH": "25", - "x": "36", + "x": "54", "y": "10", "properties": { "size": "17", - "text": "Material UI" + "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" + } + } + } + ] + } } } ] @@ -4764,17 +5760,76 @@ } }, { - "ID": "14484", + "ID": "14725", + "typeID": "Arrow", + "zOrder": "6", + "w": "1", + "h": "87", + "measuredW": "150", + "measuredH": "100", + "x": "1293", + "y": "1023", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 0.48803395698428176, + "y": 87.26690962551424 + }, + "p1": { + "x": 0.46428571428571475, + "y": -0.0039921133619531856 + }, + "p2": { + "x": 0.48803395698428176, + "y": -0.11897394490631541 + } + } + }, + { + "ID": "14726", + "typeID": "Arrow", + "zOrder": "5", + "w": "1", + "h": "329", + "measuredW": "150", + "measuredH": "100", + "x": "1296", + "y": "1118", + "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": "14727", "typeID": "__group__", - "zOrder": "123", - "measuredW": "157", + "zOrder": "107", + "measuredW": "202", "measuredH": "44", - "w": "157", + "w": "202", "h": "44", - "x": "1270", - "y": "1510", + "x": "1169", + "y": "1420", "properties": { - "controlName": "102-react-ecosystem:styling:mantine" + "controlName": "111-forms" }, "children": { "controls": { @@ -4783,27 +5838,27 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "202", "h": "44", "measuredW": "200", "measuredH": "140", "x": "0", "y": "0", "properties": { - "color": "16770457" + "color": "16776960" } }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "63", + "measuredW": "48", "measuredH": "25", - "x": "47", + "x": "77", "y": "10", "properties": { "size": "17", - "text": "Mantine" + "text": "Forms" } } ] @@ -4811,17 +5866,17 @@ } }, { - "ID": "14485", + "ID": "14728", "typeID": "__group__", - "zOrder": "124", - "measuredW": "191", + "zOrder": "108", + "measuredW": "198", "measuredH": "44", - "w": "191", + "w": "198", "h": "44", - "x": "1039", - "y": "1541", + "x": "1190", + "y": "1517", "properties": { - "controlName": "103-react-ecosystem:styling:styled-components" + "controlName": "100-forms:react-hook-form" }, "children": { "controls": { @@ -4830,7 +5885,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "191", + "w": "186", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4844,13 +5899,62 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "150", + "measuredW": "135", "measuredH": "25", - "x": "19", + "x": "25", "y": "10", "properties": { "size": "17", - "text": "Styled Components" + "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" + } + } + } + ] + } } } ] @@ -4858,17 +5962,17 @@ } }, { - "ID": "14486", + "ID": "14729", "typeID": "__group__", - "zOrder": "125", - "measuredW": "191", + "zOrder": "109", + "measuredW": "195", "measuredH": "44", - "w": "191", + "w": "195", "h": "44", - "x": "1039", - "y": "1590", + "x": "1191", + "y": "1565", "properties": { - "controlName": "104-react-ecosystem:styling:emotion" + "controlName": "101-forms:formik" }, "children": { "controls": { @@ -4877,7 +5981,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "191", + "w": "185", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4891,13 +5995,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "64", + "measuredW": "52", "measuredH": "25", - "x": "65", + "x": "67", "y": "10", "properties": { "size": "17", - "text": "Emotion" + "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" + } + } + } + ] + } } } ] @@ -4905,17 +6074,17 @@ } }, { - "ID": "14487", + "ID": "14730", "typeID": "__group__", - "zOrder": "126", - "measuredW": "157", + "zOrder": "110", + "measuredW": "195", "measuredH": "44", - "w": "157", + "w": "195", "h": "44", - "x": "317", - "y": "1182", + "x": "1191", + "y": "1613", "properties": { - "controlName": "101-react-ecosystem:ssg:gatsby" + "controlName": "102-forms:final-form" }, "children": { "controls": { @@ -4924,7 +6093,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "185", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4938,13 +6107,78 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "54", + "measuredW": "82", "measuredH": "25", - "x": "51", + "x": "52", "y": "10", "properties": { "size": "17", - "text": "Gatsby" + "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" + } + } + } + ] + } } } ] @@ -4952,17 +6186,47 @@ } }, { - "ID": "14488", + "ID": "14731", + "typeID": "Arrow", + "zOrder": "4", + "w": "1", + "h": "107", + "measuredW": "150", + "measuredH": "100", + "x": "1295", + "y": "1437", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 0.48803395698428176, + "y": 106.92077890672635 + }, + "p1": { + "x": 0.46428571428571475, + "y": -0.0039921133619531856 + }, + "p2": { + "x": 0.48803395698428176, + "y": -0.11897394490631541 + } + } + }, + { + "ID": "14734", "typeID": "__group__", - "zOrder": "127", - "measuredW": "159", + "zOrder": "113", + "measuredW": "224", "measuredH": "44", - "w": "159", + "w": "224", "h": "44", - "x": "544", - "y": "1594", + "x": "910", + "y": "1679", "properties": { - "controlName": "104-react-ecosystem:mobile" + "controlName": "112-suspense" }, "children": { "controls": { @@ -4971,7 +6235,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "159", + "w": "224", "h": "44", "measuredW": "200", "measuredH": "140", @@ -4985,13 +6249,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "52", + "measuredW": "77", "measuredH": "25", - "x": "55", + "x": "73", "y": "10", "properties": { "size": "17", - "text": "Mobile" + "text": "Suspense" } } ] @@ -4999,17 +6263,17 @@ } }, { - "ID": "14489", + "ID": "14736", "typeID": "__group__", - "zOrder": "128", - "measuredW": "159", + "zOrder": "114", + "measuredW": "224", "measuredH": "44", - "w": "159", + "w": "224", "h": "44", - "x": "336", - "y": "1594", + "x": "910", + "y": "1727", "properties": { - "controlName": "100-react-ecosystem:mobile:react-native" + "controlName": "113-portals" }, "children": { "controls": { @@ -5018,7 +6282,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "159", + "w": "224", "h": "44", "measuredW": "200", "measuredH": "140", @@ -5032,13 +6296,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "100", + "measuredW": "53", "measuredH": "25", - "x": "30", + "x": "85", "y": "10", "properties": { "size": "17", - "text": "React Native" + "text": "Portals" } } ] @@ -5046,17 +6310,17 @@ } }, { - "ID": "14490", + "ID": "14737", "typeID": "__group__", - "zOrder": "129", - "measuredW": "157", + "zOrder": "115", + "measuredW": "224", "measuredH": "44", - "w": "157", + "w": "224", "h": "44", - "x": "544", - "y": "1163", + "x": "910", + "y": "1775", "properties": { - "controlName": "102-react-ecosystem:ssg" + "controlName": "114-error-boundaries" }, "children": { "controls": { @@ -5065,7 +6329,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "224", "h": "44", "measuredW": "200", "measuredH": "140", @@ -5079,13 +6343,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "34", + "measuredW": "132", "measuredH": "25", - "x": "61", + "x": "47", "y": "10", "properties": { "size": "17", - "text": "SSG" + "text": "Error Boundaries" } } ] @@ -5093,17 +6357,17 @@ } }, { - "ID": "14491", + "ID": "14738", "typeID": "__group__", - "zOrder": "130", - "measuredW": "157", + "zOrder": "116", + "measuredW": "224", "measuredH": "44", - "w": "157", + "w": "224", "h": "44", - "x": "544", - "y": "1232", + "x": "910", + "y": "1823", "properties": { - "controlName": "100-react-ecosystem:api-calls:react-query" + "controlName": "115-fiber-architecture" }, "children": { "controls": { @@ -5112,7 +6376,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "157", + "w": "224", "h": "44", "measuredW": "200", "measuredH": "140", @@ -5126,13 +6390,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "90", + "measuredW": "138", "measuredH": "25", - "x": "34", - "y": "9", + "x": "43", + "y": "10", "properties": { "size": "17", - "text": "react-query" + "text": "Fiber Architecture" } } ] @@ -5140,145 +6404,131 @@ } }, { - "ID": "14492", - "typeID": "__group__", - "zOrder": "131", - "measuredW": "391", - "measuredH": "55", - "w": "391", - "h": "55", - "x": "702", - "y": "264", + "ID": "14739", + "typeID": "Arrow", + "zOrder": "3", + "w": "100", + "h": "1", + "measuredW": "150", + "measuredH": "100", + "x": "1100", + "y": "1442", "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" - } - } - ] + "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": "14493", + "ID": "14740", "typeID": "Arrow", - "zOrder": "132", + "zOrder": "111", "w": "1", - "h": "64", + "h": "329", "measuredW": "150", "measuredH": "100", - "x": "899", - "y": "30", + "x": "1100", + "y": "1444", "properties": { "color": "2848996", "direction": "bottom", "leftArrow": "false", "rightArrow": "false", "p0": { - "x": -0.3586399639038973, - "y": 0 + "x": 0.20078475948139385, + "y": 328.45459981746376 }, "p1": { - "x": 0.32941176470588224, - "y": 0 + "x": 0.46856302129091976, + "y": -0.0004822370830620469 }, "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" - } - } - ] + "x": 0.20078475948128016, + "y": -0.11897394490631541 } } }, { - "ID": "14495", + "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": "134", - "measuredW": "206", + "zOrder": "118", + "measuredW": "159", "measuredH": "44", - "w": "206", + "w": "159", "h": "44", - "x": "268", - "y": "405", + "x": "628", + "y": "1728", "properties": { - "controlName": "100-react-fundamental-topics:cli-tools:create-react-app" + "controlName": "116-mobile" }, "children": { "controls": { @@ -5287,92 +6537,27 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "197", + "w": "159", "h": "44", "measuredW": "200", "measuredH": "140", - "x": "9", + "x": "0", "y": "0", "properties": { - "color": "16770457" + "color": "16776960" } }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "139", + "measuredW": "52", "measuredH": "25", - "x": "38", + "x": "55", "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" - } - } - } - ] - } + "text": "Mobile" } } ] @@ -5380,17 +6565,17 @@ } }, { - "ID": "14496", + "ID": "14745", "typeID": "__group__", - "zOrder": "135", - "measuredW": "209", + "zOrder": "119", + "measuredW": "159", "measuredH": "44", - "w": "209", + "w": "159", "h": "44", - "x": "268", - "y": "353", + "x": "628", + "y": "1635", "properties": { - "controlName": "101-react-fundamental-topics:cli-tools:vite" + "controlName": "100-mobile:react-native" }, "children": { "controls": { @@ -5399,10 +6584,11 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", + "w": "159", "h": "44", "measuredW": "200", "measuredH": "140", - "x": "9", + "x": "0", "y": "0", "properties": { "color": "16770457" @@ -5412,62 +6598,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "30", + "measuredW": "100", "measuredH": "25", - "x": "94", + "x": "30", "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" - } - } - } - ] - } + "text": "React Native" } } ] @@ -5475,26 +6612,130 @@ } }, { - "ID": "14497", - "typeID": "Canvas", - "zOrder": "136", - "w": "408", - "h": "202", - "measuredW": "100", - "measuredH": "70", - "x": "215", - "y": "72" + "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": "14498", + "ID": "14752", "typeID": "__group__", - "zOrder": "137", - "measuredW": "191", - "measuredH": "27", - "w": "191", - "h": "27", - "x": "250", - "y": "147", + "zOrder": "123", + "measuredW": "370", + "measuredH": "44", + "w": "370", + "h": "44", + "x": "523", + "y": "2064", "properties": { "controlName": "ext_link:roadmap.sh/frontend" }, @@ -5503,64 +6744,29 @@ "control": [ { "ID": "0", - "typeID": "Label", + "typeID": "TextArea", "zOrder": "0", - "measuredW": "158", - "measuredH": "26", - "x": "33", + "w": "370", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", "y": "0", "properties": { - "size": "18", - "text": "Frontend Roadmap" + "color": "16770457" } }, { "ID": "1", - "typeID": "__group__", + "typeID": "Label", "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" - } - } - } - ] - } + "measuredW": "149", + "measuredH": "25", + "x": "110", + "y": "9", + "properties": { + "size": "17", + "text": "Frontend Roadmap" } } ] @@ -5568,44 +6774,55 @@ } }, { - "ID": "14499", + "ID": "14753", "typeID": "__group__", - "zOrder": "138", - "measuredW": "202", - "measuredH": "27", - "w": "202", - "h": "27", - "x": "250", - "y": "183", + "zOrder": "124", + "measuredW": "352", + "measuredH": "54", + "w": "352", + "h": "54", + "x": "1149", + "y": "266", "properties": { - "controlName": "ext_link:roadmap.sh/javascript" + "controlName": "100-react-roadmap-note" }, "children": { "controls": { "control": [ { "ID": "0", - "typeID": "Label", + "typeID": "TextArea", "zOrder": "0", - "measuredW": "169", + "w": "352", + "h": "54", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0" + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "224", "measuredH": "26", - "x": "33", - "y": "0", + "x": "50", + "y": "14", "properties": { "size": "18", - "text": "JavaScript Roadmap" + "text": "Important Note / Click here" } }, { - "ID": "1", + "ID": "2", "typeID": "__group__", - "zOrder": "1", + "zOrder": "2", "measuredW": "24", "measuredH": "24", "w": "24", "h": "24", - "x": "0", - "y": "3", + "x": "18", + "y": "18", "children": { "controls": { "control": [ @@ -5634,11 +6851,11 @@ "x": "0", "y": "0", "properties": { - "color": "10066329", "icon": { "ID": "check-circle", "size": "small" - } + }, + "color": "13576743" } } ] @@ -5650,33 +6867,28 @@ } }, { - "ID": "14500", + "ID": "14754", "typeID": "__group__", - "zOrder": "139", - "measuredW": "178", - "measuredH": "27", - "w": "178", - "h": "27", - "x": "250", - "y": "219", - "properties": { - "controlName": "ext_link:roadmap.sh/nodejs" - }, + "zOrder": "125", + "measuredW": "408", + "measuredH": "162", + "w": "408", + "h": "162", + "x": "185", + "y": "85", "children": { "controls": { "control": [ { "ID": "0", - "typeID": "Label", + "typeID": "Canvas", "zOrder": "0", - "measuredW": "145", - "measuredH": "26", - "x": "33", - "y": "0", - "properties": { - "size": "18", - "text": "Node.js Roadmap" - } + "w": "408", + "h": "162", + "measuredW": "100", + "measuredH": "70", + "x": "0", + "y": "0" }, { "ID": "1", @@ -5686,8 +6898,8 @@ "measuredH": "24", "w": "24", "h": "24", - "x": "0", - "y": "3", + "x": "23", + "y": "21", "children": { "controls": { "control": [ @@ -5716,392 +6928,218 @@ "x": "0", "y": "0", "properties": { - "color": "10066329", + "color": "10027263", "icon": { "ID": "check-circle", "size": "small" } } } - ] - } - } - } - ] - } - } - }, - { - "ID": "14501", - "typeID": "__group__", - "zOrder": "140", - "measuredW": "218", - "measuredH": "44", - "w": "218", - "h": "44", - "x": "1240", - "y": "1035", - "properties": { - "controlName": "103-react-ecosystem:testing:vitest" - }, - "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": "44", - "measuredH": "25", - "x": "87", - "y": "10", - "properties": { - "size": "17", - "text": "Vitest" - } - } - ] - } - } - }, - { - "ID": "14502", - "typeID": "__group__", - "zOrder": "141", - "measuredW": "218", - "measuredH": "44", - "w": "218", - "h": "44", - "x": "1239", - "y": "1234", - "properties": { - "controlName": "104-react-ecosystem:testing:playwright" - }, - "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": "78", - "measuredH": "25", - "x": "70", - "y": "10", - "properties": { - "size": "17", - "text": "Playwright" - } - } - ] - } - } - }, - { - "ID": "14503", - "typeID": "Label", - "zOrder": "142", - "measuredW": "209", - "measuredH": "32", - "x": "250", - "y": "99", - "properties": { - "size": "24", - "text": "Related Roadmaps" - } - }, - { - "ID": "14504", - "typeID": "__group__", - "zOrder": "143", - "measuredW": "153", - "measuredH": "44", - "w": "153", - "h": "44", - "x": "929", - "y": "565", - "properties": { - "controlName": "109-react-fundamental-topics:events" - }, - "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": "53", - "measuredH": "25", - "x": "50", - "y": "10", - "properties": { - "size": "17", - "text": "Events" - } - } - ] - } - } - }, - { - "ID": "14505", - "typeID": "__group__", - "zOrder": "144", - "measuredW": "155", - "measuredH": "44", - "w": "155", - "h": "44", - "x": "1048", - "y": "1255", - "properties": { - "controlName": "101-react-ecosystem:state-management:zustand" - }, - "children": { - "controls": { - "control": [ + ] + } + } + }, { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "155", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", + "ID": "2", + "typeID": "Label", + "zOrder": "2", + "measuredW": "269", + "measuredH": "24", + "x": "59", + "y": "21", "properties": { - "color": "16770457" + "size": "16", + "text": "Personal Recommendation / Opinion" } }, { - "ID": "1", + "ID": "3", "typeID": "Label", - "zOrder": "1", - "measuredW": "62", - "measuredH": "25", - "x": "47", - "y": "10", + "zOrder": "3", + "measuredW": "159", + "measuredH": "24", + "x": "59", + "y": "118", "properties": { - "size": "17", - "text": "Zustand" + "size": "16", + "text": "I wouldn't recommend" } - } - ] - } - } - }, - { - "ID": "14507", - "typeID": "__group__", - "zOrder": "145", - "measuredW": "158", - "measuredH": "44", - "w": "158", - "h": "44", - "x": "317", - "y": "1084", - "properties": { - "controlName": "100-react-ecosystem:ssr:remix" - }, - "children": { - "controls": { - "control": [ + }, { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "158", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", + "ID": "4", + "typeID": "Icon", + "zOrder": "4", + "measuredW": "24", + "measuredH": "24", + "x": "23", + "y": "118", "properties": { - "color": "16770457" + "color": "10066329", + "icon": { + "ID": "circle", + "size": "small" + } } }, { - "ID": "1", + "ID": "5", "typeID": "Label", - "zOrder": "1", - "measuredW": "49", - "measuredH": "25", - "x": "54", - "y": "10", + "zOrder": "5", + "w": "324", + "measuredW": "315", + "measuredH": "24", + "x": "60", + "y": "86", "properties": { - "size": "17", - "text": "Remix" + "size": "16", + "text": "Order in roadmap not strict (Learn anytime)" } - } - ] - } - } - }, - { - "ID": "14508", - "typeID": "Arrow", - "zOrder": "1", - "w": "96", - "h": "30", - "measuredW": "150", - "measuredH": "100", - "x": "461", - "y": "1100", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 96.17695738701968, - "y": 29.91337767979394 - }, - "p1": { - "x": 0.5740721807586135, - "y": 0.016256006543298205 - }, - "p2": { - "x": -0.14352726765127954, - "y": 0.27630547835678954 - } - } - }, - { - "ID": "14509", - "typeID": "__group__", - "zOrder": "146", - "measuredW": "218", - "measuredH": "44", - "w": "218", - "h": "44", - "x": "1239", - "y": "1303", - "properties": { - "controlName": "100-react-ecosystem:state-management:redux:redux-toolkit" - }, - "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": "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": "1", + "ID": "7", "typeID": "Label", - "zOrder": "1", - "measuredW": "103", - "measuredH": "25", - "x": "57", - "y": "10", + "zOrder": "7", + "measuredW": "272", + "measuredH": "24", + "x": "59", + "y": "54", "properties": { - "size": "17", - "text": "Redux Toolkit" + "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" + } + } + } + ] + } } } ] } } - }, - { - "ID": "14510", - "typeID": "Arrow", - "zOrder": "0", - "w": "87", - "h": "2", - "measuredW": "150", - "measuredH": "100", - "x": "1169", - "y": "1324", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "rightArrow": "false", - "stroke": "dotted", - "p0": { - "x": 87.08063080147826, - "y": 0.28039844162640293 - }, - "p1": { - "x": 0.4826498422712936, - "y": 0.022082018927444477 - }, - "p2": { - "x": 0.40617436331285717, - "y": -0.3216264545321792 - } - } } ] }, "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