DEV Community

Madhavan G
Madhavan G

Posted on

Basic about React,Library and Framwork.

What is React?

React is a free, open-source front-end JavaScript library used to build interactive user interfaces (UIs), particularly for single-page applications especially for:

•websites
•web apps
•dashboards
•mobile apps (through React Native)

React helps developers create apps using components.

Example:

•Navbar component
•Button component
•Profile card component
•Chat message component

These reusable pieces make apps easier to build and maintain.


Who Created React?

React was created by: Jordan Walke

while working at: Meta(previously Facebook)

React was first released publicly in 2013.

It was originally built to improve Facebook’s UI performance and complexity.


Why Was React Created?

Before React:

•Updating web pages dynamically was difficult
•large applications became messy
•DOM manipulation was slow and error-prone
•UI state management was hard

Developers frequently used:

•jQuery
•manual DOM updates
•lots of imperative code

React introduced a better approach:

•declarative UI
•component-based architecture
•efficient rendering


Why Do We Need React?

Without React, building complex UIs becomes harder as apps grow.

Imagine:

•Notifications updating
•Chat messages appearing
•Likes increasing
•Forms changing
•Live dashboards refreshing

Managing all this manually is difficult.

React helps by:

•Organizing UI into components
•Automatically updating the page when data changes
•Reducing repetitive code
•Improving maintainability


What is the difference between library and framwork?

Library

⇒A library is a collection of reusable functions or tools that you call when you need them.

⇒You are in control of the application flow.

Example:

If you use a math library:

add(2, 3)

Your code decides:

•when to call it
•how to use it
•how the app is structured

⇒Key idea
Your code calls the library


Framework:

A framework provides a structure and rules for building applications. It often controls the overall flow and calls your code at specific times.

Example

In a web framework:

•it decides routing
•lifecycle
•app structure
•startup flow

You plug your code into the framework.

⇒Key idea
The framework calls your code

This is often called Inversion of Control (IoC).

⇒Simple Analogy

•Library = toolbox
You pick tools when needed.

•Framework = house blueprint
The structure is already decided; you fill in parts.


what is build tool in react?

A build tool in React is software that automates the transformation of your source code (like JSX, TypeScript, and modern JavaScript) into optimized, browser-ready files. Because browsers cannot natively understand features like JSX or advanced ES6+ syntax, these tools act as a "bridge" to make your code functional and efficient for the web.

Popular build tools used in react:

  1. Vite
  2. Webpack
  3. Parcel
  4. Rspack
  5. esbuild
  6. Turbopack
  7. Rollup

What is Vite?

Vite is a modern frontend build tool and development server used to build fast web applications, especially with React, Vue, and other frameworks.

It is designed to make development much faster and simpler compared to older tools like Webpack.


Top comments (0)