Learn REACT in 43 seconds
Tags: frontend, programming, learning, productivity
Published: 2023-04-24 07:49:59

*first lets grow [my twitter](https://twitter.com/_sukharev_), i will probably change all of the world obsolete education systems, not sure yet, the more people follow me — the easier it is to change the systems*

---

# SPEEDRUN STARTS NOW

![F&F3 drag race](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgu1rsh2yyszc63st4hn.gif)

**you dont start with React features, you start with ideas!**
you may say Concepts instead of Ideas, same thing

its actually applicable to any tool, not only React

you still need practice to master a tool, but **dont think of the tool in a first place, start with it's Concepts and Problems it solve**

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

bye
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;

ok, it is not.. timer is going! only 31 seconds left

## Example of learning “what React Context is”

*Context is considered complex for newbies, so lets look into it*

&nbsp;

Context shares same data (State) between multiple UI Components, that’s it

&nbsp;

i will explain what State and Compenents are later, wait, its speedrun or what?! IM EXPLAINING NOW!

🏎️ **UI (user-interface) Component**
Component is an interface element, like `Button`.
You code one `Button` component and reuse it in your app,
instead of copying same  `HTML+CSS+JS` code to all places where you need the button

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

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

&nbsp;

**do not memorize implementations** — it change too often and thus should be googled

&nbsp;

## There are 4~5 main ideas in React

i’m sharing just the main ideas with small examples

its not a tutorial, IT’S THE SPEEDRUN! 22 seconds left AAAAA

&nbsp;

## THE IDEAS

### 1. COMPONENTS

*you build 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 the Components like building blocks.

### 2. STATE

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

was also explained above, `Button` component may change it's 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 behaviour by passing custom properties into it.

### 4. REACTIVITY

*components _react_ to State and Props changes*

Component automatically re-renders when data in a local or shared State or incoming Props changes

im not explaining implementations, just google or ask GPT about it, we are here for the Concepts that are easier to memorize

### 5. JSX

You can 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 better development experience

**your time is:** 0 min, 43 sec

reinforcement learning meme below

![dominic toretto drives fast as usual](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ioqlfwjs9hqulv9o5ii9.gif)

## Understand underlying ideas and google implementations

*to start using a tool, you start with a problem it solves and learn what is the tool Concept(s) to solve the problem*

dont 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, its ok, 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 and google about

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

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

dont google “how to use hooks” or “what is JSX”

**google and GPT the WHY — “why JSX was created” or “what problem react hooks solve”** 

bye

![gosling-drive-walking.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2jfrvay65kkmqbidmem.gif)

---

hey wait wait

think about [following the twit bird](https://twitter.com/io_Y_oi) if you want to see education systems to be practice-first and beneficial <3

anyway you may follow twitter if you just liked the text or you are addictive to fun on social networks

or dont follow anybody and dont listen to anyone! make your own way!

*i actually want you to follow my twits, it was just a sale*

---

## Who the F am I?

im a life-long learner who is obsessed with educating himself and helping other people learn things, so they dont walk circles and align their movements ;)

i got in tech in 2017: engineered programs for Alibaba and now playing startups in [Deel](https://www.youtube.com/watch?v=FeDnW5wYjwA) — YC alumni, fastest growing startup in history

i created and open-sourced OpenCommit and came up with an accurate way of writing code with GPT-4 via AI-TDD which is going to take the world of AI repetitive coding when i have time telling people about it

check my [Why to Learn Computer Science now](https://dev.to/disukharev/ai-is-replacing-coders-not-engineers-learn-cs-now-j8f) if you are a Coder