React Fundamentals

I recently began a new #100DaysOfCode challenge on Twitter to keep track of my progress through Kent C. Dodd's Epic React workshop. This course covers everything from hooks, patterns, performance and testing, which I will break down section by section in upcoming articles. The format of this course is different than anything I've done before, you're given some incomplete or broken code and are provided tips and descriptions to refactor the code into a working syntax. Today we'll focus on the first module, "React Fundamentals".

Intro to Raw React API's

In this exercise, we were tasked with adding in packages using script tags, and then using two newly accessible global variables, React and ReactDOM which allow you to create React elements and render them to the DOM.

Below you can see how the children and className props were refactored to use React, and the rootElement is now rendered instead of appended.

Using JSX

In order to use JSX, you have to convert it using a code compiler, in this case we're using Babel. Once Babel is added in, we have to update our own script tag to let Babel know we want our code compiled and ran in the browser.

After enabling Babel, we're able to use a simpler syntax to create our Hello World element.

Forms

Our objective here was to successfully create an alert showing the users input. By creating a submit event handler, and accepting the 'event' as the argument and the call, we can prevent the default behavior of the form submit. Instead of refreshing, the users input will show in an alert.

There are a few different ways to get the value of an input; via their index: 'event.target.elements[0].value', or via the elements object by their name or id attribute: 'event.target.elements.usernameInput.value'. Let's go with the second option since it's a little more specific.

Conclusion

These are only a select few exercises from the first segment of the course, there are quite a bit more, including some extra credit assignments. If you're interested in learning React but aren't sure if you have the prerequisites, I'd recommend taking a look at this article that tells you what JavaScript to Know for React, published by Kent C. Dodds. You can also check out the repository on GitHub for more information.

Give me a follow if you're interested in seeing more articles pertaining to the Epic React course. If you're a student of the course, let me know what your favorite parts were in the comments!