├── Helpers └── self-code-review.md ├── Meeting-1 ├── README.md └── warm-up.js ├── Meeting-10 ├── README.md ├── homework │ └── README.md └── my-app │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── App.test.js │ ├── components │ ├── Test.jsx │ ├── Todo.css │ ├── Todo.jsx │ ├── TodoItem.jsx │ └── Welcome.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── Meeting-11 ├── README.md └── components │ ├── Counter.jsx │ ├── Counter.scss │ ├── Counter2.jsx │ ├── Counters.jsx │ └── Counters2.jsx ├── Meeting-12 ├── README.md └── homework │ └── README.md ├── Meeting-13 ├── README.md └── homework │ └── README.md ├── Meeting-14 └── README.md ├── Meeting-15 └── README.md ├── Meeting-16 ├── Project │ ├── README.md │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── precache-manifest.b77082b811525d52a5e21e4745421e45.js │ │ ├── robots.txt │ │ ├── service-worker.js │ │ └── static │ │ │ ├── css │ │ │ ├── 2.11829350.chunk.css │ │ │ ├── 2.11829350.chunk.css.map │ │ │ ├── main.3224a1ca.chunk.css │ │ │ └── main.3224a1ca.chunk.css.map │ │ │ └── js │ │ │ ├── 2.f5441396.chunk.js │ │ │ ├── 2.f5441396.chunk.js.LICENSE.txt │ │ │ ├── 2.f5441396.chunk.js.map │ │ │ ├── main.c9fca7b6.chunk.js │ │ │ ├── main.c9fca7b6.chunk.js.map │ │ │ ├── runtime-main.077a2d11.js │ │ │ └── runtime-main.077a2d11.js.map │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── components │ │ │ ├── AddTutorial.jsx │ │ │ ├── Tutorial.jsx │ │ │ └── TutorialsList.jsx │ │ ├── firebase.js │ │ ├── index.css │ │ ├── index.js │ │ └── services │ │ │ └── TutorialService.js │ └── yarn.lock └── README.md ├── Meeting-17 ├── README.md ├── homework │ └── README.md └── homework2 │ └── README.md ├── Meeting-19 └── README.md ├── Meeting-2 ├── README.md ├── homework │ ├── 1-homework-solution.js │ ├── 1-homework-solution.test.js │ ├── README.MD │ └── jest.config.js ├── problem-1.js ├── problem-2.js ├── problem-3.html └── problem-3.js ├── Meeting-3 ├── README.md └── homework │ ├── 3-1-homework-solution.js │ ├── 3-1-homework-solution.test.js │ ├── README.md │ └── jest.config.js ├── Meeting-4 ├── README.md └── homework │ ├── 4-1-homework-solution.js │ ├── 4-1-homework-solution.test.js │ ├── README.md │ └── jest.config.js ├── Meeting-5 ├── README.md └── homework │ ├── 5-1-homework-solution.js │ ├── 5-2-homework-solution.js │ ├── 5-3-homework-solution.js │ ├── 5-4-homework-solution.js │ └── README.md ├── Meeting-6 ├── README.md ├── async.js ├── macro-micro-task-noqueue.js └── macro-micro-task.js ├── Meeting-7 ├── README.md ├── hello.js ├── index.html └── test.js ├── Meeting-8 ├── README.md ├── app.js ├── index.html ├── package.json └── square.js ├── Meeting-9 ├── README.MD ├── index.html ├── index_with_jsx.html └── like_button.js ├── README.md ├── db.json └── issue_template.md /Meeting-1/README.md: -------------------------------------------------------------------------------- 1 | # სილაბუსი 📃 2 | 3 | ___ 4 | 5 | # სამუშაო გარემო 💻⌨🖱 6 | 7 | რეკომენდებული code editor ები: ● Vis 8 | 9 | ● Visual Studio [Code](https://code.visualstudio.com/download) 10 | 11 | ● JetBrains [WebStorm](https://www.jetbrains.com/webstorm/download/?source=google&medium=cpc&campaign=9641686245&gclid=Cj0KCQjwqKuKBhCxARIsACf4XuHkJjS3MeTHOXmEfLv8LltUKKVzKbGoY_8uGtd8NGdBocaNnXhgx3AaAguhEALw_wcB#section=linux) 12 | 13 | ___ 14 | 15 | # Javascript საწყისები 🧮 16 | ### სწრაფი მიმოხილვა 🔎 17 | 18 | 19 | ## [Var, Let, and Const 🧩](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/) 20 | 21 | ### var (Example 1) 22 | 23 | ```js 24 | var tester = "hey hi"; 25 | 26 | function newFunction() { 27 | var hello = "hello"; 28 | } 29 | 30 | console.log(hello); // error: hello is not defined 31 | ``` 32 | 33 | ### var (Example 2) 34 | ```js 35 | var greeter = "hey hi"; 36 | var times = 4; 37 | 38 | if (times > 3) { 39 | var greeter = "say Hello instead"; 40 | } 41 | 42 | console.log(greeter) // "say Hello instead" 43 | ``` 44 | 45 | ### let (Example 1) 46 | ```js 47 | let greeting = "say Hi"; 48 | let times = 4; 49 | 50 | if (times > 3) { 51 | let hello = "say Hello instead"; 52 | console.log(hello); // "say Hello instead" 53 | } 54 | 55 | console.log(hello) // hello is not defined 56 | ``` 57 | 58 | ### let (Example 2) 59 | ```js 60 | let greeting = "say Hi"; 61 | 62 | if (true) { 63 | let greeting = "say Hello instead"; 64 | console.log(greeting); // "say Hello instead" 65 | } 66 | 67 | console.log(greeting); // "say Hi" 68 | ``` 69 | 70 | ### const (Example 1) 71 | ```js 72 | const greeting = "say Hi"; 73 | greeting = "say Hello instead"; // error: Assignment to constant variable. 74 | 75 | const greeting = "say Hi"; 76 | const greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 77 | ``` 78 | 79 | ### const (Example 2) 80 | ```js 81 | // არ შეგვიძლია მთლიანი ობიექტის მნიშვნელობის შეცვლა: 82 | greeting = { 83 | words: "Hello", 84 | number: "five", 85 | }; // error: Assignment to constant variable. 86 | 87 | 88 | // თუმცა შეგვიძლია ობიექტის რომელიმე key-ს მნიშვნელობის შეცვლა: 89 | greeting.message = "say Hello instead"; 90 | ``` 91 | 92 | ___ 93 | 94 | ## [Primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) Data Types 🧩 95 | 96 | პრიმიტივი ეწოდება მონაცემთა ტიპს, რომელიც არ არის 97 | **ობიექტი** და არ აქვს **მეთოდები** 98 | 99 | - **string** (სიმბოლოების თანმიმდევრობა ტექსტის წარმოსადგენად) 100 | - **number** (მცურავ-მძიმიანი 64ბიტი შემცველობის მონაცემთა ტიპი) 101 | - **bigint** (შეთანხმებული ზუსტი ფორმატი, დიდი მთელი რიცხვებისთვის) 102 | - **boolean** (ლოგიკური მონაცემთა ტიპი ორად ორი მნიშვნელობით true/false) 103 | - **undefined** (ავტომატურად ენიჭება ახლად გამოცხადებულ ცვლადებს) 104 | - **symbol** (უნიკალური იდენტიფიკატორი, ძირითადად გამოიყენება debugingში) 105 | - **null** (მიმთითებელი არარსებულ ან არასწორ ობიექტზე ან მისამართზე) 106 | 107 | ___ 108 | 109 | ## Type [coercion](https://www.freecodecamp.org/news/js-type-coercion-explained-27ba3d9a2839/?fbclid=IwAR0nidQIxbe8dmw9thf-XcgxAMw2nkB5JNxFA435nohV0Ab0T5pE6Ssm15E) 💪 110 | 111 | რა იქნება შედეგი? 112 | 113 | | Question | Answer | 114 | | :--- | :---: | 115 | | true + false | ? | 116 | | 12 / "6" | ? | 117 | | "number" + 15 + 3 | ? | 118 | | 15 + 3 + "number" | ? | 119 | | [1] > null | ? | 120 | | "foo" + + "bar" | ? | 121 | | 'true' == true | ? | 122 | | false == 'false' | ? | 123 | | null == '' | ? | 124 | | !!"false" == !!"true" | ? | 125 | | ['x'] == 'x' | ? | 126 | | [] + null + 1 | ? | 127 | | [1,2,3] == [1,2,3] | ? | 128 | | {}+[]+{}+[1] | ? | 129 | | !+[]+[]+![] | ? | 130 | | new Date(0) - 0 | ? | 131 | | new Date(0) + 0 | ? | 132 | 133 | პასუხები: 134 | 135 | 136 | | Question | Answer | 137 | | :--- | ---: | 138 | | true + false | 1 | 139 | | 12 / "6" | 2 | 140 | | "number" + 15 + 3 | 'number153' | 141 | | 15 + 3 + "number" | '18number' | 142 | | [1] > null | true | 143 | | "foo" + + "bar" | 'fooNaN' | 144 | | 'true' == true | false | 145 | | false == 'false' | false | 146 | | null == '' | false | 147 | | !!"false" == !!"true" | true | 148 | | ['x'] == 'x' | true | 149 | | [] + null + 1 | 'null1' | 150 | | [1,2,3] == [1,2,3] | false | 151 | | {}+[]+{}+[1] | '0[object Object]1' | 152 | | !+[]+[]+![] | 'truefalse' | 153 | | new Date(0) - 0 | 0 | 154 | | new Date(0) + 0 | 'Thu Jan 01 1970 02:00:00(EET)0' | 155 | 156 | ___ 157 | 158 | # Objects (ობიექტები) 159 | 160 | ### Example 1: როგორ მივწვდეთ მნიშვნელობებს? 161 | 162 | ```js 163 | let person = { 164 | name: "Daniel", 165 | "&weird property": "weird", 166 | }; 167 | ``` 168 | 169 | #### პასუხი: 170 | 171 | ```jsx 172 | let prop = "name" ; 173 | 174 | person .name; // -> Daniel 175 | person ["name" ]; // -> Daniel 176 | person [‘name’ ]; // -> Daniel 177 | person [prop]; // -> Daniel 178 | 179 | person ["&weird property" ]; // -> weird 180 | 181 | // ERROR 182 | // person.&weird property 183 | ``` 184 | 185 | ### Example 2: რა იქნება შედეგი? 186 | ```js 187 | let person = { name: "David" }; 188 | let otherPerson = person; 189 | 190 | person === { name: "David" }; // -> რა იქნება შედეგი? 191 | person === otherPerson; // -> რა იქნება შედეგი? 192 | ``` 193 | 194 | #### შედეგი: 195 | ```js 196 | let person = { name: "David" }; 197 | let otherPerson = person; 198 | 199 | person === { name: "David" }; // -> false, შექმნა ახალი ობიექტი მეხსიერებაში 200 | person === otherPerson; // -> true, მიენიჭა არსებული მისამართი მეხსიერებიდან 201 | ``` 202 | 203 | ### Example 3: რა იქნება შედეგი? 204 | ```js 205 | // შევქმნათ მსგავსი key-ების მქონე ობიექტი. 206 | var x = { a: "happy", a: "cat" }; 207 | 208 | console.log(x); //==> რა იქნება "x" ის მნიშვნელობა? 209 | ``` 210 | 211 | #### შედეგი: 212 | ```js 213 | console.log(x); //==> { a: "cat" }; 214 | ``` 215 | 216 | ___ 217 | 218 | # Functions (ფუნქციები) 219 | 220 | ### Example 1: რა იქნება შედეგი? 221 | ```js 222 | function sum() { 223 | let sum = 0; 224 | for (let i = 0; i < arguments.length; i++) { 225 | sum += arguments[i]; 226 | } 227 | return sum; 228 | } 229 | 230 | sum(1, 2, 3, 4); 231 | ``` 232 | 233 | #### შედეგი: 234 | ```js 235 | sum(1, 2, 3, 4); // -> 10 236 | ``` 237 | 238 | 239 | ### Example 2: რა იქნება შედეგი? 240 | ```js 241 | function learnArgs() { 242 | let args = arguments; 243 | args.push(5); 244 | return args; 245 | } 246 | 247 | learnArgs(1, 2, 3, 4); 248 | ``` 249 | 250 | #### შედეგი: 251 | ```js 252 | VM537:3 Uncaught TypeError: args.push is not a function 253 | at learnArgs (:3:8) 254 | at :7:1 255 | 256 | /* 257 | * arguments არ არის ნამდვილი array, ის არის მხოლოდ array-like object 258 | * სიგრძის და ინდექსების მნიშვნელობით. თუ გსურს გამოიყენო მასივის მეთოდები 259 | * მაგალითად push ან pop, ჯერ უნდა გარდაქმნა იგი ნამდვილ მასივად. 260 | */ 261 | 262 | ``` 263 | 264 | 265 | ### Example 3: რა იქნება შედეგი? 266 | ```js 267 | function learnArgs() { 268 | let args = Array.prototype.slice.call(arguments, 0); 269 | args.push(5); 270 | return args; 271 | } 272 | 273 | learnArgs(1, 2, 3, 4); 274 | ``` 275 | 276 | #### შედეგი: 277 | 278 | ```js 279 | learnArgs(1, 2, 3, 4); // -> [1, 2, 3, 4, 5] 280 | ``` 281 | 282 | ___ 283 | 284 | # Practical exercise 285 | 286 | შექმენით ფუნქცია, რომელიც არგუმენტებად იღებს სვეტებისა და სტრიქონების რაოდენობას და აბრუნებს შესაბამისი ლოგიკით 287 | ზრდად შაბლონურ ცხრილს. 288 | 289 | (შაბლონზე მოცემულია სიტუაცია, როცა **n** არის სვეტების რაოდენობა და **m** სტრიქონების): 290 | 291 | ```js 292 | let row = 4; 293 | let col = 5; 294 | 295 | const getTable = (row, col) => { 296 | // განათავსე შენი კოდი აქ 297 | } 298 | 299 | console.log(getTable(row, col)); 300 | 301 | // Output: 302 | // [ 303 | // [ 1, 8, 9, 16, 17 ], 304 | // [ 2, 7, 10, 15, 18 ], 305 | // [ 3, 6, 11, 14, 19 ], 306 | // [ 4, 5, 12, 13, 20 ] 307 | // ] 308 | ``` 309 | 310 | ვიზუალიზაცია: 311 | 312 | | ⇓ Rows / Cols ⇒ | 1 | 2 | 3 | ... | n | 313 | | :---------------: |:---:|:---: |:---:|:----: |:---:| 314 | | 1 | 1 | ⬆ | ⬇ | ⬆⬆ | ⬇ | 315 | | 2 | ⬇ | ⬆ | ⬇ | ⬆⬆ | ⬇ | 316 | | 3 | ⬇ | ⬆ | ⬇ | ⬆⬆ | ⬇ | 317 | | ... | ⬇⬇| ⬆⬆ | ⬇⬇| ⬆⬆ | ⬇ | 318 | | n | ⬇ | ⬆ | ⬇ | ⬆⬆ | ⬇ | 319 | 320 | ___ 321 | 322 | # დავალების ატვირთვის ინსტრუქცია 323 | 324 | 1. შექმენით [GitHub](https://github.com/login) account (ანგარიში) 325 | 2. შექმენით ახალი რეპოზიტორია ([დამხმარე](https://docs.github.com/en/get-started/quickstart/create-a-repo)) 326 | 3. Windows ის მომხმარებლებმა გადმოწერეთ და დააყენეთ GitBash ([დამხმარე](https://git-scm.com/downloads)) 327 | 4. შექმენით ნებისმიერი ფოლდერი თქვენს კომპიუტერში და დაუკავშირეთ ახლად შექმნი რეპოს. (დაკავშირების ინსტრუქციას დაგიწერთ, როდესაც ახალ რეპოზიტორიას შექმნით) 328 | 5. შექმენით ფაილი homework_1.js და განათავსეთ თქვენი კოდი შიგნით. 329 | 6. დასრულების შემდეგ დაამატეთ git ში ცვლილებები ([დამხმარე](https://github.com/git-guides/git-add) git add --all) 330 | 7. შექმენით ცვლილებების ლოკალური commit მესიჯით ( git commit -m “Done Homework_1” ) 331 | 8. ამის შემდეგ გა push ეთ ცვლილებები (git push) 332 | 9.შეამოწმეთ რომ ნამდვილად აისახა ცვლილებები რეპოზიტორიაში 333 | 334 | _თუ რაიმე მიზეზით გაიჭედებით რომელიმე ეტაპზე მიუხედავად ბევრი მცდელობისა, ალტერნატიულ ვარიანტად შეგიძლიათ 335 | გამომიგზავნოთ მეილზე_ 336 | -------------------------------------------------------------------------------- /Meeting-1/warm-up.js: -------------------------------------------------------------------------------- 1 | let person = { 2 | name: "Daniel", 3 | "&weird property": "weird", 4 | }; 5 | 6 | let prop = "name"; 7 | 8 | person.name; // -> Daniel 9 | person["name"]; // -> Daniel 10 | person["name"]; // -> Daniel 11 | person[prop]; // -> Daniel 12 | 13 | person["&weird property"]; // -> weird 14 | 15 | // ERROR 16 | // person.&weird property 17 | 18 | /* _____________________________ */ 19 | /* _____________________________ */ 20 | /* _____________________________ */ 21 | 22 | function sum() { 23 | let sum = 0; 24 | for (let i = 0; i < arguments.length; i++) { 25 | sum += arguments[i]; 26 | } 27 | return sum; 28 | } 29 | sum(1, 2, 3, 4); // -> 10 30 | 31 | /* _____________________________ */ 32 | /* _____________________________ */ 33 | /* _____________________________ */ 34 | 35 | /* 36 | * arguments is not a real array, it is only an array-like object 37 | * with a length property and indices. If you want to use array methods 38 | * like push or pop, you can convert it like this: 39 | */ 40 | let args = Array.prototype.slice.call(arguments, 0); 41 | 42 | /* _____________________________ */ 43 | /* _____________________________ */ 44 | /* _____________________________ */ 45 | 46 | /* 47 | * Truthy- and falsyness 48 | * In JavaScript, values other than actual booleans can evaluate as true (truthy) or false (falsy) in a logical expression. The following values will be treated as falsy: 49 | * false 50 | * null 51 | * undefined 52 | * 0 53 | * '' // empty string 54 | * person.undefinedProperty 55 | */ 56 | 57 | /* _____________________________ */ 58 | /* _____________________________ */ 59 | /* _____________________________ */ 60 | 61 | /* 62 | * They can, for example, be evaluated in an if statement: 63 | * 64 | */ 65 | 66 | var person = { name: "David" }; 67 | if (person.name) { 68 | /* Do stuff if property exists and is not falsy */ 69 | } 70 | 71 | /* 72 | * Note: This does not work for undeclared variable names. 73 | * If you want to see if a variable exists (and is not undefined) use the typeof operator: 74 | * 75 | */ 76 | if (typeof myvar !== "undefined") { 77 | } 78 | 79 | /* _____________________________ */ 80 | /* _____________________________ */ 81 | /* _____________________________ */ 82 | 83 | /* 84 | * Equality 85 | * 86 | */ 87 | 88 | // == 89 | 90 | 1 == 1; // -> true 91 | 1 == "1"; // -> true 92 | 1 == 2; // -> false 93 | // Now things get weird 94 | "" == false; // -> true 95 | [] == false; // -> true, [] not falsy though 96 | null == undefined; // -> true 97 | 98 | // === 99 | 1 === 1; // -> true 100 | 1 === "1"; // -> false 101 | 1 === parseInt("1"); // -> true 102 | [] === false; // -> false 103 | null === undefined; // -> false 104 | 105 | // reference 106 | var person = { name: "David" }; 107 | var otherPerson = person; 108 | person === { name: "David" }; // -> false, created new object 109 | person === otherPerson; // -> true, same reference 110 | 111 | /* _____________________________ */ 112 | /* _____________________________ */ 113 | /* _____________________________ */ 114 | 115 | // 1. Setting a function with the same parameter names 116 | function funny(a, a) { 117 | console.log("happy"); 118 | } 119 | 120 | // 2. Establishing an object with the same keys. 121 | var x = { a: "happy", a: "cat" }; 122 | x; //==> What would "x" look like? 123 | 124 | // 3. Silent failing assignments 125 | NaN = 5; 126 | //or 127 | undefined = 5; 128 | 129 | // 4. Deleting plain names or undeletable properties 130 | var x = "happy"; 131 | delete x; //==> What happens to "x"? 132 | //or 133 | delete Object.prototype; 134 | 135 | // 5. Setting an integer that starts with a zero to a variable 136 | var x = 0123; //<<== what is this? 137 | 138 | /* 139 | * Implementing Strict Mode 140 | * 141 | * Strict Mode is a feature in JavaScript that was introduced in ECMAScript 5. 142 | * It eliminates some JavaScript silent errors by changing them to throw errors. 143 | * Strict mode applies to entire scripts or to individual functions. 144 | * It doesn’t apply to block statements enclosed in {} braces. 145 | * You can implement strict mode by adding “use strict”; to the beginning of a script or a function. 146 | * 147 | */ 148 | ("use strict"); //You're in Strict Mode! 149 | -------------------------------------------------------------------------------- /Meeting-10/README.md: -------------------------------------------------------------------------------- 1 | # Meeting 10 2 | 3 | განსახილველი თემები: 4 | 5 | * [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html) 6 | * React default setup 7 | * [Introducing JSX](https://reactjs.org/docs/introducing-jsx.html) 8 | * [Rendering Elements](https://reactjs.org/docs/rendering-elements.html) 9 | * [Components and Props](https://reactjs.org/docs/components-and-props.html) 10 | * [state](https://reactjs.org/docs/state-and-lifecycle.html) 11 | 12 | 13 | ## React default setup 14 | 15 | * [Getting Started](https://create-react-app.dev/docs/getting-started) 16 | * [Folder Structure](https://create-react-app.dev/docs/folder-structure) 17 | * [Supported Browsers and Features](https://create-react-app.dev/docs/supported-browsers-features) 18 | * [Using the Public Folder](https://create-react-app.dev/docs/using-the-public-folder) 19 | * [Measuring Performance](https://create-react-app.dev/docs/measuring-performance) 20 | * [Running Tests](https://create-react-app.dev/docs/running-tests) 21 | 22 | ```bash 23 | my-app 24 | ├── README.md 25 | ├── node_modules 26 | ├── package.json 27 | ├── .gitignore 28 | ├── public 29 | │ ├── favicon.ico 30 | │ ├── index.html 31 | │ ├── logo192.png 32 | │ ├── logo512.png 33 | │ ├── manifest.json 34 | │ └── robots.txt 35 | └── src 36 | ├── App.css 37 | ├── App.js 38 | ├── App.test.js 39 | ├── index.css 40 | ├── index.js 41 | ├── logo.svg 42 | ├── serviceWorker.js 43 | └── setupTests.js 44 | ``` 45 | 46 | 47 | ## References 48 | 49 | [RCA dev](https://create-react-app.dev/docs/documentation-intro) 50 | 51 | ## Recomendations 52 | 53 | [Setting up your first React app :MDN](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started#setting_up_your_first_react_app "Permalink to Setting up your first React app") 54 | 55 | [Adding Images, Fonts, and Files :RCA dev](https://create-react-app.dev/docs/adding-images-fonts-and-files) 56 | 57 | [Code Splitting](https://create-react-app.dev/docs/code-splitting) 58 | -------------------------------------------------------------------------------- /Meeting-10/homework/README.md: -------------------------------------------------------------------------------- 1 | # Homeworks 2 | 3 | დაბლა მოცემულია ამ შეხვედრის დავალებასთან დაკავშირებით დეტალური ინფორმაცია. 4 | 5 | 1. შექმენით CRA(create-react-app) სახელად ol-academy-react-todo 6 | ```bash 7 | npx create-react-app ol-academy-react-todo 8 | ``` 9 | 2. დაამატეთ `/src/` საქაღალდის შიგნით ფოლდერი სახელად `components` და თქვენი ყველა რეაქტის კომპონენტი განათავსეთ აქ 10 | 3. რეაქტ აპლიკაციას უნდა გააჩნდეს `input` სადაც შესაძლებელი იქნება ტექსტის შეყვანა (შეყვანილი ტექსტი მომენტალურად უნდა იქნას ასახული, დამახსოვრებული state ში) 11 | 4. შესაყვან ველს ასევე უნდა მოსდევდეს დამატების ღილაკი, რომელზე დაჭერის შემთხვევაშიც 12 | 1. სუფთავდება ახალი ტასკის შესაყვანი ველი 13 | 2. ემატება სიაში ახალი ტასკი სახელად ის, რაც ღილაკზე დაჭერის მომენტში `input` ში ეწერა 14 | 5. თითოეული ტასკი, რომელიც დაემატება, უნდა აისახოს(დაემატოს) state ში წინასწარ შექმნილ მასივს 15 | 6. state ში არსებული ტასკების მასივის ყველა ელემენტი უნდა დავარედეროთ ერთი `