SPEEDRUN STARTS NOW

You don't start with React features; you start with ideas!

You may say 'Concepts' instead of 'Ideas', same thing.

It's actually applicable to any tool, not only React.

You still need practice to master a tool, but don't think of the tool in the first place; start with its Concepts and the Problems it solves.

Yep, this is how to learn stuff in the most productive way.

Bye.

Ok, it is not... The timer is going! Only 1 minute and 24 seconds left.

Example of Learning “What React Context Is”

Context is considered complex for newbies, but it’s actually absolutely not, so let's look into it.

Context shares the same data (State) between multiple UI Components; that’s it.

I will explain what State and Components are later. Wait, it's a speedrun, or what?! I'M EXPLAINING NOW!

🏎️ UI (User-Interface) Component A component is an interface element, like a Button.

You code one Button component, and reuse it in your app,

Instead of copying the same HTML+CSS+JS code to all places where you need the button.

🏎️ State is data that a component uses to render itself The Button component may hold disabled=true/false and loading=true/false states.

A component renders different UI for itself depending on the state. The state can be shared between multiple Components (with Redux or Context).

Do not memorize implementations — they change too often, and thus, should be googled.

There Are 4~5 Main Ideas in React

I’m sharing just the main ideas with small examples.

It's not a tutorial, IT'S A SPEEDRUN! 52 seconds left AAAAA!

THE IDEAS

1. COMPONENTS

You build an app layout with reusable components.

I just explained it above. You create different components like Button, List, Paragraph, Alert, Etc.. Then, you assemble your UI with these Components like building blocks.

2. STATE

State is "some data" that a component view depends on.

Was also explained above. The Button component may change its local state to loading when it's clicked, and so it will be re-rendered to its loading view.

3. PROPS

You can render a component differently by passing custom properties into it.

When a component is used in different places, you may change its view and/or behavior by passing custom properties into it.

4. REACTIVITY

Components react to State and Props changes.

A component automatically re-renders when data in a local or shared State or incoming Props changes.

I'm not explaining implementations; just google or ask GPT about it. We are here for the Concepts that are easier to memorize.

5. JSX

Think of JSX like kinda-HTML for React. It just helps you create and use Components in a more development-friendly way.

AAAND STOP 🏁

This is really it, the whole React, nothing complicated, but it took engineers some time to come up with such Concepts, so you have a better development experience.

Your time is: 1 min, 58 sec.

Reinforcement learning meme below.

Understand Underlying Ideas and Google Implementations

To start using a tool, you start with a problem it solves, and learn what the tool's Concept(s) are to solve the problem.

Don't keep implementation in your head like "how to do something with a tool." It's complicated, and everything won't fit in your head anyway. Google implementations; remember ideas.

After 5 times of googling an implementation, you will remember it. Then the technology will become obsolete, and you will forget it. It's okay; it happens all the time.

Ideas are hard to forget; they fit in your memory for a long time.

Other React Ideas You May Also Ask GPT or Google

1. Unidirectional Data Flow
2. Virtual DOM
3. Hooks

But first, start using React, keeping its Concepts in your head ;)

Don't google “how to use hooks” or “what is JSX.”

Google and GPT the WHY — “Why was JSX created?” or “What problems do React hooks solve?”

Bye.