diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index c0a2e547b..9f9d6063d 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -113,9 +113,11 @@ const people = [{ name: 'Абдус Салам (Moшинкаmad Abdus Salam)', profession: 'фізик', }, { + id: 3, name: 'Персі Джуліан (Percy Lavon Julian)', profession: 'хімік', }, { + id: 4, name: 'Субрахманьян Чандрасекар (Subrahmanyan Chandrasekhar)', profession: 'астрофізик', }]; diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index ed3174aea..1a8521246 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -435,7 +435,7 @@ interface ModalRendererProps { Важливо зазначити, що ви не можете використовувати TypeScript для опису того, що дочірні елементи є певним типом JSX-елементів, тому ви не можете використовувати систему типів для опису компонента, який приймає лише елементи `
  • `. -Ви можете побачити приклад з використанням `React.ReactNode` і `React.ReactElement` та перевіркою типів у [цій пісочниці TypeScript](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). +Ви можете побачити приклад із використанням `React.ReactNode` і `React.ReactElement` та перевіркою типів у [цій пісочниці TypeScript](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). ### Пропси стилів {/*typing-style-props*/} @@ -456,7 +456,7 @@ interface MyComponentProps { - [Посібник TypeScript](https://www.typescriptlang.org/docs/handbook/) є офіційною документацією для TypeScript і охоплює більшість ключових особливостей мови. - - [Список змін TypeScript](https://devblogs.microsoft.com/typescript/) описує кожну нову функцію більш детально. + - [Список змін TypeScript](https://devblogs.microsoft.com/typescript/) описує нові функції більш детально. - [Шпаргалка TypeScript для React](https://react-typescript-cheatsheet.netlify.app/) — це підтримувана спільнотою шпаргалка для використання TypeScript у React, що охоплює багато корисних прикладів та надає більше інформації, ніж цей документ. diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md index 0b64c5ed9..92c6ba63a 100644 --- a/src/content/reference/react/StrictMode.md +++ b/src/content/reference/react/StrictMode.md @@ -196,6 +196,9 @@ ul { margin: 0; list-style-type: none; height: 100%; + display: flex; + flex-wrap: wrap; + padding: 10px; } li { @@ -203,7 +206,6 @@ li { border-radius: 6px; float: left; margin: 5px; - margin-bottom: 20px; padding: 5px; width: 70px; height: 100px; @@ -283,6 +285,9 @@ ul { margin: 0; list-style-type: none; height: 100%; + display: flex; + flex-wrap: wrap; + padding: 10px; } li { @@ -290,7 +295,6 @@ li { border-radius: 6px; float: left; margin: 5px; - margin-bottom: 20px; padding: 5px; width: 70px; height: 100px; @@ -377,6 +381,9 @@ ul { margin: 0; list-style-type: none; height: 100%; + display: flex; + flex-wrap: wrap; + padding: 10px; } li { @@ -384,7 +391,6 @@ li { border-radius: 6px; float: left; margin: 5px; - margin-bottom: 20px; padding: 5px; width: 70px; height: 100px; @@ -467,6 +473,9 @@ ul { margin: 0; list-style-type: none; height: 100%; + display: flex; + flex-wrap: wrap; + padding: 10px; } li { @@ -474,7 +483,6 @@ li { border-radius: 6px; float: left; margin: 5px; - margin-bottom: 20px; padding: 5px; width: 70px; height: 100px;