Mental Model in React

Learning React JS, or any library/framework, requires a fundamental understanding of the underlying language—in this case, JavaScript. From there, there are several key concepts to understand when learning React:

  1. Components and Props: React is component-based, which means you build encapsulated parts and combine them to make complex UIs. Components are like JavaScript functions; they can accept arbitrary inputs called “props” and return React elements describing what should appear on the screen. The process of breaking down your UI into components is a fundamental part of thinking in React.

  2. State and Lifecycle Methods: State is a feature available to class components in React (also accessible via hooks in functional components). It allows components to create and manage their own data. Lifecycle methods allow you to run code at particular moments in a component’s life, such as when it is first added to the DOM (mounted) or just before it is removed (unmounted).

  3. One-Way Data Flow (Unidirectional Flow): In React, state is passed top-down (parent to child) through props. This is known as “unidirectional data flow”. Understanding how data moves around a React application is crucial to building in React.

  4. JSX: JSX is a syntax extension for JavaScript, and it looks similar to HTML. It is used to describe what the UI should look like. JSX expressions get transpiled to React.createElement() function calls.

  5. React Hooks: Hooks are a newer feature in React that allow you to use state and other React features without writing a class. They can simplify your code and make it easier to read and maintain.

  6. Virtual DOM: React maintains a lightweight copy of the real DOM in memory, and when state changes in a component, React firstly performs a diffing operation, comparing the new Virtual DOM with the old one. It then updates the real DOM to reflect these changes. This concept is crucial for understanding React’s performance benefits.

  7. Immutability: In React, you typically don’t modify state directly. Instead, you create a new copy of the state, modify the copy, and then set the state to the new copy. This plays into the way React’s diffing algorithm works and is a key part of the React mental model.

One way to approach learning React is to build small projects, focusing on one concept at a time. As you become more comfortable with the basics, you can start to learn more advanced topics, like hooks, context, and advanced routing.

Library or Framework

Is React a library or a framework. The reason is that it is capable of render without the developer explicitly calling it when the UI needs to be updated. It is taking care of certain things behind the scenes and it sometimes acts like a framework

The distinction between a library and a framework isn’t always perfectly clear and can sometimes be a matter of perspective.

In general, the key difference lies in “Inversion of Control” - with a library, you are in control and you call the library code when you want to use it. On the other hand, with a framework, it’s in control and it calls your code when it needs it.

React is often referred to as a library because it’s not prescriptive about the full architecture of your application. It primarily provides a way to build UI components, and you call React code when you want to define, compose, and render those components. However, it doesn’t enforce a specific way to manage state, handle side effects, organize and structure your code, route between pages, etc. There are libraries in the React ecosystem (like Redux for state management, React Router for routing, etc.) that provide these capabilities, but you can also use other solutions or build your own.

On the other hand, you could consider React to be somewhat framework-like, especially when considering the way it manages the component lifecycle and updates the DOM, as you mentioned.

In the end, whether you view React as a library or a framework could depend on how you’re using it, and how it fits into the overall architecture of your application. But most commonly, React is referred to as a JavaScript library.