chore: update roadmap content json (#6776)

Co-authored-by: kamranahmedse <kamranahmedse@users.noreply.github.com>
pull/6777/head^2
github-actions[bot] 3 months ago committed by GitHub
parent 4e669fefe2
commit 96f9a12343
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 5
      public/roadmap-content/angular.json
  2. 56
      public/roadmap-content/react.json

@ -828,11 +828,6 @@
} }
] ]
}, },
"mRB-0CRdGwvxPqZbz08yj": {
"title": "@else if",
"description": "",
"links": []
},
"kGzlumFdZFxTRZ3HnCGFO": { "kGzlumFdZFxTRZ3HnCGFO": {
"title": "Directives", "title": "Directives",
"description": "SKDirectives are classes that add additional behavior to elements in your Angular applications. Use Angular's built-in directives to manage forms, lists, styles, and what users see.\n\n`NgClass` Adds and removes a set of CSS classes. | `NgStyle` Adds and removes a set of HTML styles. | `NgModel` Adds two-way data binding to an HTML form element.\n\nVisit the following resources to learn more:", "description": "SKDirectives are classes that add additional behavior to elements in your Angular applications. Use Angular's built-in directives to manage forms, lists, styles, and what users see.\n\n`NgClass` Adds and removes a set of CSS classes. | `NgStyle` Adds and removes a set of HTML styles. | `NgModel` Adds two-way data binding to an HTML form element.\n\nVisit the following resources to learn more:",

@ -220,7 +220,18 @@
"0uiGsC5SWavNdlFqizkKe": { "0uiGsC5SWavNdlFqizkKe": {
"title": "Rendering", "title": "Rendering",
"description": "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.\n\nThe 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.\n\n* 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.\n* 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.\n* 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.\n* React updates the actual DOM with the minimum number of DOM updates needed to reflect the changes in the VDOM.\n\nThis 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.\n\nVisit the following resources to learn more:", "description": "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.\n\nThe 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.\n\n* 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.\n* 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.\n* 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.\n* React updates the actual DOM with the minimum number of DOM updates needed to reflect the changes in the VDOM.\n\nThis 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.\n\nVisit the following resources to learn more:",
"links": [] "links": [
{
"title": "Rendering - Official Docs",
"url": "https://legacy.reactjs.org/docs/rendering-elements.html",
"type": "article"
},
{
"title": "Rendering in React - ui.dev",
"url": "https://ui.dev/why-react-renders",
"type": "article"
}
]
}, },
"8OBlgDRUg-CTgDXY-QHyO": { "8OBlgDRUg-CTgDXY-QHyO": {
"title": "Component Lifecycle", "title": "Component Lifecycle",
@ -554,7 +565,7 @@
}, },
"t_laNdMmdLApYszqXRdWg": { "t_laNdMmdLApYszqXRdWg": {
"title": "useRef", "title": "useRef",
"description": "useRef is a React hook that provides a way to create a mutable reference that persists across component re-renders. It stores a value that doesn't cause re-renders when it changes.\n\nVisit the following resources to learn more:", "description": "`useRef` is a React hook that provides a way to create a mutable reference that persists across component re-renders. It stores a value that doesn't cause re-renders when it changes.\n\nVisit the following resources to learn more:",
"links": [ "links": [
{ {
"title": "useRef", "title": "useRef",
@ -575,7 +586,7 @@
}, },
"w3bNp7OkehI1gjx8NzlC8": { "w3bNp7OkehI1gjx8NzlC8": {
"title": "useMemo", "title": "useMemo",
"description": "useMemo is a React hook that memorizes the result of a function. It is used to optimize performance by caching the result of a function and returning the cached result when the inputs to the function have not changed.\n\nLearn more from the following resources:", "description": "`useMemo` is a React hook that memorizes the result of a function. It is used to optimize performance by caching the result of a function and returning the cached result when the inputs to the function have not changed.\n\nLearn more from the following resources:",
"links": [ "links": [
{ {
"title": "useMemo Docs", "title": "useMemo Docs",
@ -591,7 +602,7 @@
}, },
"v48Mv0wQqjXbvy8x6gDjQ": { "v48Mv0wQqjXbvy8x6gDjQ": {
"title": "useReducer", "title": "useReducer",
"description": "useReducer: An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)\n\nLearn more from the following resources:", "description": "`useReducer`: An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)\n\nLearn more from the following resources:",
"links": [ "links": [
{ {
"title": "useReducer Docs", "title": "useReducer Docs",
@ -951,8 +962,19 @@
}, },
"thfnymb_UIiKxakKfiua5": { "thfnymb_UIiKxakKfiua5": {
"title": "Component / Libraries", "title": "Component / Libraries",
"description": "React component libraries are collections of pre-built, reusable components that can be used to speed up the development process. They can be styled using CSS in various ways, including traditional CSS files, CSS modules, and CSS-in-JS solutions like styled-components.", "description": "React component libraries are collections of pre-built, reusable components that can be used to speed up the development process. They can be styled using CSS in various ways, including traditional CSS files, CSS modules, and CSS-in-JS solutions like styled-components.\n\nVisit the following resources to learn more:",
"links": [] "links": [
{
"title": "MUI: React Component Library",
"url": "https://mui.com/",
"type": "article"
},
{
"title": "NextUI.org",
"url": "https://nextui.org/",
"type": "article"
}
]
}, },
"akVNUPOqaTXaSHoQFlkP_": { "akVNUPOqaTXaSHoQFlkP_": {
"title": "Panda CSS", "title": "Panda CSS",
@ -1596,12 +1618,28 @@
}, },
"ElgRwv5LSVg5FXGx-2K2s": { "ElgRwv5LSVg5FXGx-2K2s": {
"title": "TypeScript", "title": "TypeScript",
"description": "", "description": "TypeScript is a free and open-source high-level programming language developed by Microsoft that adds static typing with optional type annotations to JavaScript. It is designed for the development of large applications and transpiles to JavaScript. Because TypeScript is a superset of JavaScript, all JavaScript programs are syntactically valid TypeScript, but they can fail to type-check for safety reasons.\n\nTypeScript supports definition files that can contain type information of existing JavaScript libraries, much like C++ header files can describe the structure of existing object files. This enables other programs to use the values defined in the files as if they were statically typed TypeScript entities. There are third-party header files for popular libraries such as jQuery, MongoDB, and D3.js. TypeScript headers for the Node.js library modules are also available, allowing development of Node.js programs within TypeScript.\n\nVisit the following resources to learn more:",
"links": [] "links": [
{
"title": "TypeScript Website",
"url": "https://typescriptlang.org/",
"type": "article"
},
{
"title": "TypeScript Docs",
"url": "https://typescriptlang.org/docs",
"type": "article"
},
{
"title": "Learn Typescript Basics in 12 Minutes",
"url": "https://www.youtube.com/watch?v=ahCwqrYpIuM&pp=ygULdHlwZXNjcnJpcHQ%3D",
"type": "video"
}
]
}, },
"K3RZ8ESxWCpLKHePF87Hy": { "K3RZ8ESxWCpLKHePF87Hy": {
"title": "Zod", "title": "Zod",
"description": "Zod is a TypeScript-first schema declaration and validation library. I'm using the term \"schema\" to broadly refer to any data type, from a simple string to a complex nested object.\n\nZod is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures.\n\nVisit the following resources to learn more:", "description": "Zod is a TypeScript-first schema declaration and validation library. I'm using the term \"schema\" to broadly refer to any data type, from a simple string to a complex nested object.\n\nZod is designed to be as developer-friendly as possible. The goal is to eliminate duplicate type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures.\n\nVisit the following resources to learn more:",
"links": [ "links": [
{ {
"title": "Zod Website", "title": "Zod Website",

Loading…
Cancel
Save