Epic React Fundamentals
Tags: react, javascript, beginners, 100daysofcode
Published: 2021-04-09 16:07:38

<h2><b>React Fundamentals</b></h2>
<br>
<p>I recently began a new #100DaysOfCode challenge on Twitter to keep track  of my progress through <a href="https://epicreact.dev/">Kent C. Dodd's Epic React</a> 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".</p>
<br>
<h3>Intro to Raw React API's</h3>
<br>
<p>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.</p>
<br>
{% gist https://gist.github.com/averyramirez/ce38e3487498d94d4aaecb30c51efb11 %}
<br>
<p>Below you can see how the children and className props were refactored to use React, and the rootElement is now rendered instead of appended.</p>
<br>
{% gist https://gist.github.com/averyramirez/a28c1b6605b86eaece4b2071630e19e9 %}
<br>
<h3> Using JSX</h3>
<br>
<p>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.</p>
<br>
{% gist https://gist.github.com/averyramirez/304b7cc0c4082e49b6a0df49ee052930 %}
<br>
<p>After enabling Babel, we're able to use a simpler syntax to create our Hello World element.</p>
<br>
{% gist https://gist.github.com/averyramirez/008d673a7f0a400c6dd7c56d6ba08997 %}
<br>
<h3>Forms</h3>
<br>
<p>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.</p>
<br>
{% gist https://gist.github.com/averyramirez/4ab0b2cb14deb9f96180962524dd37cf %}
<br>
<p></p>
<br>
<p>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.</p>
<br> 
{% gist https://gist.github.com/averyramirez/444680e26e8955c34371eb2edd437c30 %}
<br>
<h4>Conclusion</h4>
<p>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 <a href="https://kentcdodds.com/blog/javascript-to-know-for-react">JavaScript to Know for React</a>, published by Kent C. Dodds. You can also check out the <a href="https://github.com/kentcdodds/react-fundamentals">repository on GitHub</a> for more information.</p>
<br>
<p>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!</p>