Kent C. Dodds released his Epic React training course with a big fanfare last week.
I was on the fence of buying this, as the pro license is a premium training course that comes with a premium price tag. The course is expensive compared to other online courses.
For example, a year-long-subscription to Frontend Masters costs roughly the same.
But as a life-long learner, I’m dedicated to becoming a better programmer. Kent has convinced in the past with a great teaching style, and I’m keen on leveling up my React skills.
I’m especially interested in the advanced React patterns.
You could learn everything from free resources on the internet, but buying the course guarantees that you get the fast-track to Kent’s teaching experience.
Epic React promises a series of code-along interactive workshops that go from the fundamentals to teaching you a “well defined, production-proven, enterprise-grade architecture for building applications that scale”.
(Notice the buzzwords.)
To consolidate my learning, I will write a few things about what I’ve learned during the course.
The first section, after on-boarding, is React Fundamentals:
Learn everything you need to be effective with the fundamental building block of React applications. When you’re finished, you’ll be prepared to create React components to build excellent experiences for your app’s users.
Let’s get started!
It boils down to React.createElement
React creates UI components from small building blocks. JSX is a syntax for writing HTML-like JavaScript. But it compiles down to React.createElement.
A React element is a JavaScript object that gets synced to the browser’s DOM.
The signature is: React.createElement(component, props, ...children).
component is the HTML element, e.g. an <h1> element.
props stands for properties, for example, class names or id tags for the HTML elements.
children is everything “inside” a React element, for example nested HTML tags:
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
)
React Scope and Upper-casing
React elements must be in the same scope, so that React can compile JSX to a React.createElement.
A lowercase element refers to an inbuilt HTML element like a <div> or <h1> element. Upper-case letters are for user-created components.
Controlled Form Inputs
HTML elements in React work like normal HTML forms and have their own state.
You can directly access the state by using controlled form inputs. That way, you delegate the state management to React.
One use case is to transform the input. For example, if a user should only type lowercase letters, we can use React state and onChange handlers to transform the text input to lowercase.
function Form() {
const [name, setName] = React.useState('')
function handleChange(event) {
event.persist()
setName(event.target.value.toLowerCase()) // force lowercase
}
function handleSubmit(event) {
event.preventDefault()
// handle submit action
}
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input
type="text"
value={name} // controlled input
onChange={handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
)
}