Skip to content

Build Your Own React

One of the best ways to learn how something works is to build our own simplified version of it.

In this exercise, you'll create a render function that takes React elements and produces the equivalent DOM structure!

To keep things as simple as possible, we won't bother with the createRoot API discussed in the previous lesson. Instead, we'll write a render function that accepts a React element and a reference to a DOM container element that will hold our application.

This is meant to be a challenging exercise. It's 100% OK if you can't solve it. Spend 5-10 minutes on it, and then continue on with the lesson.

:

  • A link should be shown in the “Result” pane, linking to wikipedia.org, and with the text “Read more on Wikipedia”.
  • It should work with any element type (eg. anchors, paragraphs, buttons…)
  • It should handle all HTML attributes (eg. href, id, disabled…)
  • The element should contain the text specified under children. children will always be a string.

Code Playground

Open in CodeSandbox
function render(reactElement, containerDOMElement) {
/* Your code here! */
}

const reactElement = {
type: 'a',
props: {
href: 'https://wikipedia.org/',
},
children: 'Read more on Wikipedia',
};

const containerDOMElement =
document.querySelector('#root');

render(reactElement, containerDOMElement);

Solution:

Productive failure

So, you've just attempted the first exercise of the course! How did it go?

I suspect it was pretty tricky, unless you were already familiar with DOM interaction methods. You may not have successfully completed it. You might be feeling a bit discouraged or frustrated.

If so, I have some good news for you: you probably learned a lot more than you think from this exercise!

Most online courses give you everything you need right at the start. You can code along with the instructor without breaking a sweat, and glide through the exercise effortlessly. And, a month later, you won't remember any of it.

It turns out that struggling and failing is one of the most effective ways to learn a new skill quickly!

In academic circles, this is known as productive failure. Here's a quote from a 2019 scientific article:

In Productive Failure, the conventional instruction process is reversed so that learners attempt to solve challenging problems ahead of receiving explicit instruction. While students often fail to produce satisfactory solutions (hence “Failure”), these attempts help learners encode key features and learn better from subsequent instruction (hence “Productive”).

In other words: if you struggle with a problem, give up, and then watch the solution video, you're much more likely to fully understand and remember things. This is how we build lasting, generalized skills!

Of course, it can be demoralizing to struggle. It can trigger our impostor syndrome, make us doubt ourselves. But this is the wrong interpretation! All it means is that you're being challenged, that you're attempting problems that are beyond your current reach. And that's the most effective way to learn! Struggling doesn't mean that you're incapable, it means that you're growing!

When I worked at Khan Academy, we spoke a lot about having a “growth mindset”. A growth mindset is the belief that our brains are elastic, that we become smarter through practice, and that failure is the fastest way to learn. This mindset is a superpower for developers. Personally, it's had a huge impact in my own development, my own career.

So, this course is designed to be challenging, especially for beginners. It won't be all struggle — I want us to have fun, after all! But occasionally, the exercises and projects will push you to go beyond what we've learned in the lessons.

You can learn more about cultivating a growth mindset in this talk from Carol Dweck, presented at Google: “Mindset: The New Psychology of Success”.