What is React? Is it a framework or library?
React is the most common front-end JavaScript library in the field of web development. It is used by both big, existing businesses and new businesses (Netflix, Airbnb, Instagram, and the New York Times, to name a few). React brings many advantages to the table, making it a better choice than other frameworks.
React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s viewpoint.
Is it a framework or library?
React is not exactly a framework. React is a very popular JavaScript library.
Frameworks are particularly useful for young teams and startups. In a framework, many smart designs and decisions are already premade. Frameworks are not flexible. A framework usually wants you to code everything in a certain way. If you try to change or design something beyond it, frameworks usually end up everything with you. It’s like a girlfriend in a relationship 😝. On the other hand, a framework has a large collection of features. If you want to use a particular thing in them you have to pull up the whole thing anyway.
React is lightweight, and it’s easy to combine it with other third-party libraries. There is a library for anything in the rich JS ecosystem. You can choose your favorite and plug it in without having to deal with the framework’s design decisions or limitations.
Why React?
i. Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality.
ii. Improved performance: React uses Virtual DOM, thereby creating web applications faster.
iii. Reusable components: Components are the building blocks of any React application, and a single app usually consists of multiple components.
iv. It can be used for the development of both web and mobile apps: There is a framework called React Native, derived from React itself, that is hugely popular and is used for creating beautiful mobile applications.
Features
JSX — JavaScript Syntax Extension
JSX is a JavaScript syntax extension. It’s a term that’s used in React to define how the user interface should look. We can write HTML structures in the same file as JavaScript code by using JSX. Since complex JavaScript DOM structures are avoided, the code is simpler to understand and debug.
Virtual DOM
React keeps a lightweight representation of the “real” DOM in the memory, and that is known as the “virtual” DOM (VDOM). When the state of an object changes in a React application, Virtual DOM gets updated. It then compares its previous state and then updates only those objects in the real DOM instead of updating all of the objects. This makes things move fast, especially when compared to other front-end technologies that have to update each object even if only a single object changes in the web application.
Performance
React uses VDOM, which makes the web applications run much faster than those developed with alternate front-end frameworks.
Components, State, and Props
Components
Components are independent and reusable bits of code. This part is essentially a user interface element. React divides the user interface into discrete, reusable components that can be processed independently.
State
The state is a built-in React object that is used to contain data or information about the component.
Props
Props are short for properties. It is a React built-in object which stores the value of a tag’s attributes and works similar to the HTML attributes. It provides a way to pass data from one component to other components in the same way as arguments are passed in a function.
