add videos

kentcdodds · kentcdodds · commit 2883b93a51ea · 2024-08-29T09:20:23.000-06:00
diff --git a/exercises/01.js-hello-world/01.problem.hello/README.mdx b/exercises/01.js-hello-world/01.problem.hello/README.mdx
@@ -1,5 +1,7 @@
 # Hello World in JS
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/hello-world-in-js" />
+
 👨‍💼 It's important to have a basic understanding of how to generate and interact
 with DOM nodes using JavaScript because it will help you understand how React
 works under the hood a little better. So in this exercise we're actually not
diff --git a/exercises/01.js-hello-world/01.solution.hello/README.mdx b/exercises/01.js-hello-world/01.solution.hello/README.mdx
@@ -1,5 +1,7 @@
 # Hello World in JS
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/hello-world-in-js/solution" />
+
 👨‍💼 Awesome job. Now you know how to create DOM nodes using the regular JS APIs.
 
 But you know what, we could probably do even more in JS... Let's look at that
diff --git a/exercises/01.js-hello-world/02.problem.root/README.mdx b/exercises/01.js-hello-world/02.problem.root/README.mdx
@@ -1,5 +1,7 @@
 # Generate the Root Node
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/generate-the-root-node" />
+
 Rather than having the `root` node in the HTML, see if you can create that one
 using JavaScript as well. Remove the `<div id="root"></div>` from the HTML and
 instead of trying to find it with `document.getElementById('root')`, create it
diff --git a/exercises/01.js-hello-world/02.solution.root/README.mdx b/exercises/01.js-hello-world/02.solution.root/README.mdx
@@ -1,5 +1,7 @@
 # Generate the Root Node
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/generate-the-root-node/solution" />
+
 👨‍💼 Great! Now we can create DOM nodes dynamically using JavaScript. This is only
 the beginning of our journey. Creating DOM nodes ourselves is not typically the
 best way to build a full fledged application, but it's important for you to
diff --git a/exercises/01.js-hello-world/FINISHED.mdx b/exercises/01.js-hello-world/FINISHED.mdx
@@ -1,4 +1,6 @@
 # Hello World in JS
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/dad-joke-break-hello-world-in-js" />
+
 👨‍💼 Great job! You did it! Now's your opportunity to review what you learned.
 Writing down what you've learned helps you to remember it better.
diff --git a/exercises/01.js-hello-world/README.mdx b/exercises/01.js-hello-world/README.mdx
@@ -1,5 +1,7 @@
 # Hello World in JS
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/intro-to-hello-world-in-js" />
+
 It doesn't take long to learn how to make "Hello World" appear on the page with
 HTML:
 
diff --git a/exercises/02.raw-react/01.problem.elements/README.mdx b/exercises/02.raw-react/01.problem.elements/README.mdx
@@ -1,5 +1,7 @@
 # Create React Elements
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/create-react-elements" />
+
 👨‍💼 Let's convert this to use React! But don't worry, we won't be doing any JSX just
 yet... You're going to use raw React APIs here.
 
diff --git a/exercises/02.raw-react/01.solution.elements/README.mdx b/exercises/02.raw-react/01.solution.elements/README.mdx
@@ -1,5 +1,7 @@
 # Create React Elements
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/create-react-elements/solution" />
+
 👨‍💼 Great work! We're well on our way to using React for building UIs on the web!
 But most apps are a little more complicated than a single element. Let's go
 deeper!
diff --git a/exercises/02.raw-react/02.problem.nesting/README.mdx b/exercises/02.raw-react/02.problem.nesting/README.mdx
@@ -1,5 +1,7 @@
 # Nesting Elements
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/nesting-elements" />
+
 👨‍💼 See if you can figure out how to write the JavaScript + React code to
 generate this DOM output:
 
diff --git a/exercises/02.raw-react/02.solution.nesting/README.mdx b/exercises/02.raw-react/02.solution.nesting/README.mdx
@@ -1,4 +1,6 @@
 # Nesting Elements
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/nesting-elements/solution" />
+
 👨‍💼 Great! Now we've got a nice way to nest our React elements so we can build
 complex structures in our generated HTML. Let's go **even deeper**!
diff --git a/exercises/02.raw-react/03.problem.deep-nesting/README.mdx b/exercises/02.raw-react/03.problem.deep-nesting/README.mdx
@@ -1,5 +1,7 @@
 # Deep Nesting Elements
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/deep-nesting-elements" />
+
 👨‍💼 Just to make sure we really understand how to nest this stuff. Try to create
 this using React's APIs:
 
diff --git a/exercises/02.raw-react/03.solution.deep-nesting/README.mdx b/exercises/02.raw-react/03.solution.deep-nesting/README.mdx
@@ -1,3 +1,5 @@
 # Deep Nesting Elements
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/deep-nesting-elements/solution" />
+
 👨‍💼 Great job! We can go as deep as we want with this stuff!
