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
Top comments (9)
👏
🙏
Good job!
Easy to go fast when you don’t stop to fix spelling or to correctly use capital letters 😏
lolyouaregood
dude I almost had you!
no way bro
Dude we need an angular SpeedRun Like that 👌
will do