From daf9a9e4cc20a09fea249674a9ea3e3c578575de Mon Sep 17 00:00:00 2001
From: sedmima20 <sedmima20@sps-prosek.cz>
Date: Fri, 22 Sep 2023 16:27:40 +0200
Subject: [PATCH] content: added new React skills section

---
 skills/77 React/Array rendering.yml          |  41 ++
 skills/77 React/Basics.yml                   | 150 +++++
 skills/77 React/Composability.yml            |  62 ++
 skills/77 React/Conditional rendering.yml    |  59 ++
 skills/77 React/Effect.yml                   |  94 +++
 skills/77 React/Forms.yml                    | 143 +++++
 skills/77 React/HTML vs. JSX.yml             |  35 +
 skills/77 React/Local setup & deployment.yml |  56 ++
 skills/77 React/Projects.yml                 | 632 +++++++++++++++++++
 skills/77 React/Props.yml                    |  88 +++
 skills/77 React/Routing.yml                  |   6 +
 skills/77 React/State.yml                    | 199 ++++++
 12 files changed, 1565 insertions(+)
 create mode 100644 skills/77 React/Array rendering.yml
 create mode 100644 skills/77 React/Basics.yml
 create mode 100644 skills/77 React/Composability.yml
 create mode 100644 skills/77 React/Conditional rendering.yml
 create mode 100644 skills/77 React/Effect.yml
 create mode 100644 skills/77 React/Forms.yml
 create mode 100644 skills/77 React/HTML vs. JSX.yml
 create mode 100644 skills/77 React/Local setup & deployment.yml
 create mode 100644 skills/77 React/Projects.yml
 create mode 100644 skills/77 React/Props.yml
 create mode 100644 skills/77 React/Routing.yml
 create mode 100644 skills/77 React/State.yml

