Top npm Packages for React
ReactJS, often referred to as React is a popular JavaScript library developed by Facebook for building user interfaces. It emphasizes a component-based architecture, where UIs are built using reusable components. It has a vast range of libraries which helps it to become more powerful. In this article, we’ll see about the top npm packages for React development, along with installation instructions and usage examples.
There are several npm packages for react which are as follows:
Table of Content
- React Router
- Redux
- Axios
- Styled-Components
- Material-UI
- Formik
- React-Icons
- React Helmet
React Router
React Router is a popular routing library for React applications, enabling navigation among different views or components based on the URL. It allows developers to define routes and render corresponding components based on the current URL, providing a seamless user experience similar to traditional multi-page applications.
To install it in the project run the following command:
npm i react-router
Syntax:
<Router>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>
Redux
Redux is a predictable state container for JavaScript applications, commonly used with React for managing application state. It helps in maintaining a centralized store for the entire application’s state, making it easier to manage and access data across components.
To install it in the project run the following command:
npm i redux
Syntax:
import { createStore } from 'redux';
const store = createStore(rootReducer);
function Root() {
return (
<Provider store={store}>
<App />
</Provider>
);
}
Axios
Axios is a promise-based HTTP client for making AJAX requests in the browser and Node.js. It simplifies the process of sending asynchronous HTTP requests and handling responses, offering features like request and response interceptors, and automatic JSON parsing.
To install it in the project run the following command:
npm i axios
Syntax:
axios.get('/api/data')
.then(response => console.log(response.data))
.catch(error => console.error(error));
Styled-Components
Styled-components is a CSS-in-JS library for styling React components using tagged template literals. It allows developers to write CSS directly within JavaScript files, encapsulating styles within components for improved readability, maintainability, and reusability.
To install it in the project run the following command:
npm i styled-component
Syntax:
const Button = styled.button`
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: #45a049;
}
`;
Material-UI
Material-UI is a popular React UI framework providing pre-built components following Google’s Material Design guidelines. It offers a wide range of customizable components for building responsive and aesthetically pleasing user interfaces, including buttons, inputs, dialogs, and more.
To install it in the project run the following command:
npm i @mui/material
Syntax:
<Button variant="contained" color="primary">Submit</Button>
Formik
Formik is a form management library for React, simplifying the process of building and validating forms. It provides utilities for handling form state, validation, and submission, reducing boilerplate code and offering a declarative approach to form handling.
To install it in the project run the following command:
npm I formik
Syntax:
<Formik
initialValues={{ username: '', password: '' }}
onSubmit={(values, actions) => {
// Handle form submission
}}
>
<Form>
<Field type="text" name="username" />
<Field type="password" name="password" />
<button type="submit">Submit</button>
</Form>
</Formik>
React-Icons
React-icons is a library of popular icons packaged as React components, allowing easy integration of icons into React applications. It provides a vast collection of icons from various icon libraries, such as Font Awesome, Material Design, and more, enabling developers to enhance the visual appeal of their applications.
To install it in the project run the following command:
npm I react-icons
Syntax:
import { FaHeart } from 'react-icons/fa';
<FaHeart/>
React Helmet
React Helmet is a library for managing the document head of React applications, enabling dynamic changes to metadata and tags. It allows developers to set document title, meta tags, and other attributes within React components, improving SEO and enabling better control over the application’s presentation.
To install it in the project run the following command:
npm I react-helmet
Syntax:
<Helmet>
<title>My Page</title>
<meta name="description" content="Description of my page" />
</Helmet>