EpicReact — Fundamentals
I bought the EpicReact course from Kent C. Dodds and I want to give you my review of the first module. This will be a series of blog posts about EpicReact and my journey towards completing it.
Background
I attended the React Summit on October 15–16 virtually and learned a lot during it. Especially, about how cool GraphQL is and how important testing is. One of the speakers that was there was Kent C. Dodds who is one of the creators of the React Testing Library. I did a little digging of the other projects Kent has participated in and I found Epic React. Epic React is a course for React development.
Who is Epic React for?
This is intermediate/advanced material. Epic React is not for novice developers .… Epic React is designed for web developers who want to create robust, high-quality, well-tested React applications that scale to meet users, teams, and project stakeholders’ needs. — EpicReact.dev
After doing some research about the course, I took the plunge into the course. I want to expand my knowledge of React and learn to use the latest and greatest techniques from a ‘master’ of React.
Module 1 has seven parts and I want to explain what I learned from each part of the module. At the end, I will give a brief overview of what I learned and if I think the course is worth the money or time, so far.
Module 1: Part 1/7 — Getting Started
I want to preface by saying that this course is meant to start out by teaching how React actually works. You don’t create React but you will learn some basics as to how to works. This part actually uses a HTML file to teach the user how to work with the DOM to create elements, set attributes, change attributes, and even append to the page.
Module 1: Part 2/7 — React Is A Library
This part teaches the the user that React is actually just a bunch of libraries that are available on unpkg.com. I never actually knew that you could just import some libraries and just React. Super cool! I would always use create-react-app. However, I learned in this section that CRA uses a lot of resources and if you have just a simple application, It can be more beneficial to just import the libraries themselves.
Module 1: Part 3/7 — JSX & Babel
This is where you learn a little bit about Babel. Babel actually has a REPL playground where you can enter JSX and see how it transplies to JavaScript objects. In this lesson you also start to learn JSX. Figure 1 is the code you would see in React. Figure 2 is what Babel does behind the scenes to turn the JSX into a JavaScript object that JavaScript would understand.
Module 1: Part 4/7 — Custom Components
In this module, you learn how to write a custom component that you can utilize in your main function. This part still uses a HTML file to show that all you are really doing is creating JavaScript objects. It was incredibly powerful to see it in HTML and see that React isn’t ‘magic’. It is just utilizing JavaScript and Babel to convert your JSX to JavaScript code that the browser can read.
Module 1: Part 5/7 — Styling & otherProps
It’s time to start using a .js file! This lesson is all about learning how to utilize props to style the same component type with different props. It was a great visual representation of how props works. Also, you learn about otherProps . I never really utilized otherProps before this and I learned that I need to use it more often! It allows you to set certain props for a component but you can also allow for any extra props . For example, if I wanted to add a border to just one box, I could do that without specifying that I require a border prop.
Module 1: Part 6/7 — Forms & useState
In this lesson, you learn about how React handles forms. This course is awesome because it utilizes React hooks right from the beginning. Since hooks are becoming more and more common, it is great to learn them early to get them ingrained. The first hook you utilize is useState since in this lesson, you need to keep track of the state of an input field for the form. This lesson covers useState , change handlers, submit handlers and custom components. Even though, I utilize forms daily and know how to they work, it was a nice refresher of getting back to the basics.
Module 1: Part 7/7 — Rendering Arrays
This lesson was a fun one! I actually used this lesson during my last blog post (The Importance of Keys In React). The lesson teaches you how React uses the .map() function to render arrays to the page. However, this lesson teaches more about how React updates the virtual DOM every time an element changes on the page. Of course, this lesson also teaches how important keys are when rendering lists in React by showing you what happens if you don’t use keys correctly.
Conclusion
I feel that EpicReact has been an awesome course for me. I’m really glad that I found it. It has helped reinforce some of the knowledge that I had but, I also learned a lot about how React works and why it works the way it does. Kent does a great job with explaining each section in great detail through videos and text. I also really like his style of figure it out and then come back for the solution. It gives your mind a bit of ‘work’ to try to work through the problem before you just look at the solution.
Next week, I continue this series of blog posts by diving into the React Hooks section and give my thoughts on it.
