Know more about web essential frameworks: PrimeNG and PrimeReact

Prime was and is present on many websites around the world. Here we show you: what it is? and how to implement it?

Prime is an open-source web framework with more than 80 varieties of UI components.

Prime has a set of UI components for React, Angular, Vue, and Java...

In addition to its variety of components, we find many themes and templates in different modern styles, design-agnostic and responsive components.

With the help of the set of frameworks offered by prime, you can get various user components (all widgets are open source and free to use) that will help you in building your React, Angular, and Vue.js web projects, it is easy to install and implement.

"Prime Technology is not a software vendor, but a software development house, along with consulting and training activities... This helps us to see the project from an application developer's point of view so that we can easily notice missing features and quickly fix bugs. This differs PrimeFaces significantly from other libraries." (primefaces.org/whyprimefaces, 2015).

PrimeNG - PrimeReact

TALK OF THE WEEK

PrimeNG

To start with PrimeNG, inside an Angular project previously created run:

npm install primeng --save
npm install primeicons --save

UI components are configured as modules, once PrimeNG is downloaded, the modules and APIs can be imported as follows:

import {AccordionModule} from 'primeng/accordion';
//in accordion tab

import {MenuItem} from 'primeng/api';
//api

Don't forget the CSS dependencies of your choice and the structural CSS of components... And the free themes (PrimeNG ships with 33 of them). We gonna choose the dark-blue one:

node_modules/primeicons/primeicons.css
node_modules/primeng/resources/themes/lara-dark-blue/theme.css
node_modules/primeng/resources/primeng.min.css

With this, you can take all the necessary styles to PrimeNg

PrimeReact

Similar processes are in place for PrimeReact, to install and run:

npm install primereact
npm install primeicons

PrimeIcons? Font icon library that allows you to import prime's component.

The import path is available in the documentation of the corresponding component.

//import { ComponentName } from 'primereact/{componentname}';
import { Dialog } from 'primereact/dialog';

Finally, you'll be able to utilize the component in your application.

Here's a video using Prime in Angular and React projects:

If there is an error with the player, you can watch the video at the following LINK.

_________________________________________________________________________________________

¡Thanks for reading!

📍 Connect with us on instagram👇