diff --git a/exercises/02.raw-react/FINISHED.mdx b/exercises/02.raw-react/FINISHED.mdx
@@ -1,4 +1,6 @@
 # Raw React APIs
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/dad-joke-break-raw-react-apis" />
+
 👨‍💼 Wahoo! I'll bet you're excited to get into JSX after working with the raw
 APIs huh? 😅
diff --git a/exercises/02.raw-react/README.mdx b/exercises/02.raw-react/README.mdx
@@ -1,5 +1,7 @@
 # Raw React APIs
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/intro-to-raw-react-apis" />
+
 React is the most widely used frontend framework in the world and it's using the
 same APIs that you're using when it creates DOM nodes.
 
diff --git a/exercises/03.using-jsx/01.problem.compiler/README.mdx b/exercises/03.using-jsx/01.problem.compiler/README.mdx
@@ -1,5 +1,7 @@
 # Compiling JSX
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/compiling-jsx" />
+
 <callout-warning>
 	Normally you'll compile all of your code at build-time before you ship your
 	application to the browser, but because Babel is written in JavaScript we can
diff --git a/exercises/03.using-jsx/01.solution.compiler/README.mdx b/exercises/03.using-jsx/01.solution.compiler/README.mdx
@@ -1,3 +1,5 @@
 # Compiling JSX
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/compiling-jsx/solution" />
+
 👨‍💼 Great! Now we're ready to start using JSX in our HTML file!
diff --git a/exercises/03.using-jsx/02.problem.interpolation/README.mdx b/exercises/03.using-jsx/02.problem.interpolation/README.mdx
@@ -1,5 +1,7 @@
 # Interpolation
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/interpolation" />
+
 🦉 "Interpolation" is defined as "the insertion of something of a different
 nature into something else."
 
diff --git a/exercises/03.using-jsx/02.solution.interpolation/README.mdx b/exercises/03.using-jsx/02.solution.interpolation/README.mdx
@@ -1,5 +1,7 @@
 # Interpolation
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/interpolation/solution" />
+
 👨‍💼 Great job! Remember, if you can compile the JSX you see into JavaScript
 expressions (and vice-versa), you'll be much more efficient with this syntax.
 It's all just JavaScript expressions!
diff --git a/exercises/03.using-jsx/03.problem.spread/README.mdx b/exercises/03.using-jsx/03.problem.spread/README.mdx
@@ -1,5 +1,7 @@
 # Spread props
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/spread-props" />
+
 What if I have an object of props that I want applied to the `div` like this:
 
 ```tsx
diff --git a/exercises/03.using-jsx/03.solution.spread/README.mdx b/exercises/03.using-jsx/03.solution.spread/README.mdx
@@ -1,5 +1,7 @@
 # Spread props
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/spread-props/solution" />
+
 👨‍💼 Great! We do this all the time in React. You'll often find yourself wrapping
 components to compose things in interesting ways and there's where this pattern
 is most useful. We'll get to custom components like that later.
diff --git a/exercises/03.using-jsx/04.problem.nesting/README.mdx b/exercises/03.using-jsx/04.problem.nesting/README.mdx
@@ -1,5 +1,7 @@
 # Nesting JSX
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/nesting-jsx" />
+
 👨‍💼 Remember when we created this with `createElement`?
 
 ```html
diff --git a/exercises/03.using-jsx/04.solution.nesting/README.mdx b/exercises/03.using-jsx/04.solution.nesting/README.mdx
@@ -1,3 +1,5 @@
 # Nesting JSX
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/nesting-jsx/solution" />
+
 👨‍💼 Great work! Isn't that so much better than raw `createElement` calls? 😆
