Epic React — React Fundamentals

This is your go-to friend Kent C. Dodds's course — Epic React. Presenting a read on the very first section of the course — Learning React Fundamentals.

Captivating isn’t it?

After good freelancing, open-sourcing, and some internship work, my imposter syndrome has let me call myself a React developer. Still, there is a missing line and I’m into it. That missing thread leads me to go for — Epic React. You wonder why. Are you crazy?

Hooks, classes, CSS-In-JS, JSX, Redux, Context, etc, etc. These are very important for the journey of React. But when it comes to bigger projects, these demons appear — performance, testing, reusability, flexibility, React suspense, optimization, etc. Most of us are likely to throw our hands up in defeat. Admit it ( I do ).

React’s flexibility is a double-edged sword. — Kent C. Dodds

As developers, we need to build applications that scale and are well-tested plus well-architectured, says Kent — no, everyone. Yeah, that’s the sole reason why I opted for “Epic React”. You may need to as well. Take a look at the course curriculum, and I am sure you won’t be left unwowed.

Get Really Good at React

I sound like a tutorial hell scheme, don’t I? Well, it all comes down to you and how you approach learning. One of my favourites, Josh Comeau, has a beautiful saying on this —

How To Learn Stuff Quickly

Hope you find this relatable.

Going back to the main article, this is a series based on the sections of the course. Today’s topic is “React Fundamentals”. I am writing this to generalize the key points covered by the author.

Boarding,

1. The Setup

This is where the author had me. Literally, it’s no other course setup, but rather your own Bootcamp. Yes, a code-along interactive workshop with videos if stuck. The Epic React team has done a really good job here. The setup is not that hard to install on your machine. Just read proper documentation and you’re ready to go. Here is the teaser to tease you —

This is the Workshop. This is it, Epic React.

If you’re prone to video watching, then just go through the workshop website. Read instructions. Solve exercises. Solve extra credit exercises. Cross-check your solutions with the tests that the author has written for you. Bingo.

2. You’re not learning REACT

Seriously, this is what the author will tell you at the start. All he means is, you will know behind-the-curtain things rather than jumping straight into React. The author tells about the DOM and its necessity.

Key Points -

• DOM — Interactivity with The Document Object Model
• Nodes — Creating nodes/elements with JavaScript

3. RAW

Not the Research and Analysis Wing but the RAW APIs of React. Here you will get to code with those APIs to print your “Hello World”.

Key Points -

• React the framework — Responsible for creating React elements. Similar to what you do document.createElement() in vanilla JavaScript.
• ReactDOM the renderer — Responsible for rendering those React elements to the DOM. Kinda like rootElement.append() .
• Nested Gotcha — A problem while creating nested elements using React RAW APIs, i.e React.createElement(). Which leads to the birth of —

4. JSX

A syntactic sugar that resembles HTML is built on top of React RAW APIs to understand code easily. JSX is not HTML but a syntax extension of javaScript. That’s why JSX is alien to the browser.

Key Points -

• JSX — To produce those React.createElement() in HTML-like way.
• Babel — Code compiler to compile the JSX so that browser can understand
• Spread — An operator in javascript. Used when all elements from an object or array need to be included in a list of some kind. Must learn.

5. Custom Components & Styling

You will see yourself transitioning from how repetitive code can be converted into a custom component that can be used anywhere in the application environment.

Key Points -

• Functions — Functions are to avoid repetition. That’s where you start. Create a custom function that returns an element like div . But are not the components that we want.
• React createElement — Learn about the arguments of these RAW APIs which accept functions and return renderable things. Still not the component.
• JSX — Here it is. Just like using JSX for regular divs is nicer than using the raw React.createElement API, using JSX for custom components is nicer too ( stolen from the documentation of Epic React, XD ). You will witness how the Babel interprets the components written in various forms using JSX.
• PropTypes — More like what you want your data to be a type of. Suppose, I send you a flower, & I want you to receive a flower and not something fruit. That’s what two components do. The parent component will want its child to have that only particular type of data. The author explains the merits & demerits of having PropType checking. You get to try an npm package for the same in the extra credit exercise.
• Styling — Of course, you have seen some highly experienced experts creating those sick animations & user interfaces. The author welcomes you to the styling in React by letting you create a simple object of styles & then creating a custom component for the same. Props to encapsulate styling at the end.
• React Fragment — Necessary not Mandatory. It’s React pattern to return multiple components together.

Last but not least,

6. Forms & Keys

In this workshop, you will know how to handle form submission in react, target dom elements, and some validation. Not to forget, Keys — Ahh, that’s a pain in your head if avoided thinking it's low-key.

• Event and Ref — to ways to access the dom element. A ref is an object that is set to React element which in turn sets the reference to the actual DOM node rendered.
• Control — letting React control the input values in forms. The value prop with the onChange handler.
• Keys — If you have done some React then you might have seen the key warning in your browser. This happens when you try to render an array of React elements. Warning tries to tell you that, each element should have some unique property so that the React can identify one from the other. You can read about why Keys are the essence in React —

Why React needs a key prop

Phew, what a beautiful learning ( felt to me at least, you might feel after doing that on your own ). You can buy the course or do it the other way around ( you know what I mean, right? ). But, there is one Free thing for sure, & it’s this code-along interactive workshop. Get the repository and kick-start the learning.

GitHub - kentcdodds/react-fundamentals: Material for my React Fundamentals Workshop

Clone. Install and Start learning ̶R̶e̶a̶c̶t̶, no, Epic React.

You can find how I approached this first section here in my ZTM-React repository —

TidbitsJS - Overview

With that, into the next section in the next article. Until then,

İyi günler 👋

More content at plainenglish.io