M3- Why did Facebook engineers create React? Flashcards
There are many tools to build websites. Why did Facebook make React?
Facebook wanted a better way to build user interfaces (UIs) that are easy to update and manage, especially as they grow more complex. React is a tool that helps developers build these UIs by breaking them into small, reusable pieces called components.
Is React just another tool like MVC frameworks?
No, React isn’t an MVC framework. Instead of managing the entire structure of the application like MVC does, React focuses specifically on the user interface. Think of React as a specialized toolkit for building and managing the visible parts of your application.
What does React focus on if it’s not an MVC framework?
React is designed to build composable user interfaces, meaning it encourages breaking down the UI into small, reusable components. These components can be thought of as building blocks, similar to LEGO pieces, which you can use to construct and customize your application’s interface.
How are UIs traditionally built with templates?
Traditionally, UIs are built using templates—predefined structures (like cookie cutters) that dictate how the UI should look. You fill these templates with data, and they produce the final HTML for the web page.
Why doesn’t React use templates?
React takes a different approach by using components instead of templates. Components are more flexible and powerful because they are written in JavaScript. This allows developers to build and extend the UI in ways that templates can’t. It’s like having a versatile toolkit instead of fixed cookie cutters.
Why does React use JavaScript to build UI components?
JavaScript is a flexible and powerful programming language. By using JavaScript, React lets you create complex, reusable components that can handle sophisticated interactions. This is particularly important in large applications where maintaining and extending the UI can become difficult.
How does combining logic and markup in JavaScript help?
Combining logic (how the UI behaves) with markup (how the UI looks) in the same place makes the code easier to manage and understand. It’s like having the recipe and ingredients list on the same page, so everything you need to build the UI is right there.
What is JSX in React?
JSX is a syntax extension for JavaScript that allows you to write UI components that look similar to HTML. It’s like a friendly translator that makes your code easier to read and write by resembling the HTML you’re already familiar with.
Do I have to use JSX with React?
No, JSX is optional. You can write your components in pure JavaScript if you prefer, but many developers find JSX makes their code more readable and easier to work with.
How are UI updates handled traditionally in JavaScript?
Traditionally, when data changes in a JavaScript application, developers have to manually update the DOM (the structure of the web page) to reflect those changes. This can be cumbersome and error-prone, especially in large applications.
How does React simplify the process of updates?
React simplifies updates by using a concept called the Virtual DOM. When your data changes, React re-renders the component, but it doesn’t immediately update the real DOM. Instead, it updates the Virtual DOM, which is a lightweight copy. React then compares this new version with the previous one, identifies the smallest set of changes needed, and applies only those changes to the real DOM. This process is called reconciliation.
How Does the Process Work (React on updates)?
- Initial Render: When you first load a React component, React creates a Virtual DOM version of the entire UI. This is like drawing everything on a practice chalkboard, making sure it looks right, and then copying it onto the real chalkboard.
- Data Changes: When your data changes (for example, a new message comes in), instead of directly updating the real chalkboard, React first updates the Virtual DOM. Think of this as updating your practice chalkboard with the new information.
- Reconciliation: After updating the Virtual DOM, React compares this updated version with the previous version of the Virtual DOM (this is the “before” version that’s still on the practice chalkboard). This comparison process is called reconciliation. During reconciliation, React figures out exactly what has changed between the old version and the new version—like noticing that only a few words in a sentence have changed, rather than the entire sentence.
- Minimal DOM Updates: Once React knows what has changed, it updates only those specific parts of the real DOM—the real chalkboard. This is much faster and more efficient because you’re only erasing and rewriting the parts that actually need to be changed, instead of redoing the entire chalkboard.
What’s the benefit of React’s approach to updates?
React’s approach is much faster and more efficient because it minimizes the amount of work needed to update the UI. This allows developers to build dynamic applications without worrying about the complexities of manually managing the DOM.
How does React ensure consistent behavior across different browsers?
React standardizes how events (like clicks or typing) are handled, ensuring they behave consistently across all browsers. It also automatically uses event delegation, which is a way of handling events efficiently, even in older browsers like Internet Explorer 8. This is like having a universal adapter that makes sure everything works smoothly no matter where it’s used.
