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! 🏎️ A component is an interface element, like a . UI (User-Interface) Component Button You code one component, and reuse it in your app, Button Instead of copying the same code to all places where you need the button. HTML+CSS+JS 🏎️ The component may hold and states. State is data that a component uses to render itself Button disabled=true/false loading=true/false A component renders different UI for itself depending on the state. The state can be shared between multiple Components (with Redux or Context). — they change too often, and thus, should be googled. Do not memorize implementations 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 , , , , .. Then, you assemble your UI with these Components like building blocks. Button List Paragraph Alert Etc 2. STATE State is "some data" that a component view depends on. Was also explained above. The component may change its local state to when it's clicked, and so it will be re-rendered to its loading view. Button loading 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 to State and Props changes. Components react 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. 1 min, 58 sec. Your time is: 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 Unidirectional Data Flow Virtual DOM 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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Understand React.js in 1 Minute and 58 Seconds

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Speedrun Your Understanding of Machine Learning.. in 52 seconds 🏎️

10x Your Knowledge —How To Create a System For Constant Learning

106 Stories To Learn About Education Technology

10 Tips to Grow Your Local YouTube Channel

10 Predictions for a Post-COVID World: Contactless retail, New unicorns and Other

10 Machine Learning, Data Science, and Deep Learning Courses for Programmers in 2020

Speedrun Your Understanding of Machine Learning.. in 52 seconds 🏎️

10x Your Knowledge —How To Create a System For Constant Learning

106 Stories To Learn About Education Technology

10 Tips to Grow Your Local YouTube Channel

10 Predictions for a Post-COVID World: Contactless retail, New unicorns and Other

10 Machine Learning, Data Science, and Deep Learning Courses for Programmers in 2020

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps