Dima Sukharev

Posted on Apr 24, 2023 • Edited on Nov 27, 2023

Learn REACT in 43 seconds

#frontend #programming #learning #productivity

first lets grow my twitter, 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

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

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

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

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)

do not memorize implementations — it 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

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

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

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

Unidirectional Data Flow
Virtual DOM
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

hey wait wait

think about following the twit bird 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 — 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 if you are a Coder