DEV Community

Deva I
Deva I

Posted on

What is React and React build tools, Difference Between library vs frameworks.

What is React :

React is a popular, open-source JavaScript library used for building user interfaces (UIs), specifically for single-page applications where data changes over time without reloading the page.

React developed and maintained by Meta (Facebook).

It is widely used for creating fast and scalable single-page applications (SPAs).

It allows developers to create large web applications that are fast, scalable, and simple.

What is Library :

A Library is a set of code that was previously written by a developer that you can call when you are building your project.

In Library, you import or call specific methods that you need for your project.

In simple words, a bunch of code packed together that can be used repeatedly is known as Library.

Reusability is one of the main reasons to use libraries.

Some common examples of libraries are;

▪️React

React is a JavaScript library for building user interfaces.

▪️Redux

Redux is an open-source JavaScript library for managing application state.
It's most commonly used with React

▪️Three.js

It's another super cool JavaScript library used to create and display 3d computer graphics.

▪️Lodash

Lodash is a JavaScript library that provides utility functions for common programming tasks.

It's more of a productivity kit in node.js

▪️jQuery

jQuery is a JavaScript library that does the things like event handling and HTML document manipulation

What is Framework :

A framework is a supporting structure that gives shape to your code.

In the Framework, you have to fill the structure accordingly with your code.

There is a specific structure for a particular framework that you have to follow, and it's generally more restrictive than Library.

One thing to remember here is that frameworks sometimes get quite large, so they may also use the Library.

But the Framework doesn't necessarily have to use Library.

Some common examples of frameworks are

▪️Angular

Angular is a JavaScript framework for web and mobile development.

▪️Django

Django is a fully featured server-side web framework written in
Python.

▪️Express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

▪️Rails

Rails is a web application development framework written in the Ruby programming language.

▪️Spring

Spring Framework is an open-source framework for building web applications with Java as a programming language.

Key difference between library and frameworks :

The main key difference between the Library and Framework is something known as inversion of control.

Let's understand this inversion of control more in detail.

When you import a library, you have to call the specific methods or functions of your choice so, and it's up to you when and where to call the Library.

Here, you are in charge of flow.

On the other hand, Framework itself makes a call to your code and provide you with some space to write down details.

So, while using framework your framework is in charge of flow.

In Library, your code is going to call the Library whereas, in Framework, your code is being called by Framework.

What is Build tools in React Js:

Build tools in React.js are software utilities that automate the process of transforming your raw development code into a optimized, production-ready application.

Because browsers cannot natively understand the JSX, TypeScript, or modern ES6+ JavaScript these tools bridge the gap by "building" the code into standard JavaScript, HTML, and CSS.

Popular build tools in React :

🔹Vite
🔹Webpack
🔹Parcel
🔹Rollup
🔹Rsbuild
🔹Turbopack

Vite

Currently the most popular choice.

Vite is a modern frontend build tool designed to provide a significantly faster and leaner development experience for web projects.

Top comments (0)