content: added new React skills section

skills/77 React/Array rendering.yml

@@ -0,0 +1,41 @@
+---
+sort: 50
+
+---
+skill: "Mapping"
+level: 4
+requires:
+  - "Props // Non-string props"
+  - "// JavaScript // Iterators // .map()"
+resources:
+  - url: https://scrimba.com/learn/learnreact/review-array-map-co4f44cfb9e4575776dc759eb
+    desc: "Review - array .map()"
+    text: |
+      Make sure you know how to work with this
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/react-renders-arrays-co3dc4d16838dd05ca4667cb9
+    desc: "React renders arrays"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/mapping-components-co20249b69609b9df5473acc7
+    desc: "Mapping components"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/map-quiz-coe9846508d586a605352f235
+    desc: "Map quiz!"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/loading-images-from-map-coe6c4822bbdc0a0360bd1961
+    desc: "Loading images from .map()"
+    text: |
+      Just in case the images don't load correctly
+    type: video
+    lang: en
+    status: ok

skills/77 React/Basics.yml

@@ -0,0 +1,150 @@
+---
+sort: 10
+
+---
+skill: "Introduction to React"
+level: 3
+requires:
+  - "// CSS // General CSS // Basic CSS Syntax"
+  - "// CSS // General CSS // Connecting with HTML (linking)"
+  - "// JavaScript // Functions // Principles"
+  - "// JavaScript // Objects // Objects overview"
+  - "// JavaScript // JavaScript in Browser // <script> tag"
+  - "// JavaScript // JavaScript in Browser // DOM overview"
+resources:
+  - url: https://scrimba.com/learn/learnreact
+    desc: "Scrimba - Learn React"
+    text: |
+      Please register here
+    type: interactive course
+    lang: en
+    availability: "Registration"
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/welcome-to-an-introduction-to-react-coaaf455789c2a9addc20dd24
+    desc: "Learn to learn here"
+    type: video
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/what-well-learn-cofad4846b7d0d0744b7ae944
+    desc: "What you'll learn?"
+    type: video
+    lang: en
+    status: ok
+
+---
+skill: "Linking, ReactDOM.render"
+level: 3
+text: |
+  Including React into the project (simplified way)
+  Rendering page element with ReactDOM.render
+requires:
+  - "Introduction to React"
+  - "// HTML // Body // <ul>, <ol>, <li>"
+resources:
+  - url: https://scrimba.com/learn/learnreact/first-react-coc0845dcb1a26cb0769a2fea
+    desc: "First React"
+    text: |
+      You can maximize and minimize the video presentation - when it's minimized, you can look at the code. Note that Bob will magically co-write code with you during the video :)
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/first-react-practice-codb545d191c6488eb4d30204
+    desc: "First React Practice"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Composability concept"
+level: 3
+text: |
+  Custom components introduction
+requires:
+  - "Linking, ReactDOM.render"
+resources:
+  - url: https://scrimba.com/learn/learnreact/why-react-its-composable-coc26489788a896f326eebb8e
+    desc: "Why React? It's Composable!"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Declarative programming"
+level: 3
+text: |
+  Imperative vs. declarative programming
+requires:
+  - "Composability concept"
+resources:
+  - url: https://scrimba.com/learn/learnreact/why-react-its-declarative-co3f64d8db3ff607d73e8f14d
+    desc: "Why React? It's declarative"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "JSX"
+level: 3
+text: |
+  JavaScript XML
+  HTML-like code used in JavaScript
+requires:
+  - "Declarative programming"
+  - "// HTML // Body // <nav>"
+resources:
+  - url: https://scrimba.com/learn/learnreact/jsx-cob2c4bf28c31480e376a4427
+    desc: "JSX"
+    text: |
+      Make sure you do the challenge at the end
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "import React & ReactDOM"
+level: 3
+text: |
+  Including React into the project (proper way)
+
+  Also, make sure you understood the following topics:
+  - .append() vs. ReactDOM.render()
+  - Rendering page element with ReactDOM.createRoot().render() (React 18 update)
+requires:
+  - "JSX"
+  - "// JavaScript // Modules // import"
+resources:
+  - url: https://scrimba.com/learn/learnreact/goodbye-cdns-co3534f23a33055e384eb5be5
+    desc: "Goodbye, CDNs!"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/thought-experiment-use-append-instead-of-reactdomrender-co5c54662bb669f19d26693f9
+    desc: "Thought experiment: use .append() instead of ReactDOM.render()?"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/update-new-react-18-createroot-api-co76b46f2a8c2c72363173f9a
+    desc: "UPDATE: New React 18 createRoot API"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Practice: building a simple page, quiz"
+level: 3
+requires:
+  - "import React & ReactDOM"
+  - "// HTML // Body // <img>, src, width, height, alt"
+resources:
+  - url: https://scrimba.com/learn/learnreact/project-part-1-markup-coc7e4be18a0fe000d0e29e32
+    desc: "Project part 1 - markup"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/pop-quiz-co81940cf8093beef73d32de3
+    desc: "Pop quiz!"
+    type: interactive course
+    lang: en
+    status: ok