diff --git a/skills/77 React/Array rendering.yml b/skills/77 React/Array rendering.yml
new file mode 100644
index 000000000..86b794fd2
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/skills/77 React/Basics.yml b/skills/77 React/Basics.yml
new file mode 100644
index 000000000..5bd2e7730
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/skills/77 React/Composability.yml b/skills/77 React/Composability.yml
new file mode 100644
index 000000000..3207beac2
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/skills/77 React/Conditional rendering.yml b/skills/77 React/Conditional rendering.yml
new file mode 100644
index 000000000..dc03e2eb6
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/skills/77 React/Effect.yml b/skills/77 React/Effect.yml
new file mode 100644
index 000000000..a6b147e37
--- /dev/null
+++ b/skills/77 React/Effect.yml	
@@ -0,0 +1,94 @@
+---
+sort: 90
+
+---
+skill: "Side effects introduction"
+level: 4
+requires:
+  - "State // Arrays and objects"
+  - "// HTML // Body // <pre>"
+  - "// JavaScript // Requests // fetch() GET Requests"
+resources:
+  - url: https://scrimba.com/learn/learnreact/making-api-calls-co9544abfb8036eb9ac767bb2
+    desc: "Making API calls"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/intro-to-useeffect-co1fd46e5be9b41273ebe14da
+    desc: "Intro to useEffect"
+    type: video
+    lang: en
+    status: ok
+
+---
+skill: "useEffect"
+level: 5
+requires:
+  - "Side effects introduction"
+resources:
+  - url: https://scrimba.com/learn/learnreact/useeffect-syntax-and-default-behavior-cob274c08aeef0c6f307b8333
+    desc: "useEffect() syntax and default behavior"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/useeffect-dependencies-array-co4fc423992f2d9737eaa55f2
+    desc: "useEffect dependencies array"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/useeffect-quiz-cob5747c8b19a658c6240e8a1
+    desc: "useEffect quiz!"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "useEffect & fetching data"
+level: 5
+requires:
+  - "useEffect"
+resources:
+  - url: https://scrimba.com/learn/learnreact/useeffect-for-fetching-data-cof924a3f92d4ca7648780a8d
+    desc: "useEffect for fetching data"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/useeffect-when-to-use-dependencies-co87f48fc9c487d958ddeca4a
+    desc: "useEffect: when to use dependencies"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "useEffect cleanup"
+level: 5
+requires:
+  - "useEffect & fetching data"
+resources:
+  - url: https://scrimba.com/learn/learnreact/state-and-effect-practices-co3d647f0b559d6e65b6a2762
+    desc: "State and Effect practices"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/useeffect-cleanup-function-coa6a4c9985b4339f164fe0ab
+    desc: "useEffect cleanup function"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "useEffect & async function"
+level: extra
+text: |
+  Watch only if you are interested and have completed the meme project.
+requires:
+  - "useEffect cleanup"
+  - "Projects // Meme generator part 6"
+resources:
+  - url: https://scrimba.com/learn/learnreact/using-an-async-function-inside-useeffect-cw73rRud
+    desc: "Using an async function inside useEffect"
+    type: interactive course
+    lang: en
+    status: ok
\ No newline at end of file
diff --git a/skills/77 React/Forms.yml b/skills/77 React/Forms.yml
new file mode 100644
index 000000000..a3181bd11
--- /dev/null
+++ b/skills/77 React/Forms.yml	
@@ -0,0 +1,143 @@
+---
+sort: 80
+
+---
+skill: "Forms introduction"
+level: 5
+requires:
+  - "State // Practice: boxes challenge"
+  - "// HTML // Body // <form>, <input>, <textarea>, <label>, <select>, <option>, <button>"
+resources:
+  - url: https://scrimba.com/learn/learnreact/react-forms-intro-co2774b5e9623a1cad018bc49
+    desc: "React forms intro"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/watch-for-input-changes-in-react-co1bc45cd92a4e5e4aea7cc45
+    desc: "Watch for input changes in React"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/form-inputs-practice-co5014a2691f7e17ada7501af
+    desc: "Form inputs practice"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Forms state object"
+level: 5
+requires:
+  - "Forms introduction"
+resources:
+  - url: https://scrimba.com/learn/learnreact/forms-state-object-co4014fe8a23d6c6d376747ca
+    desc: "Forms state object"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/form-state-object-practice-cob444ddabb8e498d051b98cb
+    desc: "Form state object practice"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Controlled inputs"
+level: 5
+requires:
+  - "Forms state object"
+resources:
+  - url: https://scrimba.com/learn/learnreact/controlled-inputs-co5c7481f910db53cc421f020
+    desc: "Controlled inputs"
+    text: |
+      Make sure you understand this
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Textarea"
+level: 5
+requires:
+  - "Controlled inputs"
+resources:
+  - url: https://scrimba.com/learn/learnreact/forms-in-react-textarea-cob6a41f7a22250f5f9bdf71e
+    desc: "Forms in React: Textarea"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Checkbox"
+level: 5
+requires:
+  - "Textarea"
+  - "Conditional rendering // Practice: quiz"
+resources:
+  - url: https://scrimba.com/learn/learnreact/forms-in-react-checkbox-co6da4637a27cca33be7cb1d7
+    desc: "Forms in React: Checkbox"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Radio buttons"
+level: 5
+requires:
+  - "Checkbox"
+  - "// HTML // Body // <fieldset>, <legend>, <optgroup>"
+resources:
+  - url: https://scrimba.com/learn/learnreact/forms-in-react-radio-buttons-co14c423dbc2026a7a2b997a2
+    desc: "Forms in React: Radio buttons"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Select & Option"
+level: 5
+requires:
+  - "Radio buttons"
+resources:
+  - url: https://scrimba.com/learn/learnreact/forms-in-react-select-option-co83b466d859cf1d6c4b3efaf
+    desc: "Forms in React: Select & Option"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Submitting the form"
+level: 5
+requires:
+  - "Select & Option"
+resources:
+  - url: https://scrimba.com/learn/learnreact/forms-in-react-submitting-the-form-coe43436db60b0c21a1cca067
+    desc: "Forms in React: Submitting the form"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Practice: quiz, sign up form"
+level: 5
+requires:
+  - "Submitting the form"
+resources:
+  - url: https://scrimba.com/learn/learnreact/forms-quiz-coe3546b99ba848ab627ef5a3
+    desc: "Forms quiz!"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/sign-up-form-practice-co30d477b8025a70873e8cb6a
+    desc: "Sign up form practice"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
\ No newline at end of file
diff --git a/skills/77 React/HTML vs. JSX.yml b/skills/77 React/HTML vs. JSX.yml
new file mode 100644
index 000000000..9228d5a13
--- /dev/null
+++ b/skills/77 React/HTML vs. JSX.yml	
@@ -0,0 +1,35 @@
+---
+sort: 30
+
+---
+skill: "className"
+level: 3
+requires:
+  - "Composability // Nesting elements"
+  - "// CSS // Selectors // Class selectors"
+  - "// CSS // Selectors // Child combinator (x>y)"
+  - "// CSS // Styling Text // list-style"
+  - "// CSS // Box Model // width"
+  - "// CSS // Box Model // padding"
+  - "// CSS // Flexible Layout Module (Flexbox) // justify-content"
+  - "// CSS // Flexible Layout Module (Flexbox) // align-items"
+resources:
+  - url: https://scrimba.com/learn/learnreact/styling-with-classes-co9a8472da55bf26d30d348ba
+    desc: "Styling with Classes"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "onClick"
+level: 4
+requires:
+  - "className"
+  - "Composability // Components in separate files"
+  - "// JavaScript // JavaScript in Browser // DOM Events overview"
+resources:
+  - url: https://scrimba.com/learn/learnreact/event-listeners-co45a4eba8c0ba3e8ba7df31b
+    desc: "Event Listeners"
+    type: interactive course
+    lang: en
+    status: ok
\ No newline at end of file
diff --git a/skills/77 React/Local setup & deployment.yml b/skills/77 React/Local setup & deployment.yml
new file mode 100644
index 000000000..2ec711616
--- /dev/null
+++ b/skills/77 React/Local setup & deployment.yml	
@@ -0,0 +1,56 @@
+---
+sort: 100
+
+---
+skill: "Quick local setup"
+level: 3
+text: |
+  Running React in Visual Studio
+requires:
+  - "Basics // Linking, ReactDOM.render"
+resources:
+  - url: https://scrimba.com/learn/learnreact/local-setup-the-quick-way-co38a4834950b81f65b4187b7
+    desc: "Local setup (the quick way)"
+    type: video
+    lang: en
+    status: ok
+
+---
+skill: "Proper local setup"
+level: 4
+text: |
+  Running React with Vite
+requires:
+  - "Composability // Components in separate files"
+  - "// JavaScript // Node.js // npm install"
+resources:
+  - url: https://scrimba.com/learn/learnreact/run-react-locally-with-vite-co5c14c369399240413ef9491
+    desc: "Run React locally with Vite"
+    type: video
+    lang: en
+    status: check
+
+---
+skill: "React & Netlify"
+level: 4
+text: |
+  Deploying React project with Netlify
+requires:
+  - "Basics // import React & ReactDOM"
+  - "// JavaScript // Node.js // npm install"
+  - "// Advanced // Deployment // Netlify"
+resources:
+  - url: https://scrimba.com/learn/learnreact/drag-and-drop-deploy-with-netlify-co0cc43c19137835bc361427d
+    desc: "Drag and Drop Deploy with Netlify"
+    text: |
+      Simple way when including React using linking
+    type: video
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/deploy-your-react-app-with-netlify-cz2NaGce
+    desc: "Deploy Your React App with Netlify"
+    text: |
+      More complex way when including React correctly through import React
+    type: video
+    lang: en
+    status: check
\ No newline at end of file
diff --git a/skills/77 React/Projects.yml b/skills/77 React/Projects.yml
new file mode 100644
index 000000000..8db137b6e
--- /dev/null
+++ b/skills/77 React/Projects.yml	
@@ -0,0 +1,632 @@
+---
+sort: 120
+
+---
+skill: "React info site"
+level: 4
+text: |
+  Create a React info site, follow the interactive course.
+requires:
+  - "Composability // Components in separate files"
+  - "HTML vs. JSX // className"
+  - "// CSS // Selectors // Selector list (x, y)"
+  - "// CSS // Selectors // Universal selector (*)"
+  - "// CSS // Styling Text // color"
+  - "// CSS // Styling Text // font-size"
+  - "// CSS // Styling Text // font-style: italic, font-style: normal"
+  - "// CSS // Styling Text // font-weight"
+  - "// CSS // Styling Text // font-family (including fallbacks)"
+  - "// CSS // Styling Text // line-height"
+  - "// CSS // Box Model // max-width, min-width"
+  - "// CSS // Box Model // box-sizing"
+  - "// CSS // Box Styling // background-color"
+  - "// CSS // Box Styling // background-image, background-repeat, background-position"
+  - "// CSS // Pseudo Elements // ::marker"
+resources:
+  - url: https://coreskill.github.io/scrimba-react-project-react-info-site/
+    desc: "Project preview"
+    text: |
+      This is how the finished project should look like. Don't look for GitHub repository yet.
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/quick-mental-outline-of-project-co25b4851980efb41f5ae45cc
+    desc: "Quick mental outline of project"
+    type: video
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/project-setup-co2104c96a93e1b2ab03254ba
+    desc: "Project setup"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/quick-figma-walkthrough-cob144fc38f432d088b0f20ab
+    desc: "Quick Figma Walkthrough"
+    text: |
+      Using Figma is optional
+    type: video
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/navbar-styling-co6b241c280719be40956bba1
+    desc: "Navbar & Styling"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/main-section-co48340cd80b68fccc25166ce
+    desc: "Main Section"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/color-the-bullets-co181436dabcfe4183c944026
+    desc: "Color the bullets"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/add-background-logo-coa6145f3a9c7e1cbc40f5f6a
+    desc: "Add background logo"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/react-section-1-recap-coe9c48b4bb10c9885a20151a
+    desc: "React Section 1 Recap"
+    text: |
+      You don't have to join the Discord server at the end, feel free to ignore it.
+    type: video
+    lang: en
+    status: ok
+  - url: https://github.com/coreskill/scrimba-react-project-react-info-site
+    desc: "React info site on GitHub"
+    text: |
+      We recommend to open it only after you have completed the project, or if you are stuck on something for a long time and don't know what to do.
+    type: repository
+    lang: en
+    status: ok
+
+---
+skill: "AirBnb clone part 1"
+level: 4
+text: |
+  Create an AirBnb Experiences clone, follow the interactive course.
+requires:
+  - "Composability // Components in separate files"
+  - "HTML vs. JSX // className"
+  - "// CSS // Selectors // Universal selector (*)"
+  - "// CSS // Styling Text // color"
+  - "// CSS // Styling Text // font-size"
+  - "// CSS // Styling Text // font-weight"
+  - "// CSS // Styling Text // font-family (including fallbacks)"
+  - "// CSS // Box Model // max-width, min-width"
+  - "// CSS // Box Model // box-sizing"
+  - "// CSS // Box Styling // box-shadow"
+  - "// CSS // Box Styling // border-radius"
+  - "// CSS // Flexible Layout Module (Flexbox) // flex-direction"
+  - "// CSS // Flexible Layout Module (Flexbox) // align-self"
+resources:
+  - url: https://coreskill.github.io/scrimba-react-project-airbnb-clone/
+    desc: "Project preview"
+    text: |
+      This is how the finished project should look like. Don't look for GitHub repository yet.
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/section-intro-figma-file-co359499e9b60a56d617d5307
+    desc: "Section intro & Figma file"
+    text: |
+      Using Figma is optional, but recommended at this point.
+    type: video
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/project-setup-navbar-cob544349a4494c348ab844f0
+    desc: "Project setup: Navbar"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/project-setup-hero-co90845d2aecdbb1a1c84a3ad
+    desc: "Project setup: Hero"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/project-card-component-co1954a349a2aaba7383a6cbe
+    desc: "Project: Card Component"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "AirBnb clone part 2"
+level: 4
+text: |
+  Create an AirBnb Experiences clone, follow the interactive course.
+requires:
+  - "AirBnb clone part 1"
+  - "Props // Non-string props"
+resources:
+  - url: https://scrimba.com/learn/learnreact/project-pass-props-to-card-component-co2094669b9fe6bf481f857ae
+    desc: "Project: pass props to card component"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "AirBnb clone part 3"
+level: 4
+text: |
+  Create an AirBnb Experiences clone, follow the interactive course.
+requires:
+  - "AirBnb clone part 2"
+  - "Array rendering // Mapping"
+  - "// CSS // Box Styling // background-color"
+  - "// CSS // Positioning // position: relative, position: static"
+  - "// CSS // Positioning // position: absolute"
+resources:
+  - url: https://scrimba.com/learn/learnreact/project-map-experiences-data-into-components-co0704006bcf75aae48fb04c3
+    desc: "Project: Map experiences data into components"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/project-key-prop-cod824954b2c1feecf545bc49
+    desc: "Project: key prop"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/project-sold-out-badge-cod6a41078bdec8db3c39513b
+    desc: "Project: Sold Out Badge"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/project-pass-object-as-props-cod6f4e56bca6a67caca77684
+    desc: "Project: Pass object as props"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/project-spread-object-as-props-cobc143b6a3172ef8cfd398f2
+    desc: "Project: Spread object as props"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/react-section-2-recap-co2a74b21bbb7fef31887674b
+    desc: "React Section 2 Recap"
+    text: |
+      You don't have to join the Discord server at the end, feel free to ignore it.
+    type: video
+    lang: en
+    status: ok
+  - url: https://github.com/coreskill/scrimba-react-project-airbnb-clone
+    desc: "AirBnb clone on GitHub"
+    text: |
+      We recommend to open it only after you have completed the project, or if you are stuck on something for a long time and don't know what to do.
+    type: repository
+    lang: en
+    status: ok
+
+---
+skill: "Meme generator part 1"
+level: 4
+text: |
+  Create a meme generator, follow the interactive course.
+requires:
+  - "Composability // Components in separate files"
+  - "HTML vs. JSX // className"
+  - "// HTML // Body // <form>, <input>, <textarea>, <label>, <select>, <option>, <button>"
+  - "// CSS // Selectors // Universal selector (*)"
+  - "// CSS // Styling Text // color"
+  - "// CSS // Styling Text // font-size"
+  - "// CSS // Styling Text // font-weight"
+  - "// CSS // Styling Text // font-family (including fallbacks)"
+  - "// CSS // Styling Text // text-indent"
+  - "// CSS // Box Model // border"
+  - "// CSS // Box Model // box-sizing"
+  - "// CSS // Box Styling // border-radius"
+  - "// CSS // Box Styling // Generated Images (Gradients)"
+  - "// CSS // Other CSS Properties // cursor"
+resources:
+  - url: https://coreskill.github.io/scrimba-react-project-meme-generator/
+    desc: "Project preview"
+    text: |
+      This is how the finished project should look like. Don't look for GitHub repository yet.
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/section-intro-figma-file-coeca4c67b87cf73d3fb64da5
+    desc: "Section Intro & Figma file"
+    text: |
+      Using Figma is optional, but recommended at this point.
+    type: video
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/meme-generator-header-cocf84c4c9121d91a0095f3e9
+    desc: "Meme Generator: Header"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/meme-generator-form-co2614ad9acf3a1840aef597b
+    desc: "Meme Generator: Form"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/project-analysis-cocf44997b3d2993a32081ad5
+    desc: "Project analysis"
+    type: video
+    lang: en
+    status: ok
+
+---
+skill: "Meme generator part 2"
+level: 4
+text: |
+  Create a meme generator, follow the interactive course.
+requires:
+  - "Meme generator part 1"
+  - "HTML vs. JSX // onClick"
+  - "Props // Destructuring props"
+resources:
+  - url: https://scrimba.com/learn/learnreact/project-get-random-meme-co0d240b0b92838697b8749a1
+    desc: "Project: Get random meme"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Meme generator part 3"
+level: 4
+text: |
+  Create a meme generator, follow the interactive course.
+requires:
+  - "Meme generator part 2"
+  - "State // useState"
+resources:
+  - url: https://scrimba.com/learn/learnreact/project-add-images-to-the-meme-generator-co2e04f5499f85d20fecbdf22
+    desc: "Project: Add images to the meme generator"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Meme generator part 4"
+level: 4
+text: |
+  Create a meme generator, follow the interactive course.
+requires:
+  - "Meme generator part 3"
+  - "State // Arrays and objects"
+resources:
+  - url: https://scrimba.com/learn/learnreact/project-refactor-state-coaf8489fbc3d70a207f29713
+    desc: "Project: Refactor state"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Meme generator part 5"
+level: 5
+text: |
+  Create a meme generator, follow the interactive course.
+requires:
+  - "Meme generator part 4"
+  - "Forms // Practice: quiz, sign up form"
+resources:
+  - url: https://scrimba.com/learn/learnreact/project-add-text-to-image-co9dd4288bcdb0c0cfe7a2d9c
+    desc: "Project: Add text to image"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Meme generator part 6"
+level: 5
+text: |
+  Create a meme generator, follow the interactive course.
+requires:
+  - "Meme generator part 5"
+  - "Effect // useEffect & fetching data"
+  - "// JavaScript // Requests // async GET Requests"
+resources:
+  - url: https://scrimba.com/learn/learnreact/project-get-memes-from-api-coe9a494f854435f2630f2ce4
+    desc: "Project: Get Memes from API"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/react-section-3-recap-co5f14456bbe0f15f99e69ae1
+    desc: "React Section 3 Recap"
+    text: |
+      You don't have to join the Discord server at the end, feel free to ignore it.
+    type: video
+    lang: en
+    status: ok
+  - url: https://github.com/coreskill/scrimba-react-project-meme-generator
+    desc: "Meme generator on GitHub"
+    text: |
+      We recommend to open it only after you have completed the project, or if you are stuck on something for a long time and don't know what to do.
+    type: repository
+    lang: en
+    status: ok
+
+---
+skill: "React info site upgrade"
+level: 4
+text: |
+  Upgrade the React info site to allow switching between light and dark modes.
+requires:
+  - "React info site"
+  - "State // Parent-child component interaction"
+resources:
+  - url: https://coreskill.github.io/scrimba-react-project-react-info-site-upgrade/
+    desc: "Project preview"
+    text: |
+      This is how the finished project should look like. Don't look for GitHub repository yet.
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/warm-up-add-dark-light-modes-to-reactfacts-site-co5924409bb476cc78b0d818a
+    desc: "Warm-up: Add Dark/Light modes to ReactFacts site"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://github.com/coreskill/scrimba-react-project-react-info-site-upgrade
+    desc: "React info site upgrade on GitHub"
+    text: |
+      We recommend to open it only after you have completed the project, or if you are stuck on something for a long time and don't know what to do.
+    type: repository
+    lang: en
+    status: ok
+
+---
+skill: "Notes App: intro"
+level: 4
+text: |
+  Upgrade the existing note-taking app, add requested features to it. Follow the interactive course.
+requires:
+  - "State // Practice: boxes challenge"
+  - "Conditional rendering // Practice: quiz"
+resources:
+  - url: https://coreskill.github.io/scrimba-react-project-notes-app/
+    desc: "Project preview"
+    text: |
+      This is how the finished project should look like. Don't look for GitHub repository yet.
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/notes-app-intro-coea14f76b39cf1bfb7c86de4
+    desc: "Notes App: Intro"
+    text: |
+      Make sure you understand the source code of the app
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/notes-app-features-to-add-coaaa4569b9b2bbad23681d93
+    desc: "Notes App: Features to add"
+    text: |
+      You'll be working on these features
+    type: video
+    lang: en
+    status: ok
+
+---
+skill: "Notes App: localStorage sync"
+level: 5
+text: |
+  Upgrade the existing note-taking app, add requested features to it. Follow the interactive course.
+requires:
+  - "Notes App: intro"
+  - "Effect // useEffect"
+resources:
+  - url: https://scrimba.com/learn/learnreact/notes-app-sync-notes-with-localstorage-co3c5495b8d7949e81b79988a
+    desc: "Notes App: Sync notes with localStorage"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/lazy-state-initialization-cod784faab248ffe738e900a2
+    desc: "Lazy State Initialization"
+    text: |
+      Useful for optimization
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Notes App: note summary title"
+level: 5
+text: |
+  Upgrade the existing note-taking app, add requested features to it. Follow the interactive course.
+requires:
+  - "Notes App: localStorage sync"
+resources:
+  - url: https://scrimba.com/learn/learnreact/notes-app-note-summary-title-co79d4c77b58e6e0f83ac0227
+    desc: "Notes App: Note summary title"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Notes App: move note to the top"
+level: 5
+text: |
+  Upgrade the existing note-taking app, add requested features to it. Follow the interactive course.
+requires:
+  - "Notes App: note summary title"
+  - "// JavaScript // Arrays // .push()"
+  - "// JavaScript // Arrays // .unshift()"
+resources:
+  - url: https://scrimba.com/learn/learnreact/notes-app-bump-recent-note-to-the-top-co3094396ae8a6fba32c9d71c
+    desc: "Notes App: Bump recent note to the top"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Notes App: delete note"
+level: 5
+text: |
+  Upgrade the existing note-taking app, add requested features to it. Follow the interactive course.
+requires:
+  - "Notes App: move note to the top"
+  - "// JavaScript // Iterators // .filter()"
+resources:
+  - url: https://scrimba.com/learn/learnreact/notes-app-delete-note-cg8gPwc6
+    desc: "Notes App: Delete note"
+    text: |
+      You can ignore Firebase mentioned at the end.
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://github.com/coreskill/scrimba-react-project-notes-app
+    desc: "Notes App on GitHub"
+    text: |
+      We recommend to open it only after you have completed the project, or if you are stuck on something for a long time and don't know what to do.
+    type: repository
+    lang: en
+    status: ok
+
+---
+skill: "Tenzies game part 1"
+level: 4
+text: |
+  Create a game called Tenzies, follow the interactive course.
+requires:
+  - "Props // Props passing to a component"
+  - "// CSS // Selectors // Universal selector (*)"
+  - "// CSS // Styling Text // font-size"
+  - "// CSS // Box Model // max-width, min-width"
+  - "// CSS // Box Model // box-sizing"
+  - "// CSS // Box Styling // background-color"
+  - "// CSS // Box Styling // box-shadow"
+  - "// CSS // Box Styling // border-radius"
+  - "// CSS // Flexible Layout Module (Flexbox) // flex-direction"
+  - "// CSS // Other CSS Properties // cursor"
+resources:
+  - url: https://coreskill.github.io/scrimba-react-project-tenzies-game/
+    desc: "Project preview"
+    text: |
+      This is how the finished project should look like. Don't look for GitHub repository yet.
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/tenzies-project-intro-cof0d44bfad1fb88293fdc9d1
+    desc: "Tenzies Project Intro"
+    type: video
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/tenzies-setup-co0a9459ea14580c07f072cfd
+    desc: "Tenzies: Setup"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/tenzies-die-components-co38647cca41846b5b884e953
+    desc: "Tenzies: Die components"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Tenzies game part 2"
+level: 4
+text: |
+  Create a game called Tenzies, follow the interactive course.
+requires:
+  - "Tenzies game part 1"
+  - "State // Parent-child component interaction"
+  - "// JavaScript // Basics // Built-in Objects"
+  - "// JavaScript // Arrays // .push()"
+  - "// CSS // Styling Text // color"
+  - "// CSS // Styling Text // font-family (including fallbacks)"
+  - "// CSS // Pseudo Classes // link related: :active, :visited, :hover, :focus, :link"
+resources:
+  - url: https://scrimba.com/learn/learnreact/tenzies-generate-array-of-10-random-numbers-cod40451b92865f80528ed9e7
+    desc: "Tenzies: Generate array of 10 random numbers"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/tenzies-map-array-to-die-components-co68a43f78661a7a3f8411dd0
+    desc: "Tenzies: Map array to Die components"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/tenzies-roll-dice-button-co0a84282a4902d4d2324b7fd
+    desc: "Tenzies: Roll dice button"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Tenzies game part 3"
+level: 4
+text: |
+  Create a game called Tenzies, follow the interactive course.
+requires:
+  - "Tenzies game part 2"
+  - "State // Practice: boxes challenge"
+  - "Conditional rendering // Practice: quiz"
+resources:
+  - url: https://scrimba.com/learn/learnreact/tenzies-change-dice-to-objects-cBqReJTz
+    desc: "Tenzies: Change dice to objects"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/tenzies-styling-held-dice-co95f459e817fd41c6bf0f54d
+    desc: "Tenzies: Styling held dice"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/tenzies-hold-dice-part-1-co29e4e94aec702f97ffb9ce4
+    desc: "Tenzies: Hold dice part 1"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/tenzies-hold-dice-part-2-cof4842fcb65b330ef2bf07f3
+    desc: "Tenzies: Hold dice part 2"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/tenzies-hold-dice-part-3-co14645439b478cc8343d4ffe
+    desc: "Tenzies: Hold dice part 3"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Tenzies game part 4"
+level: 5
+text: |
+  Create a game called Tenzies, follow the interactive course.
+requires:
+  - "Tenzies game part 3"
+  - "Effect // useEffect"
+  - "// JavaScript // Iterators // overview of other methods e.g. .findIndex(), .some(), .every(), .reduce()"
+resources:
+  - url: https://scrimba.com/learn/learnreact/tenzies-end-game-part-1-co86d4dd2862c6bda5b935d4f
+    desc: "Tenzies: End game part 1"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/tenzies-end-game-part-2-coda448ae89bf4c2861487e00
+    desc: "Tenzies: End game part 2"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/tenzies-end-game-part-3-co80c434696f1de23fe3a276f
+    desc: "Tenzies: End game part 3"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Tenzies game part 5"
+level: 5
+text: |
+  Create a game called Tenzies, follow the interactive course.
+requires:
+  - "Tenzies game part 4"
+resources:
+  - url: https://scrimba.com/learn/learnreact/tenzies-new-game-co5fd4991acd2a6ded9358bb4
+    desc: "Tenzies: New Game"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/tenzies-extra-credit-ideas-co82b48eab99c792f6b884857
+    desc: "Tenzies: Extra Credit Ideas"
+    text: |
+      Try adding more features to the game on your own!
+    type: video
+    lang: en
+    status: ok
+  - url: https://github.com/coreskill/scrimba-react-project-tenzies-game
+    desc: "Tenzies game on GitHub"
+    text: |
+      We recommend to open it only after you have completed the project, or if you are stuck on something for a long time and don't know what to do.
+    type: repository
+    lang: en
+    status: ok
\ No newline at end of file
diff --git a/skills/77 React/Props.yml b/skills/77 React/Props.yml
new file mode 100644
index 000000000..1ed2ec724
--- /dev/null
+++ b/skills/77 React/Props.yml	
@@ -0,0 +1,88 @@
+---
+sort: 40
+
+---
+skill: "Props introduction"
+level: 4
+text: |
+  Custom attributes (properties) that can be implemented in custom components
+requires:
+  - "Composability // Components in separate files"
+  - "HTML vs. JSX // className"
+resources:
+  - url: https://scrimba.com/learn/learnreact/problem-not-reusable-cob264f4bb014a74ab76c765a
+    desc: "Problem - not reusable"
+    type: video
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/props-part-1-understanding-the-concept-cobb149518dfd52b07a8cd547
+    desc: "Props Part 1: Understanding the Concept"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/props-part-2-reusable-components-co6ee4d91a75aa67d28b43740
+    desc: "Props Part 2: Reusable Components"
+    type: video
+    lang: en
+    status: ok
+
+---
+skill: "Props passing to a component"
+level: 4
+requires:
+  - "Props introduction"
+resources:
+  - url: https://scrimba.com/learn/learnreact/aside-js-inside-jsx-coc9f43c3b6078c0c298ce219
+    desc: "Aside: JS inside JSX"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/props-part-3-create-a-contact-component-coe1744ae81515a4369f2b32d
+    desc: "Props part 3: Create a contact component"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/props-part-4-receiving-props-in-a-component-co88c4bfa84d99b466b78e914
+    desc: "Props part 4: receiving props in a component"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/prop-quiz-get-it--co3c8431aa046a5730388c8ae
+    desc: "Prop quiz! (Get it?? 😆)"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/props-practice-co06f4fa2bd9cf954179925f1
+    desc: "Props practice"
+    text: |
+      Mini project - Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Destructuring props"
+level: 4
+requires:
+  - "Props passing to a component"
+  - "// JavaScript // Objects // Destructured Assignment"
+resources:
+  - url: https://scrimba.com/learn/learnreact/destructuring-props-co7e54a6f9d075ae292a4f3ae
+    desc: "Destructuring props"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Non-string props"
+level: 4
+requires:
+  - "Destructuring props"
+resources:
+  - url: https://scrimba.com/learn/learnreact/passing-in-non-string-props-coefd4c1ca935bef026e4f6db
+    desc: "Passing in non-string props"
+    type: interactive course
+    lang: en
+    status: ok
\ No newline at end of file
diff --git a/skills/77 React/Routing.yml b/skills/77 React/Routing.yml
new file mode 100644
index 000000000..b938926eb
--- /dev/null
+++ b/skills/77 React/Routing.yml	
@@ -0,0 +1,6 @@
+---
+sort: 110
+
+---
+skill: "React Router"
+level: 4
\ No newline at end of file
diff --git a/skills/77 React/State.yml b/skills/77 React/State.yml
new file mode 100644
index 000000000..a326eabfb
--- /dev/null
+++ b/skills/77 React/State.yml	
@@ -0,0 +1,199 @@
+---
+sort: 60
+
+---
+skill: "State introduction"
+level: 4
+text: |
+  This allows us to update the page dynamically
+requires:
+  - "Array rendering // Mapping"
+  - "HTML vs. JSX // onClick"
+resources:
+  - url: https://scrimba.com/learn/learnreact/our-current-conundrum-co53a4b68be61be4a8e646607
+    desc: "Our current conundrum"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Props vs. State"
+level: 4
+requires:
+  - "State introduction"
+resources:
+  - url: https://scrimba.com/learn/learnreact/props-vs-state-props-co090400fb604a75d6b889cf4
+    desc: "Props vs. State: Props"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/props-vs-state-state-cofdc4d4d891c36fc3b0c77fa
+    desc: "Props vs. State: State"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/props-vs-state-quiz-coccb4f309e3305ece69fbc14
+    desc: "Props vs. State Quiz!"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "useState"
+level: 4
+text: |
+  Declaring and updating state
+requires:
+  - "Props vs. State"
+resources:
+  - url: https://scrimba.com/learn/learnreact/usestate-codb9407dbf1fcf31ecb6bb23
+    desc: "useState"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/usestate-array-destructuring-co70846728c7d60f51fa1997c
+    desc: "useState array destructuring"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/changing-state-co85d4a75911c0b43ce5ad623
+    desc: "Changing state"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/usestate-counter-practice-co1f54adba032538022373b97
+    desc: "useState - Counter practice"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/usestate-changing-state-with-a-callback-function-cof9245f4a914e8aaf080c783
+    desc: "useState - Changing state with a callback function"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/changing-state-quiz-co83142b1a97f4e79128e48fa
+    desc: "Changing state quiz!"
+    text: |
+      Practice what you've learned
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "useState & ternary operator"
+level: 4
+requires:
+  - "useState"
+  - "// JavaScript // Conditionals // Ternary operator"
+resources:
+  - url: https://scrimba.com/learn/learnreact/challenge-ternary-practice-co36143f0ba77648bc362c31d
+    desc: "Challenge: ternary practice"
+    text: |
+      Practice what you've learned (in JavaScript)
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/challenge-flipping-state-back-and-forth-co4674229b54cd8335c75e54d
+    desc: "Challenge: flipping state back and forth"
+    text: |
+      Using the ternary operator in combination with the state
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Arrays and objects"
+level: 4
+requires:
+  - "useState & ternary operator"
+resources:
+  - url: https://scrimba.com/learn/learnreact/complex-state-arrays-co8f0498bb502fff29cbc8ee5
+    desc: "Complex state: arrays"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/complex-state-objects-coe244c8c83abea08aa5a283c
+    desc: "Complex state: objects"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/complex-state-updating-state-objects-cJLgWJSN
+    desc: "Complex state: updating state objects"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Parent-child component interaction"
+level: 4
+requires:
+  - "Arrays and objects"
+resources:
+  - url: https://scrimba.com/learn/learnreact/passing-state-as-props-co7444d9daf79f8f39a8ebef4
+    desc: "Passing state as props"
+    text: |
+      Changing the state re-renders all child components, not just the parent.
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/setting-state-from-child-components-co5104ccd8360769343dc8e51
+    desc: "Setting state from child components"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/passing-data-around-coc1c4e8db27909ac7f804244
+    desc: "Passing data around"
+    type: interactive course
+    lang: en
+    status: ok
+
+---
+skill: "Practice: boxes challenge"
+level: 4
+requires:
+  - "Parent-child component interaction"
+  - "// CSS // General CSS // Inline CSS (style attribute)"
+  - "// CSS // Selectors // Universal selector (*)"
+  - "// CSS // Box Model // box-sizing"
+  - "// CSS // Box Model // display: block, display: inline, display: inline-block"
+  - "// CSS // Box Styling // background-color"
+resources:
+  - url: https://scrimba.com/learn/learnreact/boxes-challenge-part-1-co4ff4b9f8504c9a03077bf2c
+    desc: "Boxes challenge part 1"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/dynamic-styles-co57845e4a49eb86d4414b0fd
+    desc: "Dynamic styles"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/boxes-challenge-part-2-cobb94ca9aed421681cf67b3c
+    desc: "Boxes challenge part 2"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/boxes-challenge-part-31-local-state-co0264ad6929a556e38a6a10f
+    desc: "Boxes challenge part 3.1 - local state"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/boxes-challenge-part-32-unified-state-coc544380b8da728809b4b5f2
+    desc: "Boxes challenge part 3.2 - unified state"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/boxes-challenge-part-4-co2ee48359ffd4cb63f392139
+    desc: "Boxes challenge part 4"
+    type: interactive course
+    lang: en
+    status: ok
+  - url: https://scrimba.com/learn/learnreact/boxes-challenge-part-5-cobdb4d3e907fa304af4b9958
+    desc: "Boxes challenge part 5"
+    type: interactive course
+    lang: en
+    status: ok
\ No newline at end of file