diff --git a/exercises/03.using-jsx/05.problem.fragments/README.mdx b/exercises/03.using-jsx/05.problem.fragments/README.mdx
@@ -1,5 +1,7 @@
 # Fragments
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/fragments" />
+
 🦉 One feature of JSX that you'll find useful is called
 ["React Fragments"](https://react.dev/reference/react/Fragment). It's a special
 kind of component from React which allows you to position two elements
diff --git a/exercises/03.using-jsx/05.solution.fragments/README.mdx b/exercises/03.using-jsx/05.solution.fragments/README.mdx
@@ -1,4 +1,6 @@
 # Fragments
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/fragments/solution" />
+
 👨‍💼 Great! Now you can put elements side-by-side without worrying about their
 parent element.
diff --git a/exercises/03.using-jsx/FINISHED.mdx b/exercises/03.using-jsx/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Using JSX
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/dad-joke-break-using-jsx" />
+
 👨‍💼 Hooray! You now know how to use JSX effectively to make really nicely
 composable user interfaces with React. You've got the fundamentals down, from
 here it's just a matter of practice. Great job!
diff --git a/exercises/03.using-jsx/README.mdx b/exercises/03.using-jsx/README.mdx
@@ -1,5 +1,7 @@
 # Using JSX
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/intro-to-using-jsx" />
+
 JSX is more intuitive than the raw React API and is easier to understand when
 reading the code. It's fairly simple HTML-like syntactic sugar on top of the raw
 React APIs:
diff --git a/exercises/04.components/01.problem.function/README.mdx b/exercises/04.components/01.problem.function/README.mdx
@@ -1,5 +1,7 @@
 # Simple Function
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/simple-function" />
+
 👨‍💼 The DOM we want to generate is like this:
 
 ```html
diff --git a/exercises/04.components/01.solution.function/README.mdx b/exercises/04.components/01.solution.function/README.mdx
@@ -1,5 +1,7 @@
 # Simple Function
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/simple-function/solution" />
+
 👨‍💼 Super, but that's definitely not the most fun way to use custom components.
 In fact, we're technically not creating a custom component at all. We're just
 interpolating a function call into our template. This will have interesting
diff --git a/exercises/04.components/02.problem.raw/README.mdx b/exercises/04.components/02.problem.raw/README.mdx
@@ -1,5 +1,7 @@
 # Raw API
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/raw-api" />
+
 👨‍💼 So far we've only used `createElement('someString')`, but the first
 argument to `createElement` can also be a function which returns something
 that's renderable.
diff --git a/exercises/04.components/02.solution.raw/README.mdx b/exercises/04.components/02.solution.raw/README.mdx
@@ -1,5 +1,7 @@
 # Raw API
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/raw-api/solution" />
+
 👨‍💼 Great! While that's not really all that nicer to work with, it does get us an
 centimeter closer to our goal of using JSX with custom components. It's also
 interesting to throw a couple console logs around and see how using
diff --git a/exercises/04.components/03.problem.jsx/README.mdx b/exercises/04.components/03.problem.jsx/README.mdx
@@ -1,5 +1,7 @@
 # JSX Components
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/jsx-components" />
+
 👨‍💼 Rather than:
 
 ```tsx
diff --git a/exercises/04.components/03.solution.jsx/README.mdx b/exercises/04.components/03.solution.jsx/README.mdx
@@ -1,5 +1,7 @@
 # JSX Components
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/jsx-components/solution" />
+
 👨‍💼 Great job! We can now use JSX to write custom components and reuse bits of
 our UI with ease.
 
diff --git a/exercises/04.components/04.problem.props/README.mdx b/exercises/04.components/04.problem.props/README.mdx
@@ -1,5 +1,7 @@
 # Props
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/props" />
+
 👨‍💼 You are the commander of your component's API. The API for your component is
 "props" which is the object your component function accepts as an argument.
 
diff --git a/exercises/04.components/04.solution.props/README.mdx b/exercises/04.components/04.solution.props/README.mdx
@@ -1,4 +1,6 @@
 # Props
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/props/solution" />
+
 👨‍💼 Great work! Now you have a solid understanding of how React treats JSX and
 custom components! Well done.
diff --git a/exercises/04.components/FINISHED.mdx b/exercises/04.components/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Custom Components
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/dad-joke-break-custom-components" />
+
 👨‍💼 Great job! Now you've got a good handle on what it takes to create a custom
 component with React. And it's not a surface-level understanding either. You
 understand how it works under the hood which will be critical to your experience
diff --git a/exercises/04.components/README.mdx b/exercises/04.components/README.mdx
@@ -1,5 +1,7 @@
 # Custom Components
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/intro-to-custom-components" />
+
 Just like in regular JavaScript, when you want to reuse code, you write
 functions. If you want to share JSX, you can do that as well. In React we call
 these functions "components" and they have some special properties.
diff --git a/exercises/FINISHED.mdx b/exercises/FINISHED.mdx
@@ -1,3 +1,5 @@
 # Get Started with React 🏃‍➡️
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/get-started-with-react-outro" />
+
 Hooray! You're all done! 👏👏
diff --git a/exercises/README.mdx b/exercises/README.mdx
@@ -1,5 +1,7 @@
 # Get Started with React 🏃‍➡️
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/get-started-with-react/get-started-with-react-intro" />
+
 👨‍💼 Hello! I'm Peter the Project Manager and I'm here to help you know what our
 users want you to know so you can build the kind of React application they need!
 In this workshop we're going to give you the foundational knowledge you need
diff --git a/package.json b/package.json
@@ -5,6 +5,8 @@
     "title": "Get Started with React 🏃‍➡️",
     "githubRoot": "https://github.com/epicweb-dev/get-started-with-react/blob/main",
     "subtitle": "Learn the foundational concepts necessary for building React applications and libraries",
+    "epicWorkshopHost": "www.epicreact.dev",
+    "epicWorkshopSlug": "get-started-with-react",
     "instructor": {
       "name": "Kent C. Dodds",
       "avatar": "/images/instructor.png",