skills/77 React/Composability.yml

@@ -0,0 +1,62 @@
+---
+sort: 20
+
+---
+skill: "Custom components"
+level: 3
+text: |
+  One of the most important features of React
+requires:
+  - "Basics // Practice: building a simple page, quiz"
+resources:
+  - url: https://scrimba.com/learn/learnreact/custom-components-co31545c6bee41d3b65bed126
+    desc: "Custom Components"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/custom-components-quiz-cob7948d9a666f6e17b17aff2
+    desc: "Custom Components Quiz"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Nesting elements"
+level: 3
+requires:
+  - "Custom components"
+  - "// HTML // Body // <header>"
+  - "// HTML // Body // <footer>"
+  - "// HTML // Body // <small>"
+resources:
+  - url: https://scrimba.com/learn/learnreact/custom-components-part-2-co3234be9b545e66abba43b55
+    desc: "Custom Components part 2"
+    text: |
+      Nesting: worse way (just to show you)
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/parent-child-components-coa384cc0b7aaa06b76b168b8
+    desc: "Parent/Child Components"
+    text: |
+      Nesting: better way
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Components in separate files"
+level: 4
+text: |
+  One component per file
+requires:
+  - "Nesting elements"
+  - "// JavaScript // Modules // export default"
+resources:
+  - url: https://scrimba.com/learn/learnreact/organize-components-coce046849cdbb0430854ed56
+    desc: "Organize components"
+    type: interactive course
+    lang: en
+    status: ok

skills/77 React/Conditional rendering.yml

@@ -0,0 +1,59 @@
+---
+sort: 70
+
+---
+skill: "&&"
+level: 4
+text: |
+  Render something or render nothing.
+requires:
+  - "State // Arrays and objects"
+  - "// JavaScript // Conditionals // Logical operators"
+resources:
+  - url: https://scrimba.com/learn/learnreact/conditional-rendering--co00d4a3c9a328b5ff96f418e
+    desc: "Conditional rendering: &&"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/conditional-rendering-practice-co7a3413c9530c3e2804c4916
+    desc: "Conditional rendering: && practice"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "ternary"
+level: 4
+text: |
+  Render the first or second option.
+requires:
+  - "&&"
+resources:
+  - url: https://scrimba.com/learn/learnreact/conditional-rendering-ternary-codf54303b0d1934718a0bf5b
+    desc: "Conditional rendering: ternary"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/conditional-rendering-practice-co6c14590bfc4e8abe0ef2b40
+    desc: "Conditional rendering practice"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Practice: quiz"
+level: 4
+requires:
+  - "ternary"
+resources:
+  - url: https://scrimba.com/learn/learnreact/conditional-rendering-quiz-coeaf48b69510213fee26c35d
+    desc: "Conditional rendering quiz!"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok